Open Closed

Abp Login Page issue while using NgxsRouterPluginModule #3474


0
imranStem created

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
    fatih.kilic created
    Support Team

    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,
    },