Child routes and Modules

Question

I am working on a semi-big project and I wanted to split it in modules. The problem is that i can't access the routes of admin.module.ts. So in the app.module I have imported the admin Module

imports: [
  BrowserModule,
  CommonModule,
  AppRoutingModule,
  FormsModule,
  ReactiveFormsModule,
  HttpModule,
  NgSelectModule,
  AdminModule,
  SharedModule
],

my routing module does not have the admin route in my admin.module.ts. The ngModule in admin.module looks like this

@NgModule({
  declarations: [
      AdminComponent,
      AdminLandingComponent
  ], imports: [
      CommonModule,
      AdminRoutingModule
  ]
})

and the routes in the admin-routing.module.ts look like this

{ path: 'admin', component: AdminComponent, children: [
  { path: '', component: AdminLandingComponent }
]}

I use forChild() so that is not the problem When i try to access localhost:4200/admin i get redirected to page not-found. Why does it happen? How to fix it?

full files

parent module - app module
main routes - app-routing module
submodule - admin module
child routes - admin-routing module

Everything looks good. I assume you are exporting the routes in your admin-routing.module.ts using something like export const AdminRoutingModule = RouterModule.forChild(routes);? — Sonu Kapoor
try loadChildren in app-routing.module.ts { path: 'admin', loadChildren: () => AdminModule }, (don't forget to import it in this file) — Maksym Shevchenko
One other thing you can try is to add your AdminRoutingModule to the exports key of the AdminModule e.g. @NgModule({ declarations: [ AdminComponent, AdminLandingComponent ], imports: [ CommonModule, AdminRoutingModule ], exports: [ AdminRoutingModule ] }) — Matt McNabb

Traqn Raykovski Traqn Raykovski · Accepted Answer · 2018-02-27T15:17:35

@MaksymShevchenko Thank you.
Adding the path :
{path: 'admin', loadChildren: '../admin/admin.module#AdminModule'}
in app-routing.module.ts and changing the path in the admin-routing.modules.ts to :
{path: '', component: AdminComponent, children: [ {path: '', component:AdminLandingComponent} ]}
did the trick.

Another way to fix the problem

Because I added the module in the imports array, anular adds the routes after the wildcard route. The other fix is to export the wildcard route to another module and add it after all other modules in the root module. That way we don't have to play with lazy loading.

Child routes and Modules

full files

1 Answers

Another way to fix the problem