Angular2 Routing: import a submodule with routing + make it a prefix

Question

I have a main module and some submodules. And I want to point out some non-trivial routing between them.

I would rather define the submodule routes inside the submodule. For instance:

@NgModule({ imports: [ /*...*/ RouterModule.forChild([ { path: 'country', redirectTo: 'country/list' }, { path: 'country/list', component: CountryListComponent }, { path: 'country/create', component: CountryCreateComponent }, /*...*/ ]) ], declarations: [/*...*/], exports: [ RouterModule, ], }) export class CountryModule {} 

I want to import this module with my own internal routing, but I want all its routing to be prefixed.

 const appRoutes = [ { path: '', component: HomeComponent }, /*... (basic routes)*/ ]; @NgModule({ imports: [ /*...*/ RouterModule.forRoot(appRoutes), CountryModule, // <- how to make its routing prefixed?? ], declarations: [ /*...*/ AppComponent, ], bootstrap: [ AppComponent ] }) export class AppModule {} 

These settings create the following routes: /country , /country/list , etc., but I want to make them prefixes like this:

• /settings/country
• /settings/country/list
• /settings/country/create

There are other modules that I want to access through other routing, for example. a CityModule under /otherstuff/city/create and / otherstuff / city / list `.

My questions:

• Can I import a module with my own routing and make my routes a prefix?
• In addition: is there a way to make connections between two submodules agnostically their final (prefix) routes?

UPDATE

The accepted answer is the best way to do this: create routes in the module, register them from the outside. This way you can change routes, for example. prefix them (this is what I wanted), you can define guards, redefine or filter them, etc.

Answer 1

in appRoutes add a child route like

 const appRoutes = [ { path: '', component: HomeComponent }, { path: 'settings', component: CountryComponent, canActivate: [AuthGuard], children: COUNTRY_ROUTES }, ]; 

Create a separate route file

 export const COUNTRY_ROUTES:Routes = [ { path: 'country', redirectTo: 'country/list' }, { path: 'country/list', component: CountryListComponent }, { path: 'country/create', component: CountryCreateComponent }, ]; 

In CountryComponent.html

 <router-outlet></router-outlet> 

Answer 2

While playing with this Routing material, I just found a clean way that I would like to share for handling the routes of sub-modules without headaches and Angular's love even more. Taking the OP example, I suggest you study the following code:

Add a utility function to the CountryModule submodule to dynamically load it from the router and avoid the compiler warning about replacing the arrow function with a link to the exported function:

 @NgModule({ imports: [ ... RouterModule.forChild([ { path: 'country', pathMatch: 'full', redirectTo: 'list' }, { path: 'country/list', component: CountryListComponent }, { path: 'country/create', component: CountryCreateComponent }, ]) ], declarations: [ ... ], exports: [ RouterModule, ], }) export class CountryModule {} export function CountryEntrypoint() { return CountryModule; } 

Now you can import this entry point into your parent module where you want to place the routes:

 @NgModule({ imports: [ ... RouterModule.forRoot([ { path: '', pathMatch: 'full', component: HomeComponent }, { path: 'settings', loadChildren: CountryEntrypoint } ]), ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule {} 

And here you are! Now you can reach your submodule components using settings/country/list and settings/country/list .

Attention

Be careful not to import CountryModule into the parent @NgModule module because it will override routes outside the settings path. Let the router do the job.

Enjoy it!