Angular2 Routing: import submodule with routing + making it prefixed

Question

I have a main module and some submodules. And I want to specify some not trivial routing between them.

I'd prefer defining the routes of a submodule within the submodule. E.g.:

@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 its own internal routing, but I want to make its whole routing 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 {}

This settings creates the following routes: /country, /country/list, etc., but I want to make them prefixed like this:

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

There are other modules that I want to access via another routing, e.g. a CityModule under /otherstuff/city/create and /otherstuff/city/list`.

My questions:

Is it possible to import a module with its own routing and make its routes prefixed?
Furthermore: Is there a way to make links between 2 submodules agnostically of their final (prefixed) routes?

UPDATE

The accepted answer is the best way to do it: create the routes in the module, register them externally. Thus you can modify the routes, e.g. prefix them (this is what I wanted), you can define guards, override or filter them, etc.

Sorry. Here is the question: http://stackoverflow.com/questions/39131350/nesting-angular2-rc5-routes-multiple-files — Sergey Tyupaev, Dec 07 '16 at 15:56

Mateo Tibaquira · Answer 1 · 2020-02-03T03:13:38.577

10

Playing with this Routing stuff I just found a clean way I would like to share, to handle the routes of submodules with no headaches and love Angular even more. Taking the OP case as an example, I propose you to study the following code:

Add a utility function to your CountryModule submodule, to load it dynamically from the Router and avoid a compiler warning about replacing the arrow function with a reference to an 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 that Entrypoint 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 there you go! You can now reach your submodule components with settings/country/list and settings/country/create.

WARNING

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

Enjoy!

edited Feb 03 '20 at 03:13

answered Aug 16 '17 at 16:01

Mateo Tibaquira

1,575
13
20

This should be the accepted answer. Note you don't need to export an "entrypoint" you could just do `loadChildren: () => CountryModule`. – Michael Petito Sep 07 '17 at 14:19
@MichaelPetito we could, but there is an error/warning with angular/cli that complains about using lambdas and suggest to replace them with exported functions ;) – Mateo Tibaquira Sep 07 '17 at 21:23
1

Probably you should emphasize more, your warning 'not to import into parent module'. You saved me from scratching my head and running around in circles. – fossil Jan 24 '18 at 02:05
@fossil bold CAPS was not enough? hehe glad I saved your time – Mateo Tibaquira Jan 24 '18 at 21:07
the lazy-loading is preserved? – Andrea Scarafoni Apr 03 '19 at 12:27
@AndreaScarafoni I think so because this is like spreading a single configuration in many files, nothing strange :) – Mateo Tibaquira Apr 04 '19 at 22:57

score 5 · Accepted Answer · answered Dec 07 '16 at 15:32

5

in your appRoutes add child route like

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

Create a separate routes 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>

answered Dec 07 '16 at 15:32

Md Ayub Ali Sarker

7,364
2
19
18

Just to clarify: There is no way to change the routing of a module once it's imported into the module? – Gábor Imre Dec 07 '16 at 15:39
@Gábor Imre, you cannot. – Md Ayub Ali Sarker Dec 07 '16 at 15:43

Angular2 Routing: import submodule with routing + making it prefixed

2 Answers2

Linked