title: Angular multiple router modules not working
body: <p>I would like to have a routing module in my main app plus routing in a separate module, like:</p>
  
  <pre><code>app
   - modules
     -my-module
        my-routing.module.ts
   app-routing.module.ts
  </code></pre>
  
  <p>The main routing module has:</p>
  
  <pre><code>const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: 'view-container' },
    { path: 'view-container', component: ViewContainerComponent },
    { path:  '**', component: ViewContainerComponent }
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes, { enableTracing: true })],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>The sub module's routing is:</p>
  
  <pre><code>const routes: Routes = [
    { path: 'view-detail', component: CompADetailComponent }
  ];
  
  @NgModule({
    imports: [
      CommonModule,
      RouterModule.forChild(routes)
    ],
    declarations: []
  })
  export class MyRoutingModule { }
  </code></pre>
  
  <p>My ViewContainer component has a routerLink to "view-detail".</p>
  
  <pre><code>&lt;a [routerLink]="['/view-detail']"&gt;
    View Details
  &lt;/a&gt;
  </code></pre>
  
  <p>However, when I click on the "View Details" link, only the URL changes, the CompADetailComponent is not loaded.</p>
  
  <p>I do note that if I move the "view-detail" path to the main app routing module it works fine. In the tracing, the difference I see is:</p>
  
  <p>When it works:</p>
  
  <pre><code>Router Event: NavigationStart
  platform-browser.js:367 NavigationStart(id: 2, url: '/view-detail')
  platform-browser.js:367 NavigationStart {id: 2, url: "/view-detail"}
  platform-browser.js:380 Router Event: RoutesRecognized
  platform-browser.js:367 RoutesRecognized(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'view-detail') } )
  platform-browser.js:367 RoutesRecognized {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail", state: RouterStateSnapshot}
  platform-browser.js:380 Router Event: GuardsCheckStart
  platform-browser.js:367 GuardsCheckStart(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'view-detail') } )
  platform-browser.js:367 GuardsCheckStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
  platform-browser.js:380 Router Event: ChildActivationStart
  platform-browser.js:367 ChildActivationStart(path: '')
  platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:380 Router Event: ActivationStart
  platform-browser.js:367 ActivationStart(path: 'view-detail')
  platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:380 Router Event: GuardsCheckEnd
  platform-browser.js:367 GuardsCheckEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'view-detail') } , shouldActivate: true)
  platform-browser.js:367 GuardsCheckEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
  platform-browser.js:380 Router Event: ResolveStart
  platform-browser.js:367 ResolveStart(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'view-detail') } )
  platform-browser.js:367 ResolveStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
  platform-browser.js:380 Router Event: ResolveEnd
  platform-browser.js:367 ResolveEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'view-detail') } )
  platform-browser.js:367 ResolveEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
  platform-browser.js:380 Router Event: ActivationEnd
  platform-browser.js:367 ActivationEnd(path: 'view-detail')
  platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:380 Router Event: ChildActivationEnd
  platform-browser.js:367 ChildActivationEnd(path: '')
  platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:380 Router Event: NavigationEnd
  platform-browser.js:367 NavigationEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail')
  platform-browser.js:367 NavigationEnd {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail"}
  </code></pre>
  
  <p>When it doesn't work:</p>
  
  <pre><code>Router Event: NavigationStart
  platform-browser.js:367 NavigationStart(id: 2, url: '/view-detail')
  platform-browser.js:367 NavigationStart {id: 2, url: "/view-detail"}
  platform-browser.js:380 Router Event: RoutesRecognized
  platform-browser.js:367 RoutesRecognized(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'**') } )
  platform-browser.js:367 RoutesRecognized {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail", state: RouterStateSnapshot}
  platform-browser.js:380 Router Event: GuardsCheckStart
  platform-browser.js:367 GuardsCheckStart(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'**') } )
  platform-browser.js:367 GuardsCheckStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
  platform-browser.js:380 Router Event: ChildActivationStart
  platform-browser.js:367 ChildActivationStart(path: '')
  platform-browser.js:367 ChildActivationStart {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:380 Router Event: ActivationStart
  platform-browser.js:367 ActivationStart(path: '**')
  platform-browser.js:367 ActivationStart {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:380 Router Event: GuardsCheckEnd
  platform-browser.js:367 GuardsCheckEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'**') } , shouldActivate: true)
  platform-browser.js:367 GuardsCheckEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot, shouldActivate: true}
  platform-browser.js:380 Router Event: ResolveStart
  platform-browser.js:367 ResolveStart(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'**') } )
  platform-browser.js:367 ResolveStart {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
  platform-browser.js:380 Router Event: ResolveEnd
  platform-browser.js:367 ResolveEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail', state: Route(url:'', path:'') { Route(url:'view-detail', path:'**') } )
  platform-browser.js:367 ResolveEnd {id: 2, url: "/view-detail", urlAfterRedirects: UrlTree, state: RouterStateSnapshot}
  platform-browser.js:380 Router Event: ActivationEnd
  platform-browser.js:367 ActivationEnd(path: '**')
  platform-browser.js:367 ActivationEnd {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:380 Router Event: ChildActivationEnd
  platform-browser.js:367 ChildActivationEnd(path: '')
  platform-browser.js:367 ChildActivationEnd {snapshot: ActivatedRouteSnapshot}
  platform-browser.js:380 Router Event: NavigationEnd
  platform-browser.js:367 NavigationEnd(id: 2, url: '/view-detail', urlAfterRedirects: '/view-detail')
  platform-browser.js:367 NavigationEnd {id: 2, url: "/view-detail", urlAfterRedirects: "/view-detail"}
  </code></pre>
  
  <p>So it seems to be picking up the "**" path instead of the "view-detail" path. Any clue what I'm doing wrong?</p>
  
  <p><strong>* EDIT *</strong>
  App module added:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  import { AppRoutingModule } from './app-routing.module';
  import { CompAModule } from './modules/comp-a/comp-a.module';
  import { ViewContainerComponent } from './view-container/view-container.component';
  import { CompADetailComponent } from './modules/comp-a-detail/comp-a-detail.component';
  import { MyRoutingModule } from './modules/my-module/my-routing.module';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      ViewContainerComponent,
      CompADetailComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule,
      MyRoutingModule,
      CompAModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>