I figured out the reason, I replace the existing code:
export const APP_ROUTE_PROVIDER = [ { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService, AppConfigService], multi: true, }, ];
With: export const APP_ROUTE_PROVIDER = [ provideAppInitializer(() => { configureRoutes(); }), ];
After revert back, there is only one Administration menu, however, when I click Roles or Users menu item, it complains: src_app_identity_identity-routes_ts.js:1 ERROR RuntimeError: NG04014: Invalid configuration of route 'identity/'. The component must be standalone. Notes: The app is converted to standalone mode, and we write our own identity components to replace ABP's identity component.
Micro Service Template
In APP_ROUTE_PROVIDER, there is code routes.remove([eThemeSharedRouteNames.Administration]);
And then there is code
{
path: '/identity/roles',
name: '::Roles',
parentName: '::Administration',
layout: eLayoutType.application,
requiredPolicy: Permissions.ABPIDENTITY_ROLES,
} as ABP.Route,
{
path: '/identity/users',
name: '::Users',
parentName: '::Administration',
layout: eLayoutType.application,
requiredPolicy: Permissions.ABPIDENTITY_USERS,
} as ABP.Route,
Which means the app would only keeps two menu items under administration menu, however, after upgrade there are two administration side menu;
And when click Roles or Users menu, there is error: core.mjs:6843 ERROR RuntimeError: NG04014: Invalid configuration of route 'identity/'. The component must be standalone. In source code there is identity routes which replace Roles component:
export const Identity_ROUTES: Routes = [
{ path: '', redirectTo: 'roles', pathMatch: 'full' },
{
path: '',
component: RouterOutletComponent,
canActivate: [authGuard, permissionGuard, IdentityExtensionsGuard],
children: [
{
path: 'roles',
component: ReplaceableRouteContainerComponent,
data: {
requiredPolicy: 'AbpIdentity.Roles',
replaceableComponent: {
key: eIdentityComponents.Roles,
defaultComponent: RolesComponent,
} as ReplaceableComponents.RouteData<RolesComponent>,
},
},
....
Thank you so much. I copy the providers section in sample project. Now the DI issue is gone.
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?
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)
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)
Hi,
Can you share your
Node.js,Yarnandnpmversions?# get node version node -v # get yarn version yarn -v # get npm version npm -vCheck if your node & yarn version matches with Pre-requirements documentation: https://abp.io/docs/latest/get-started/pre-requirements#node-js-and-yarn
ABP uses classic yarn, which is
Yarn v1.22+. Make sure this is correct.
Node.js V22.14.0 Yarn 1.22.22 npm 10.9.2
Hi,
I got this build error warning "@volo/abp.ng.account > angularx-qrcode@17.0.1" has incorrect peer dependency "@angular/core@^17.0.0". warning "@volosoft/abp.ng.theme.lepton-x > @ng-bootstrap/ng-bootstrap@17.0.1" has incorrect peer dependency "@angular/common@^18.0.0". warning "@volosoft/abp.ng.theme.lepton-x > @ng-bootstrap/ng-bootstrap@17.0.1" has incorrect peer dependency "@angular/core@^18.0.0". warning "@volosoft/abp.ng.theme.lepton-x > @ng-bootstrap/ng-bootstrap@17.0.1" has incorrect peer dependency "@angular/forms@^18.0.0". warning "@volosoft/abp.ng.theme.lepton-x > @ng-bootstrap/ng-bootstrap@17.0.1" has incorrect peer dependency "@angular/localize@^18.0.0". warning "@volosoft/abp.ng.theme.lepton-x > @ng-bootstrap/ng-bootstrap@17.0.1" has unmet peer dependency "@popperjs/core@^2.11.8".
In my package.json: @volosoft/abp.ng.theme.lepton-x": "4.1.1", "@angular/core": "~19.1.0" ...
Can I above warnings?
Thanks,
<abp-dynamic-layout></abp-dynamic-layout> is in core module
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>
