I have microservice architecture and I have integrated the NgxsRouterPluginModule in Angular project and injected into app.module.ts. To reproduce the issue, you can follow below changes.
Install the NgxsRouterPluginModule
"@ngxs/router-plugin": "^3.7.4",
Change the environment configuration to use the account module login UI.
const oAuthConfig = { issuer: 'https://localhost:44322', clientId: 'App_Angular', scope: 'offline_access openid profile email phone', requireHttps: true, };
Inject the NgxsRouterPluginModule in app.module.ts
..... NgxsRouterPluginModule.forRoot(), NgxsLoggerPluginModule.forRoot(), NgxsReduxDevtoolsPluginModule.forRoot(), ],
With the above configuration, the login page won't work and you will get the below error in the console.
vendor.js:69956 ERROR TypeError: Cannot read properties of undefined (reading 'isEnabled') at get isEnabled [as isEnabled] (node_modules_volo_abp_ng_account_fesm2015_volo-abp_ng_account-public_mjs.js:5560:30) at vendor.js:9296:14 at Array.forEach (<anonymous>) at deepFreeze (vendor.js:9289:35) at vendor.js:9299:13 at Array.forEach (<anonymous>) at deepFreeze (vendor.js:9289:35) at vendor.js:9299:13 at Array.forEach (<anonymous>) at deepFreeze (vendor.js:9289:35)
Login screen looks like this.
- ABP Framework version: v5.2.1
- UI type: Angular
- DB provider: EF Core
- Tiered (MVC) or Identity Server Separated (Angular): yes
- Exception message and stack trace:
vendor.js:69956 ERROR TypeError: Cannot read properties of undefined (reading 'isEnabled') at get isEnabled [as isEnabled] (node_modules_volo_abp_ng_account_fesm2015_volo-abp_ng_account-public_mjs.js:5560:30) at vendor.js:9296:14 at Array.forEach (<anonymous>) at deepFreeze (vendor.js:9289:35) at vendor.js:9299:13 at Array.forEach (<anonymous>) at deepFreeze (vendor.js:9289:35) at vendor.js:9299:13 at Array.forEach (<anonymous>) at deepFreeze (vendor.js:9289:35) - Steps to reproduce the issue:"
1 Answer(s)
-
0
The problem will be solved if you add the following code to app.module.ts and add the object to your providers array.
export interface RouterStateParams { url: string; params: Params; queryParams: Params; } export class CustomRouterStateSerializer implements RouterStateSerializer { serialize(routerState: RouterStateSnapshot): SerializedRouterStateSnapshot { return { root: this.serializeRoute(routerState.root), url: routerState.url, }; } private serializeRoute(route: ActivatedRouteSnapshot): ActivatedRouteSnapshot { const children = route.children.map(c => this.serializeRoute(c)); return { url: route.url, params: route.params, queryParams: route.queryParams, fragment: route.fragment, data: {}, outlet: route.outlet, component: null, routeConfig: null, root: null as any, parent: null, firstChild: children[0], children: children, pathFromRoot: null as any, paramMap: route.paramMap, queryParamMap: route.queryParamMap, toString: route.toString, }; } }- Add this to the providers array.
{ provide: RouterStateSerializer, useClass: CustomRouterStateSerializer, },
