Skip to content

[angular] DynamicLayoutComponent didn't work when with a long time APP_INITIALIZER #5229

@yinchang0626

Description

@yinchang0626

@mehmet-erim :Hi,
I think I find a bug about GetAppConfiguration Action and create a branch to test it

1.Add a APP_INITIALIZER provider to AppModule:

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    CoreModule.forRoot({
      environment,
      sendNullsAsQueryParam: false,
      skipGetAppConfiguration: false,
    }),
    ThemeSharedModule.forRoot(),
    AccountConfigModule.forRoot(),
    IdentityConfigModule.forRoot(),
    TenantManagementConfigModule.forRoot(),
    SettingManagementConfigModule.forRoot(),
    NgxsModule.forRoot(),
    ThemeBasicModule.forRoot(),
    ...(environment.production ? [] : LOGGERS),
  ],
  providers: [
    APP_ROUTE_PROVIDER,
    {
      provide: APP_INITIALIZER,
      useFactory: function () {
        return () => new Promise(resolve => setTimeout(resolve, 1000));
      },
      multi: true,
    }
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule { }

Then DynamicLayoutComponent didn't work fine when first time to load page:
ezgif com-optimize

2.something wrong withGetAppConfiguration Action

@Action(GetAppConfiguration)
  addData({ patchState, dispatch }: StateContext<Config.State>) {
    const apiName = 'default';
    const api = this.store.selectSnapshot(ConfigState.getApiUrl(apiName));
    return this.http
      .get<ApplicationConfiguration.Response>(`${api}/api/abp/application-configuration`)
      .pipe(
        tap(configuration =>
          patchState({
            ...configuration,
          }),
        ),
        switchMap(configuration => {
          let defaultLang: string =
            configuration.setting.values['Abp.Localization.DefaultLanguage'];

          if (defaultLang.includes(';')) {
            defaultLang = defaultLang.split(';')[0];
          }

          document.documentElement.setAttribute(
            'lang',
            configuration.localization.currentCulture.cultureName,
          );
          return this.store.selectSnapshot(SessionState.getLanguage)
            ? of(null)//=>OK:works fine
            : dispatch(new SetLanguage(defaultLang, false));//=>NG:first time load page will return this 
        }),
        catchError((err: HttpErrorResponse) => {
          dispatch(new RestOccurError(err));
          return throwError(err);
        }),
      );
  }

According to above code,
if addData(GetAppConfiguration Action) method finally return of(null) it will works perfect
but if it return dispatch(new SetLanguage(defaultLang, false)) ,will must have this error.
I think this bug is about ngxs/store,but in a angular app ,APP_INITIALIZER is a very often used,
Could you help me to check this? thank you

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions