Open Closed

ABP Upgrade to 9, Angular App component: stand alone #9165

User avatar
0
DominaTang created

If it possible make Angular project to be stand-alone: true after upgrade to Angular 19.

if yes, what these two components come from which ABP module: <abp-loader-bar></abp-loader-bar> <abp-dynamic-layout></abp-dynamic-layout>

Go to accepted answer
9 Answer(s)
  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Yes, you can safely migrate your Angular project to use the standalone structure in Angular 19.

    The components <abp-loader-bar> and <abp-dynamic-layout> are not standalone; they are declared and exported by the ThemeSharedModule. Therefore, you shouldn’t encounter issues related to them during the migration.

    Let us know if you need any further help.

  • User Avatar
    0
    DominaTang created

    <abp-dynamic-layout></abp-dynamic-layout> is in core module

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    You are right. However, these components should not break the functionality even if you migrate your application to a standalone structure. You can also refer to this project sample: https://drive.google.com/file/d/1mZN3B14JMsPf-WH_nQIpRVFgnxOvA46B/view?usp=drive_link

    Let us know if it meets your requirement.

  • User Avatar
    0
    DominaTang created

    I use command ng generate @angular/core:standalone to migration the application to stand-alone mode.

    The bootstrap generated by above command are as below:

    bootstrapApplication(AppComponent, {
    providers: [
        importProvidersFrom(BrowserModule, AppRoutingModule, SharedModule, ErrorsModule, RootStoreModule, AppInsightsModule, 
        // ABP related
        CoreModule.forRoot({
            environment,
            registerLocaleFn: registerLocale(),
        }), AbpOAuthModule.forRoot(), AccountAdminConfigModule.forRoot(), AccountPublicConfigModule.forRoot(), IdentityConfigModule.forRoot(), LanguageManagementConfigModule.forRoot(), SaasConfigModule.forRoot(), AuditLoggingConfigModule.forRoot(), OpeniddictproConfigModule.forRoot(), TextTemplateManagementConfigModule.forRoot(), SettingManagementConfigModule.forRoot(), AbpModule),
        // MANAGE_PROFILE_TAB_PROVIDER,
        APP_ROUTE_PROVIDER,
        { provide: APP_INITIALIZER, useFactory: init_AppConfigService, deps: [Injector, AppConfigService], multi: true },
        { provide: ErrorHandler, useClass: GlobalErrorHandler },
        AuditInterceptorProvider,
        provideAnimations(),
        provideHttpClient(withInterceptorsFromDi())
    ]
})
    .catch(err => console.error(err));
})();

    When run the application, there is DI circulation error. So I change code to this:

      bootstrapApplication(AppComponent, {
    providers: [
        
   importProvidersFrom(AppRoutingModule, ThemeLeptonXModule.forRoot()),
   /* provideAbpCore(
			withOptions({
				environment,
				registerLocaleFn: registerLocale(),
			}),
		),
    */    
        provideRouter(appRoutes),
        
        { provide: ErrorHandler, useClass: GlobalErrorHandler },
        AuditInterceptorProvider,
        provideAnimations(),
         
        provideHttpClient(withInterceptorsFromDi())
    ]
})
    .catch(err => console.error(err));
})();

    I got this exception, I believe LPX_MENU_ITMES is in LPXCoreModule which already imported as provider?

    ERROR: NullInjectorError: NullInjectorError: No provider for InjectionToken CORE_OPTIONS! at NullInjector.get (core.mjs:1676:27) at R3Injector.get (core.mjs:2199:33) at R3Injector.get (core.mjs:2199:33) at injectInjectorOnly (core.mjs:1116:40) at Module.ɵɵinject (core.mjs:1122:60) at Object.RestService_Factory [as factory] (abp-ng.core.mjs:56:103) at core.mjs:2322:47 at runInInjectorProfilerContext (core.mjs:880:9) at R3Injector.hydrate (core.mjs:2321:21) at R3Injector.get (core.mjs:2189:33)

    If uncomment the lines:

    provideAbpCore(
			withOptions({
				environment,
				registerLocaleFn: registerLocale(),
			}),
		),

    The exception is: main.ts:82 RuntimeError: NG0200: Circular dependency in DI detected for ChangeDetectionScheduler. Find more at https://angular.dev/errors/NG0200 at throwCyclicDependencyError (core.mjs:970:11) at R3Injector.hydrate (core.mjs:2316:17) at R3Injector.get (core.mjs:2189:33) at effect (core.mjs:40806:31) at new AbpTitleStrategy (abp-ng.core.mjs:2136:15) at Object.AbpTitleStrategy_Factory [as factory] (abp-ng.core.mjs:2158:23)

  • User Avatar
    0
    DominaTang created

    Move CORE_OPTIONS out side provideAbpCore(), that DI exception is gone. I add more providers for other error, there is final version

    bootstrapApplication(AppComponent, {
    providers: [
        provideAppInitializer(appInitializerFactory()),
        provideAbpCore(),
        { provide: TitleStrategy, useClass: DefaultTitleStrategy },
        importProvidersFrom(AppRoutingModule,  ThemeLeptonXModule.forRoot(), ThemeSharedModule),
    
        
    {
      provide: CORE_OPTIONS,
      useValue: {
        environment,
        registerLocaleFn: registerLocale(),
      },
    },
{
  provide: OTHERS_GROUP,
  useValue: 'Others', // <-- this string will be used as the group ID
},
{
  provide: LPX_LAYOUT_STYLE_FINAL,
  useValue: () => {}, // <-- safe default
},

{
      provide: TENANT_KEY,
      useValue: 'Abp.TenantId',
    },
    importProvidersFrom(AccountPublicConfigModule.forRoot(), AccountAdminConfigModule.forRoot(),  IdentityConfigModule.forRoot(), SaasConfigModule.forRoot()),
     
    provideSettingManagementConfig(),
    provideTextTemplateManagementConfig(),
    provideOpeniddictproConfig(),
    provideAuditLoggingConfig(),
    provideLanguageManagementConfig(),
    provideAbpOAuth(),
    
        provideRouter(appRoutes),
        
        { provide: ErrorHandler, useClass: GlobalErrorHandler },
        AuditInterceptorProvider,
        provideAnimations(),
         
        provideHttpClient(withInterceptorsFromDi())
    ]
})
    .catch(err => console.error(err));

    Now the error is: ERROR: TypeError: layoutStyles is not iterable at Object.styleLoadFactory [as useFactory] (volo-ngx-lepton-x.core.mjs:1486:30) at Object.factory (core.mjs:2425:38) at core.mjs:2322:47 at runInInjectorProfilerContext (core.mjs:880:9) at R3Injector.hydrate (core.mjs:2321:21) at R3Injector.get (core.mjs:2189:33) at injectInjectorOnly (core.mjs:1116:40) at ɵɵinject (core.mjs:1122:60) at injectArgs (core.mjs:1253:23) at Object.factory (core.mjs:2425:52)

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Hi again! Thanks for providing the additional details.

    From the error trace, it looks like there’s a configuration issue causing the layoutStyles is not iterable error. To resolve this, please try the following steps:

    1. Update your provider configuration: Ensure you're passing the correct layout module to importProvidersFrom by adding either SideMenuLayoutModule.forRoot() or TopMenuLayoutModule.forRoot(), depending on the layout you’re using.
    importProvidersFrom(
  SideMenuLayoutModule.forRoot()
  // or
  TopMenuLayoutModule.forRoot()
);
    1. Register the theme provider: Add provideAbpThemeShared() to your providers array to properly initialize the shared theme configuration.
    providers: [
  provideAbpThemeShared(),
]
    1. Safely register the core module:
    provideAbpCore(
  withOptions({
   environment,
   registerLocaleFn: registerLocale(),
  })
),
  • User Avatar
    0
    DominaTang created

    Now I got this exception: main.ts:176 RuntimeError: NG0200: Circular dependency in DI detected for ChangeDetectionScheduler. Find more at https://angular.dev/errors/NG0200 at throwCyclicDependencyError (core.mjs:970:11) at R3Injector.hydrate (core.mjs:2316:17) at R3Injector.get (core.mjs:2189:33) at effect (core.mjs:40806:31) at new AbpTitleStrategy (abp-ng.core.mjs:2136:15) at Object.AbpTitleStrategy_Factory [as factory] (abp-ng.core.mjs:2158:23) at core.mjs:2322:47 at runInInjectorProfilerContext (core.mjs:880:9) at R3Injector.hydrate (core.mjs:2321:21) at R3Injector.get (core.mjs:2189:33)

    Does the provider sequence matter?

  • User Avatar
    0
    sumeyye.kurtulus created
    Support Team Angular Expert

    Yes, the order of your providers may lead to circular dependency issues like the one you're encountering.

    To help you better, could you please share how you've configured your providers and any related modules? That way, I can take a closer look and suggest a more targeted fix.

    Also, have you had a chance to check the sample project here? It might offer some insights or a working reference:https://drive.google.com/file/d/1mZN3B14JMsPf-WH_nQIpRVFgnxOvA46B/view?usp=drive_link

  • User Avatar
    0
    DominaTang created

    Thank you so much. I copy the providers section in sample project. Now the DI issue is gone.

    1
Assignee
User avatar sumeyye.kurtulus
Question details
Labels
None yet
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
Do you need assistance from an ABP expert?
Schedule a Meeting
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v9.3.0-preview. Updated on May 12, 2025, 05:22