CODEWITHSUNDEEP
angularangular-router
debayan chakravarty
debayan chakravarty

Reputation: 115

Angular4/5 multiple router modules as child and one parent router module

How i can have multiple router module like i have core and main as to module in angular and they will have different separate routing module and i want to import those two routing module in our app.routing.ts/app.module.ts as a parent routing module. Is there is any solution to it ?

Upvotes: 1

Views: 2194

Answers (2)

rehan tariq
rehan tariq

Reputation: 1

  {
    path:'parent-path',
    children: [
      {
        path:'first-child-path',
        loadChildren: () => import('../app/modules/your-first-child.routing').then(m => m.FirstChildRoutingModule),
        canActivate: [YourGuard]
      },
      {
        path:'second-child-path',
        loadChildren: () => import('../app/modules/second-child.module').then(m => m.SecondChildOrderModule),
        canActivate: [SecondGuard]
      },
    ]
  },

Upvotes: 0

Stavm
Stavm

Reputation: 8121

Assuming you read the documentation. you can spread your application features to modules. each module should have its own routes with it.

so say we're talking about eagerly loaded modules, app.module.ts will import the base routing module (the parent, core routes), and each feature module, will import its own related routes.

app.module.ts will then import all the feature modules. along with their routes.

the only difference between core routes and the feature routes is exporting the routes using .forChild(routes) in the feature routes, and .forRoot(routes) for the core routes.

you can have as many .forChild() imports as you'd like, but you shuold use only one .forRoot() preferably in the core module.

App.Module.ts (does not contain routes in it, only imports other route modules)

// import { ... } from '...';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AppFeatureRoutingModule
  ],
  bootstrap: [AppComponent]
})

export class AppModule { }

App-routing.Module.ts (core routes)

// import { ...} from '...';

const routes: Routes = [
    { path: 'login', children: [
        { path: '', component: LoginComponent },
        { path: 'enter', component: EnterComponent }
    ]}
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

App-feature-routing.Module.ts (feature routes)

  // import { ...} from '...';

    const featureRoutes: Routes = [
        { path: 'myFeatureIndex', component: FeatureIndexComponent }
    ];

    @NgModule({
        imports: [RouterModule.forChild(featureRoutes)],
        exports: [RouterModule]
    })
    export class AppFeatureRoutingModule { }

So App.Module imports both core routes, and every feature route, separately. you can have as many feature routes as you wish. behind the scenes Angular will end up chaining all them .forChild() routes and forRoot() routes to one big route and work with it.

Upvotes: 2

Related Questions