Angular - Fixing the app state refresh on initial configuration

npm/ng-packs/packages/core/src/lib/utils/initial-utils.ts

@@ -1,7 +1,7 @@
 import { registerLocaleData } from '@angular/common';
 import { inject, Injector } from '@angular/core';
 import { tap, catchError } from 'rxjs/operators';
-import { lastValueFrom, throwError } from 'rxjs';
+import { firstValueFrom, lastValueFrom, of, throwError, timeout } from 'rxjs';
 import { ABP } from '../models/common';
 import { Environment } from '../models/environment';
 import { CurrentTenantDto } from '../proxy/volo/abp/asp-net-core/mvc/multi-tenancy/models';
@@ -10,17 +10,19 @@ import { EnvironmentService } from '../services/environment.service';
 import { SessionStateService } from '../services/session-state.service';
 import { CORE_OPTIONS } from '../tokens/options.token';
 import { APP_INIT_ERROR_HANDLERS } from '../tokens/app-config.token';
+import { CHECK_AUTHENTICATION_STATE_FN_KEY } from '../tokens/check-authentication-state';
+import { APP_STARTED_WITH_SSR } from '../tokens/ssr-state.token';
 import { getRemoteEnv } from './environment-utils';
 import { parseTenantFromUrl } from './multi-tenancy-utils';
 import { AuthService } from '../abstracts';
-import { CHECK_AUTHENTICATION_STATE_FN_KEY } from '../tokens/check-authentication-state';
 import { noop } from './common-utils';
 
 export async function getInitialData() {
   const injector = inject(Injector);
   const environmentService = injector.get(EnvironmentService);
   const configState = injector.get(ConfigStateService);
   const options = injector.get(CORE_OPTIONS) as ABP.Root;
+  const appStartedWithSSR = injector.get(APP_STARTED_WITH_SSR);
 
   environmentService.setState(options.environment as Environment);
   await getRemoteEnv(injector, options.environment);
@@ -49,8 +51,18 @@ export async function getInitialData() {
       return throwError(() => error);
     }),
   );
-  // TODO: Not working with SSR
-  // await lastValueFrom(result$);
+
+  if (appStartedWithSSR) {
+    await firstValueFrom(
+      result$.pipe(
+        timeout(0),
+        catchError(() => of(null)),
+      ),
+    );
+  } else {
+    await lastValueFrom(result$);
+  }
+
   await localeInitializer(injector);
 }
 

templates/app/angular/src/app/app.config.ts

@@ -1,3 +1,9 @@
+import {
+  withValidationBluePrint,
+  provideAbpThemeShared,
+  provideLogo,
+  withEnvironmentOptions,
+} from '@abp/ng.theme.shared';
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 import { provideAnimations } from '@angular/platform-browser/animations';
@@ -6,9 +12,8 @@ import { appRoutes } from './app.routes';
 import { APP_ROUTE_PROVIDER } from './route.provider';
 import { provideAbpCore, withOptions } from '@abp/ng.core';
 import { environment } from '../environments/environment';
-import { registerLocale } from '@abp/ng.core/locale';
+import { registerLocaleForEsBuild } from '@abp/ng.core/locale';
 import { provideAbpOAuth } from '@abp/ng.oauth';
-import { provideAbpThemeShared, provideLogo, withEnvironmentOptions} from '@abp/ng.theme.shared';
 import { provideSettingManagementConfig } from '@abp/ng.setting-management/config';
 import { provideAccountConfig } from '@abp/ng.account/config';
 import { provideIdentityConfig } from '@abp/ng.identity/config';
@@ -24,19 +29,23 @@ export const appConfig: ApplicationConfig = {
     provideAbpCore(
       withOptions({
         environment,
-        registerLocaleFn: registerLocale(),
+        registerLocaleFn: registerLocaleForEsBuild(),
       })
     ),
     provideThemeLeptonX(),
     provideSideMenuLayout(),
     provideAbpOAuth(),
-    provideAbpThemeShared(),
     provideSettingManagementConfig(),
     provideAccountConfig(),
     provideIdentityConfig(),
     provideTenantManagementConfig(),
     provideFeatureManagementConfig(),
     provideAnimations(),
     provideLogo(withEnvironmentOptions(environment)),
+    provideAbpThemeShared(
+      withValidationBluePrint({
+        wrongPassword: 'Please choose 1q2w3E*',
+      })
+    ),
   ],
 };