Angular Side Login Issue #10618

3 Answer(s)

• 

  0

  AI-Bot created 5 months ago

  Support Team ABP Agent

  • This error means ABP Angular Core options are not registered in the injector, so RestService can’t be created: RestService -> InjectionToken CORE_OPTIONS.

  • In ABP Angular, CORE_OPTIONS is provided by ABP Core initialization (and for Basic theme layouts also by the theme config providers). When you navigate to the Angular-side login (AccountLayoutComponent from the theme), your app must already have these providers registered in the root application config/module.

  1) Ensure ABP Core is initialized (registers CORE_OPTIONS)

  In your Angular root bootstrap (Standalone style: app.config.ts, Module style: AppModule), make sure ABP Core is configured with the environment.

  Standalone (ABP v10 / Angular 21 typical): src/app/app.config.ts

  import { ApplicationConfig } from '@angular/core';
  import { provideAbpCore } from '@abp/ng.core';
  import { environment } from '../environments/environment';
  
  export const appConfig: ApplicationConfig = {
    providers: [
      provideAbpCore({
        environment,
      }),
    ],
  };
  

  Module-based (if your app still uses NgModules): app.module.ts

  import { CoreModule } from '@abp/ng.core';
  import { environment } from '../environments/environment';
  
  @NgModule({
    imports: [
      CoreModule.forRoot({
        environment,
      }),
    ],
  })
  export class AppModule {}
  

  2) If you are using Basic Theme layouts for account/login, register Basic theme config

  Since you said you use Basic Theme source code and want “Angular side login”, you must also provide the Basic theme configuration (this registers the layouts like AccountLayoutComponent correctly).

  src/app/app.config.ts:

  import { provideThemeBasicConfig } from '@abp/ng.theme.basic';
  
  export const appConfig: ApplicationConfig = {
    providers: [
      // ...provideAbpCore(...)
      provideThemeBasicConfig(),
    ],
  };
  

  3) If the error started after upgrading / Studio workspace changes: fix TS path mappings

  A known cause is tsconfig.json / workspace paths overriding ABP package resolution so the app ends up loading mismatched ABP packages and misses the provider.

  Add these mappings to the tsconfig.json used by your Angular app (not a library tsconfig):

  {
    "compilerOptions": {
      "paths": {
        "@abp/*": ["node_modules/@abp/*"],
        "@volo/*": ["node_modules/@volo/*"]
      }
    }
  }
  

  Then clean reinstall:

  rm -rf node_modules package-lock.json yarn.lock
  yarn   # or npm install
  yarn start
  

  ---

  Sources (validated):

  • https://abp.io/docs/10.2/framework/ui/angular/basic-theme
  • https://abp.io/support/questions/10506

  ---

  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.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  devchase321 created 5 months ago

  here is my app.config.ts

  import { provideAbpCore, ReplaceableComponentsService, withOptions } from '@abp/ng.core'; import { provideAbpOAuth } from '@abp/ng.oauth'; import { provideSettingManagementConfig } from '@abp/ng.setting-management/config'; import { provideFeatureManagementConfig } from '@abp/ng.feature-management'; import { provideAbpThemeShared, withValidationBluePrint } from '@abp/ng.theme.shared'; import { provideIdentityConfig } from '@volo/abp.ng.identity/config'; import { provideCommercialUiConfig } from '@volo/abp.commercial.ng.ui/config'; import { provideAccountAdminConfig } from '@volo/abp.ng.account/admin/config'; import { provideAccountPublicConfig } from '@volo/abp.ng.account/public/config'; import { provideGdprConfig, withCookieConsentOptions } from '@volo/abp.ng.gdpr/config'; import { provideAuditLoggingConfig } from '@volo/abp.ng.audit-logging/config'; import { provideLanguageManagementConfig } from '@volo/abp.ng.language-management/config'; import { registerLocale } from '@volo/abp.ng.language-management/locale'; import { provideFileManagementConfig } from '@volo/abp.ng.file-management/config'; import { provideChatConfig } from '@volo/abp.ng.chat/config'; import { provideSaasConfig } from '@volo/abp.ng.saas/config'; import { provideTextTemplateManagementConfig } from '@volo/abp.ng.text-template-management/config'; import { provideOpeniddictproConfig } from '@volo/abp.ng.openiddictpro/config'; import { provideThemeBasicConfig } from '@abp/ng.theme.basic'; import { provideLogo, withEnvironmentOptions } from "@abp/ng.theme.shared"; import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core'; import { provideAnimations } from '@angular/platform-browser/animations'; import { provideRouter } from '@angular/router'; import { provideHttpClient, withInterceptors } from '@angular/common/http'; import { CustomChatComponent } from './chat/custom-chat.component'; import { environment } from '../environments/environment'; import { APP_ROUTES } from './app.routes'; import { APP_ROUTE_PROVIDER } from './route.provider'; import { FOOTER_PROVIDER } from './footer/footer.config'; import { provideAIManagementConfig } from '@volo/abp.ng.ai-management/config';

  export const appConfig: ApplicationConfig = { providers: [ provideRouter(APP_ROUTES), APP_ROUTE_PROVIDER, FOOTER_PROVIDER, provideAppInitializer(() => { inject(ReplaceableComponentsService).add({ component: CustomChatComponent, key: 'Chat.ChatComponent', }); }), provideAnimations(), provideHttpClient( withInterceptors([]) ), provideAbpOAuth(), provideAccountPublicConfig(), provideAbpCore( withOptions({ environment, registerLocaleFn: registerLocale(),

    }),
    
  ),
  
  
  provideCommercialUiConfig(),
  provideThemeBasicConfig(),
  provideAbpThemeShared(
    withValidationBluePrint({
      wrongPassword: 'Please choose 1q2w3E*',
    }),
  ),
  provideLogo(withEnvironmentOptions(environment)),
  provideGdprConfig(
    withCookieConsentOptions({
      cookiePolicyUrl: '/gdpr-cookie-consent/cookie',
      privacyPolicyUrl: '/gdpr-cookie-consent/privacy',
    }),
  ),
  provideChatConfig(),
  

  ] };

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel
• 

  0

  fahrigedik created 5 months ago

  Support Team Angular Expert

  Hi,

  I ran into the exact same NG0201: No provider found for InjectionToken CORE_OPTIONS error with the AccountLayoutComponent path on ABP Studio 2.2.6 + LeptonX + Angular side login.

  This is a known issue discussed on ABP Support questions #10505 and #10506, answered by sumeyye.kurtulus (ABP Angular Expert). The root cause is duplicated ABP packages being resolved because of (a) version mismatches between @volo/abp.ng.account, @volo/abp.commercial.ng.ui, @ng-bootstrap/ng-bootstrap, and (b) legacy paths mappings in tsconfig.json.

  The fix that worked:

  1. Add these resolutions to package.json:

     "resolutions": {
       "@ng-bootstrap/ng-bootstrap": "~21.0.0",
       "@volo/abp.commercial.ng.ui": "~10.2.0",
       "@volo/abp.ng.account": "~10.2.0"
     }
  

  2. In tsconfig.json, remove/comment out the following paths — ABP 10 no longer supports them:

     "paths": {
       // "@abp/*": ["node_modules/@abp/*"],
       // "@volo/*": ["node_modules/@volo/*"]
     }
  

  3. Make sure LeptonX packages are aligned to ~5.2.0:

     "@abp/ng.theme.lepton-x": "~5.2.0",
     "@volosoft/abp.ng.theme.lepton-x": "~5.2.0"
  

  4. Delete node_modules, yarn.lock / package-lock.json and reinstall:

     rm -rf node_modules package-lock.json yarn.lock
     yarn install
     yarn start
  

  If you are using npm instead of yarn, use overrides instead of resolutions in package.json.

  References:

  • https://abp.io/support/questions/10506
  • https://abp.io/support/questions/10505

  Hope this helps!

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel