Angular 2 routes in imported module override current

Question

Here\'s the plunker: https://plnkr.co/edit/WIFNVIEVqls4gXk21Muj

There\'re 2 modules both have routes defined. Module 2 imports module 1 in order to use a component from

Answer 1

Two issues to get this working. First, there is a bug with the router that takes in account the order of your imported modules. For more details on the error, see this bug report: https://github.com/angular/angular/issues/12648

So to get around the bug, you need to change the order of your imports in module2.module.ts so that your module2 routing file is imported before you import module1.

@NgModule({
    imports: [
        routing, // this order is important
        Module1Module
    ],
    declarations: [
        Module2Component
    ]
})

Second, instead of exporting your routing module as a const using ModuleWithProviders export it as a class. aka change the module2 routing file (module2.routing.ts) to export a class like so (you'll need to import NgModule):

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

This should fix it for you. Here's a working plunker: https://plnkr.co/edit/5impstull9EBCUxlw26k