title: Angular 6: one main protected parent route with module
body: <p>We are currently building an administration application using Angular 6. We barely started but want to apply bests practices early on and want to use the optimal structure and modularity that suits us bests. For that, we decided to handle routes per module (don't want to have a bloated single file) with the use of <code>RouterModule.forRoot</code> and <code>RouterModule.forChild</code>.</p>
  
  <p>Being an administration, we want the all application to be protected (using a Guard). However we are facing an issue regarding parent route and children when it comes of modularity in routes.</p>
  
  <p>Let's say, we have a main <code>AppRoutingModule</code> that contains the following:</p>
  
  <pre><code>const appRoutes: Routes = [
    {
      path: '',
      component: LayoutComponent,
      canActivate: [AuthGuard],
      children: []
    },
    { path: 'oauth/callback', component: AuthComponent }
  ];
  
  @NgModule({
    declarations: [
      AuthComponent
    ],
    exports: [
      RouterModule
    ],
    imports: [
      RouterModule.forRoot(appRoutes)
    ]
  })
  export class AppRoutingModule {}
  </code></pre>
  
  <p>Now let's say we have another module, the <code>UsersRoutingModule</code> which contains:</p>
  
  <pre><code>const usersRoutes: Routes = [
    {
      path: '/users',
      component: UsersComponent
    }
  ];
  
  @NgModule({
    exports: [
      RouterModule
    ],
    imports: [
      RouterModule.forChild(usersRoutes)
    ]
  })
  export class UsersRoutingModule {}
  </code></pre>
  
  <p>How can we define routes in modules such as the above become the equivalent of this:</p>
  
  <pre><code>[
    {
      path: '',
      component: LayoutComponent,
      canActivate: [AuthGuard],
      children: [
        { path: 'users', component: UsersComponent }
      ]
    },
    { path: 'oauth/callback', component: AuthComponent }
  ]
  </code></pre>