Activities of "DominaTang"

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, Yarn and npm versions?

# get node version 
node -v 
 
# get yarn version 
yarn -v 
 
# get npm version 
npm -v 

Check 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>

What about new tables created in Administration and Identity MicroService:

public class IdentityServiceDbContext :
AbpDbContext,
IIdentityProDbContext,
IOpenIddictDbContext,
IHasEventInbox,
IHasEventOutbox


public DbSet IncomingEvents { get; set; }
public DbSet OutgoingEvents { get; set; }