title: Angular 8 Routing w/ Lazy Loading modules, child within a child route can skip parent route to access child
body: <p>I have the following simple structure in my application that I am trying to work with:</p>
  
  <pre><code>/
  /home
  /admin
      /setup
      /other
  </code></pre>
  
  <p>I have the router using modules and lazy loading.  So the administrator page (<code>/admin</code>) of my application controls the access to the subpages for setting up the application.  Eventually, the Admin route (<code>/admin</code>) will be route guarded, but right now I am just building the empty templates and some simple tests for the routing.  This is all working.  Bad addresses are captured, missing addresses routing to <code>/</code>, etc.</p>
  
  <p>My problem is in protecting my addressing so that people cannot bypass the true routes of the application and get to pages they should not see. Go to <code>/setup</code> instead of <code>/admin/setup</code>.</p>
  
  <p>Trying to keep things self contained, I did not want to rely on route guards on all the submodules, just the routing under a page that is guarded.  This way, new modules loaded under the admin page will automatically be protected, in case a developer forgets to add the guard.  Also, the individual feature modules have their own routing, so this is not in one central location as most examples use.</p>
  
  <p>The code works properly going to /admin/setup, /admin/set will go to the / root.  The problem I am having is that /setup also goes to the lazy loaded module for the Setup, which is a child of the Admin module routing.</p>
  
  <p>EDIT: Update the routing modules based on suggestions, but the issue is still present.</p>
  
  <p>app-routing.module.ts</p>
  
  <pre><code>const routes: Routes = [
      { path: '', component: DashboardComponent },
      { path: 'home', component: HomeComponent },
      { path: 'admin', loadChildren: () =&gt; import('./administrator/administrator.module').then(m =&gt; m.AdministratorModule) },
  
      { path: '**', redirectTo: '/' }     // Wrong route entered, return to main route
  ];
  
  @NgModule({
      exports: [RouterModule],
      imports: [
          RouterModule.forRoot(routes)
      ]
  })
  </code></pre>
  
  <p>admin-routing.module.ts</p>
  
  <pre><code>const routes: Routes = [
      { path: '', component: AdministratorComponent,
          children: [
              { path: 'setup', loadChildren: () =&gt; import('./setup/setup.module').then(m =&gt; m.SetupModule) },
              { path: 'zzz', loadChildren: () =&gt; import('./zzz/zzz.module').then(m =&gt; m.zzzModule) }
          ]
      }
  ];
  
  @NgModule({
      imports: [RouterModule.forChild(routes)],
      exports: [RouterModule]
  })
  </code></pre>
  
  <p>EDIT #2: Add example import of the Administrator routing in admin.module.ts.</p>
  
  <p>admin.module.ts</p>
  
  <pre><code>@NgModule({
      declarations: [AdministratorComponent],
      imports: [
          CommonModule,
          MaterialModule,
          SetupModule,
          zzzModule,
          AdministratorRoutingModule
      ]
  })
  export class AdministratorModule { }
  </code></pre>
  
  <p>The problem is that I can go through properly to /admin/setup. However, you can also get to this page by simply going to /setup.  I do not want someone to be able to bypass the routing and get to restricted pages.</p>
  
  <p>I am not sure how to protect against this route (<code>/setup</code>) working.</p>