"No provider for InjectionToken CORE_OPTIONS!" with ABP migration for Angular from v9.0.8 to v9.1.3 #9731

8 Answer(s)

• 

  0

  AI-Bot created 3 months ago

  Support Team ABP Agent

  The error "NullInjectorError: No provider for InjectionToken CORE_OPTIONS!" in your ABP Angular v9.1.3 migration is caused by missing or misconfigured ABP core providers. In ABP v9+, the dependency injection system for Angular was updated to use the new Angular standalone providers API, and all ABP modules must be registered using their new provide*Config or provide* functions.

  Solution

  1. Do not import ABP modules in the imports array of your components or modules.
     Instead, use the new provideAbpCore and related provider functions only in the bootstrapApplication call in your main.ts.

  2. Remove all ABP modules from the imports array in your @Component and @NgModule decorators.
     For example, in your app.component.ts, remove:

  imports: [
       CoreModule,
       ThemeSharedModule,
       GdprConfigModule,
     ]
  

  These should not be present.

  3. Ensure all ABP providers are registered in main.ts using the new provider functions.
     For example:

  bootstrapApplication(AppComponent, {
       providers: [
         provideAbpCore(withOptions({ environment, registerLocaleFn: registerLocale() })),
         provideAbpOAuth(),
         provideSettingManagementConfig(),
         provideFeatureManagementConfig(),
         provideAbpThemeShared(
           withHttpErrorConfig({
             errorScreen: {
               component: HttpErrorComponent,
               forWhichErrors: [401, 403, 404, 500],
               hideCloseIcon: true,
             },
           })
         ),
         // ...other provide*Config functions
         importProvidersFrom(
           BrowserModule,
           BrowserAnimationsModule,
           ThemeLeptonXModule.forRoot(),
           SideMenuLayoutModule.forRoot()
         ),
         provideAnimations(),
         provideHttpClient(withInterceptorsFromDi()),
         provideZoneChangeDetection({ eventCoalescing: true }),
         provideRouter(routes),
       ],
     });
  

  4. If you comment out any provide*Config function, any dependent module will fail to resolve its options.
     For example, if you use any ABP module (like Identity, Account, etc.), you must include its corresponding provide*Config function in the providers array.

  5. Do not mix the old module-based imports with the new provider-based registration.
     All ABP modules must be registered via providers only.

  Example Correction

  • Remove all ABP modules from imports in app.component.ts and any other module/component.
  • Register all needed ABP providers in main.ts only.

  Reference Example

  See the official ABP v9 Angular startup template for a working example:

  • ABP Angular Startup Template (v9+)

  ---

  By following these steps, the "No provider for InjectionToken CORE_OPTIONS!" error will be resolved, and your ABP Angular app will work as expected after migration.

  This approach aligns with common ABP conventions, but specific official documentation for this exact scenario is not available.

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel
• 

  0

  triet.nguyen created 3 months ago

  The generated answer by AI does not help. I need a person to support this one. Additionally, we're using ABP commercial packages.

  Save Cancel
• 

  0

  maliming created 3 months ago

  Support Team Fullstack Developer

  hi

  Our angular team will help you asap

  Thanks.

  Save Cancel
• 

  0

  sumeyye.kurtulus created 2 months ago

  Support Team Angular Expert

  Hello,

  I see that you are configuring your app to run as a standalone application. ABP will offer full support for this structure starting with the upcoming version 9.3, which will be released soon. You can follow the release updates here: https://github.com/abpframework/abp/releases.

  If you are hesitant to upgrade to version 9.3 right away, you may consider using version 9.2, which provides more stability in this regard.

  Feel free to reach out if you need any further assistance. Thank you for your cooperation.

  Save Cancel
• 

  0

  triet.nguyen created 2 months ago

  Hello,

  Thank you, the version 9.2 fixed my problem, another issue comes in, why do I get the layout without side menu on our modules (e.g Home page).

  

  If I route to http://localhost:4200/saas on the URL browser, then I will get the side menu.

  

  Here is the registered providers & my home.component

  Entry main

  bootstrapApplication(AppComponent, {
    providers: [
      APP_ROUTE_PROVIDER,
      CUSTOM_MENU_ITEM,
      provideAnimations(),
      provideZoneChangeDetection({ eventCoalescing: true }),
      provideAbpCore(withOptions({ environment, registerLocaleFn: registerLocale() })),
      provideAbpOAuth(),
      provideAbpThemeShared(),
      provideAccountAdminConfig(),
      provideAccountPublicConfig(),
      provideIdentityConfig(),
      provideTenantManagementConfig(),
      provideSaasConfig(),
      provideSettingManagementConfig(),
      provideOpeniddictproConfig(),
      provideLanguageManagementConfig(),
      provideChatConfig(),
      provideGdprConfig(
        withCookieConsentOptions({
          privacyPolicyUrl: 'gdpr-cookie-consent/privacy',
          cookiePolicyUrl: 'gdpr-cookie-consent/cookie',
        })
      ),
      provideFileManagementConfig(),
      provideAuditLoggingConfig(),
      provideTextTemplateManagementConfig(),
      provideCommercialUiConfig(),
      provideFeatureManagementConfig(),
      provideRouter(routes),
      importProvidersFrom(
        ThemeLeptonXModule.forRoot(),
        SideMenuLayoutModule.forRoot(),
        ProductServiceConfigModule.forRoot()
      ),
    ],
  });
  
  

  AppRoutes

  // app.routes.ts
  export const routes: Routes = [
    {
      path: 'home',
      pathMatch: 'full',
      loadChildren: () => import('./home/home.module').then(m => m.HomeModule),
      canActivate: [authGuard, permissionGuard],
    },
    ...
  ];
  

  Home Module

  // home.module.ts
  @NgModule({
      imports: [SharedModule, HomeRoutingModule, PageModule, HomeComponent],
  })
  export class HomeModule {}
  
  
  // home-routing.module.ts
  const routes: Routes = [{ path: '', component: HomeComponent, pathMatch: 'full', }];
  
  @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule],
  })
  export class HomeRoutingModule {}
  
  
  // home.component.ts
  @Component({
    selector: 'app-home',
    templateUrl: './home.component.html',
    styleUrls: ['./home.component.scss'],
    imports: [AnalysisModelComponent],
  })
  export class HomeComponent {
    get hasLoggedIn(): boolean {
      return this.oAuthService.hasValidAccessToken();
    }
  
    constructor(private oAuthService: OAuthService, private authService: AuthService) {}
  
    login() {
      this.authService.navigateToLogin();
    }
  }
  
  // home.component.html
  <h2>Home</h2>
  <div class="card">
      <div class="card-body">
        <h2>My Work</h2>
        <app-my-model [isShowOnHomePage]="true"></app-my-model>
      </div>
  </div>```
  
  

  Save Cancel
• 

  0

  sumeyye.kurtulus created 2 months ago

  Support Team Angular Expert

  Hello again, Thank you for your response. I am glad to hear that the version 9.2 is worked on your side.

  Thank you, the version 9.2 fixed my problem, another issue comes in, why do I get the layout without side menu on our modules (e.g Home page).

  I have also tried to add a component by following the details you have provided. Here is how it looks on the home route for example:

  

  Could you tell me whether you see any error log on the console?

  Save Cancel
• 

  0

  triet.nguyen created 2 months ago

  Hi,

  No I don't get any errors.

  I can see the difference that ABP core modules use ApplicationLayout, but my component uses EmptyLayout.

  Could you tell me what config to set the layout. As I know, we don't migrate or touch any configuration related to the layout.

  Home page

  Saas page

  UPDATE

  That's my fault, I migrated to use provideAppInitializer for APP_ROUTE_PROVIDER provider, but did not fully migrate yet.

  

  Here is the right one

  export const APP_ROUTE_PROVIDER = [
    provideAppInitializer(() => {
      configureRoutes();
    }),
  ];
  
  function configureRoutes() {
    const routes = inject(RoutesService);
    routes.add([
      ...
    ]);
  }
  

  Save Cancel
• 

  0

  sumeyye.kurtulus created 2 months ago

  Support Team Angular Expert

  Hello again,

  Thank you for the update. I am happy to hear if this has solved your problem. Is there anything I could assist you further on this matter?

  Save Cancel