Open Closed

Issue after upgrading to abp verions 2.8.0 (Angular) #203


User avatar
0
wazbek created

Hi

  • ABP Framework version: v2.8.0

  • UI type: Angular

  • Tiered (MVC) or Identity Server Seperated (Angular):
    Identity Server Not Separated (Angular)

  • Exception message and stack trace:

    core.js:6210 ERROR TypeError: Cannot read property 'objectExtensions' of undefined
      at ɵ1 (volo-abp.commercial.ng.ui.js:3358)
      at wrappedSelectorFn (ngxs-store.js:2865)
      at memoized (ngxs-store-internals.js:59)
      at selectFromRoot (ngxs-store.js:2901)
      at ngxs-store.js:2896
      at Array.map (<anonymous>)
      at MapSubscriber.selectFromRoot [as project] (ngxs-store.js:2892)
      at MapSubscriber._next (map.js:29)
      at MapSubscriber.next (Subscriber.js:49)
      at StateStream._subscribe (BehaviorSubject.js:14)
    

    also warnings in the browser

    Could not find localization source: TextTemplateManagement   abp-ng.core.js:1014
    
    The localization source separator (::) not found.  abp-ng.core.js:1014
    

    All the abp screens are displaying like this too:

  • Steps to reproduce the issue: We are getting some errors after updating to version 2.8. We updated our aspnetcore to 2.8 using ABP suite 2.8. We also update our ABP/Volo packages in our angular application to 2.8.0. We then ran the application and we receive the above errors on application startup.


5 Answer(s)
  • User Avatar
    0
    alper created
    Support Team Director

    @wazbek thanks for the feedback. @mehmet will check the issue.

  • User Avatar
    0
    Mehmet created

    Hi @wazbek

    Did you update the NuGet packages to v2.8.0?

    Can you share the application-configuration response and content of app.module.ts file with us?

  • User Avatar
    0
    wazbek created

    Hi Mehmet

    Yes we did, we used ABP Suite 2.8 to do the update.

    We are using an nx workspace(https://nx.dev/angular/getting-started/why-nx) so our app.module.ts file does not have all the modules imported like a normal angular app. I have follow the order of module imports in our nx workspace by looking at a newly created angular application using abp version 2.8.

    I will email the files to info@abp.io.

  • User Avatar
    0
    Mehmet created

    I reviewed your files. I think the ConfigState is not available on the application initialization. The forRoot static method of CoreModule must call from app.module.ts (bootstrap module). Please add the following code to app.module.ts  imports and try again:

    CoreModule.forRoot({
      environment,
    }),
    
  • User Avatar
    0
    wazbek created

    Hi Mehmet

    Thanks for taking a look. Your recommendation pointed me in the right direction and I managed to find what was causing the issue.

    I started by importing everything into my app module again like this:

    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        AppRoutingModule,
        ThemeSharedModule.forRoot({
          httpErrorConfig: {
            errorScreen: {
              component: HttpErrorComponent,
              forWhichErrors: [401, 403, 404, 500],
              hideCloseIcon: true,
            },
          },
        }),
        CoreModule.forRoot({
          environment,
        }),
        AccountConfigModule.forRoot({ redirectUrl: '/' }),
        IdentityConfigModule,
        LanguageManagementConfigModule,
        SaasConfigModule,
        AuditLoggingConfigModule,
        IdentityServerConfigModule,
        TextTemplateManagementConfigModule,
        SettingManagementConfigModule,
        NgxsModule.forRoot([]),
        SharedModule,
    
        ...(environment.production ? [] : LOGGERS),
    

    Which got my application working witout any errors. I then started moving them one by one to my shell module file that i sent you and I then realised the NgxsModule.forRoot([]) import. I was importing the NgxsModule like this in my core module:

    export const ngxsConfig: NgxsModuleOptions = {
      //developmentMode: !environment.production,
      selectorOptions: {
        suppressErrors: false,
        injectContainerState: false
      }
    };
    
    @NgModule({
      imports: [
        CommonModule,
        NgxsModule.forRoot([], ngxsConfig),
        NgxsFormPluginModule.forRoot(),
        NgxsReduxDevtoolsPluginModule.forRoot({ disabled: environment.production }),
        ...(environment.production ? [] : LOGGERS)
      ]
    })
    export class CoreModule {
    

    The NgxsModuleOptions that I had set will only be used in NGXS v4. I removed the ngxsConfig from my NgxsModule import and everything works as expected now. https://www.ngxs.io/advanced/options. This was working before ABP version 2.8.

    Sorry for waisting your time.

    Thanks again.

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11