Open Closed

Cannot navigate to component inside added module #1729


0
dkaczor created
  • ABP Framework version: v4.4.0
  • UI type: Angular
  • DB provider: EF Core

I created an EF Core + Angular application. Then, I added custom module using command abp add-module MyOwnModule --new --add-to-solution-file. It created backend projects in aspnet-core/modules folder and angular project in angular/projects folder. I followed this article and added lazy loading of this new module in my main app-routing.module.ts:

    {
        path: 'my-own-module',
        loadChildren: () =>
            import('MyOwnModule/projects/my-own-module').then(m => m.MyOwnModuleModule.forLazy()),
    },

Then, Imported the ConfigModule in my app.module.ts

    MyOwnModuleConfigModule.forRoot(),

At last, I added route in my route.provider.ts

      {
        path: '/my-own-module',
        name: 'My Own Module'
      }

Now the problem is that when I navigate to /my-new-module path, no component is loaded, the menu and header stay but there is no content. I also can't see any error in console. Did I miss any part of configuration or is there a bug in generated code?


6 Answer(s)
  • 0
    bunyamin created

    Hello,

    I've just followed the same instructions and it worked just fine. I didn't have to add anything to route.provider.ts because MyOwnModule already provides itself within its own route.provider.ts located at angular/projects/MyOwnModule/projects/my-own-module/config/src/providers/route.provider.ts.

    In your question you said that you navigate to /my-new-module. Is this a typo in the question? If not, you need to change it to /my-own-module

  • 0
    dkaczor created

    In your question you said that you navigate to /my-new-module. Is this a typo in the question? If not, you need to change it to /my-own-module

    Yes, it's just a typo in question

    I didn't have to add anything to route.provider.ts because MyOwnModule already provides itself within its own route.provider.ts located at angular/projects/MyOwnModule/projects/my-own-module/config/src/providers/route.provider.ts.

    If I don't add the path to route.provider.ts in my app I cannot see the entry in main menu. I've put a breakpoint and I noticed that the function returned by configureRoutes in MyOwnModule's route.provider.ts is never called. I added source code of Account module and it's configureRoutes is called. I followed every import and I cannot find any differences between those two modules. Could you send me a working example project or explain how route providers work?

  • 0
    bunyamin created

    Let's take a look at MyOwnModuleConfigModule

    import { MY_OWN_MODULE_ROUTE_PROVIDERS } from './providers/route.provider';
    
    @NgModule()
    export class MyOwnModuleConfigModule {
      static forRoot(): ModuleWithProviders<MyOwnModuleConfigModule> {
        return {
          ngModule: MyOwnModuleConfigModule,
          providers: [MY_OWN_MODULE_ROUTE_PROVIDERS],
        };
      }
    }
    

    and MY_OWN_MODULE_ROUTE_PROVIDERS

    export const MY_OWN_MODULE_ROUTE_PROVIDERS = [
      {
        provide: APP_INITIALIZER,
        useFactory: configureRoutes,
        deps: [RoutesService],
        multi: true,
      },
    ];
    
    export function configureRoutes(routesService: RoutesService) {
      return () => {
        routesService.add([
          {
            path: '/my-own-module',
            name: eMyOwnModuleRouteNames.MyOwnModule,
            iconClass: 'fas fa-book',
            layout: eLayoutType.application,
            order: 3,
          },
        ]);
      };
    }
    

    Since we provide our config as APP_INITIALIZER and import MyOwnModuleConfigModule.forRoot() in app.module.ts, it runs at the startup of the application. It's not related to the ABP at all. It is just the way angular works. Could you check if your module looks like this?

  • 0
    ServiceBot created
    Support Team

    This question has been automatically marked as stale because it has not had recent activity.

  • 0
    toptis created

    I have the exact same problem after creating a module with ABP suite and adding module config to the main project module and adding the route module dos not show in the main project

  • 0
    toptis created

    1- menu does not show any "START" 2-http://localhost:4200/start Dos not work and I have below error in the console

    core.mjs:6494 ERROR Error: Uncaught (in promise): Error: NG0203: inject() must be called from an injection context Error: NG0203: inject() must be called from an injection context at injectInjectorOnly (core:4768:1) at Module.ɵɵinject (core:4778:1) at Object.RouterModule_Factory [as factory] (router.mjs:5861:1) at R3Injector.hydrate (core.mjs:11494:1) at R3Injector.get (core.mjs:11313:1) at core.mjs:11351:1 at Set.forEach (<anonymous>) at R3Injector._resolveInjectorDefTypes (core.mjs:11351:1) at new NgModuleRef (core.mjs:21881:1) at NgModuleFactory.create (core.mjs:21935:1) at resolvePromise (zone.js:1211:1) at resolvePromise (zone.js:1165:1) at zone.js:1278:1 at _ZoneDelegate.invokeTask (zone.js:406:1) at Object.onInvokeTask (core.mjs:25595:1) at _ZoneDelegate.invokeTask (zone.js:405:1) at Zone.runTask (zone.js:178:1) at drainMicroTaskQueue (zone.js:585:1)