title: Angular: How to prevent direct access to lazy child module route via browser
body: <p>I am developing a multi-module application using Angular 9. Here is my main application routing module.</p>
  <p>Here is <strong>AppRoutingModule</strong> and it loads lazy <strong>DemoModule</strong>.</p>
  <pre><code>const routes: Routes = [
  {
      path: '',
      component: AdminLayoutComponent,
      canActivate: [SecGuard],
      children: [
        {
          path: 'demo',
          loadChildren: () =&gt; import('demo').then((m) =&gt; m.DemoModule),
         },
        { path: 'not-found-page', component: NotFound404PageComponent, canActivate: [SecGuard] },
      ],
    },
  
    { path: '**', redirectTo: 'not-found-page' },
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule],
   })
  export class AppRoutingModule {}
  </code></pre>
  <p>Here is the code of <strong>DemoRoutingModule</strong></p>
  <pre><code>export const CTS_ROUTES: Routes = [{ path: 'dashboard', component: DashboardComponent, canActivate: [SecGuard] }];
  
  @NgModule({
     imports: [RouterModule.forChild(CTS_ROUTES)],
     exports: [RouterModule],
  })
  export class DemoRoutingModule {}
  </code></pre>
  <p>Here is my AppModule</p>
  <pre><code>@NgModule({
   declarations: [AppComponent],
     imports: [
       BrowserModule,
       BrowserAnimationsModule,
        CommonModule,
       CoreModule.forRoot(configuration),
       DemoModule,
       AppRoutingModule,
        ],
       providers: [],
       bootstrap: [AppComponent],
     })
    export class AppModule {}
  </code></pre>
  <p>Now when I access  <code>http://localhost:4200/demo/dashboard</code> everything is normal.</p>
  <p><a href="https://i.stack.imgur.com/JLZW5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JLZW5.png" alt="enter image description here" /></a></p>
  <p>But when I try to access <code>http://localhost:4200/dashboard</code>  which I don't want to do. Then the result is like below image.</p>
  <p><a href="https://i.stack.imgur.com/aBQ5q.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aBQ5q.png" alt="enter image description here" /></a></p>
  <p>I want to access child components (which in this case <em>DashboardComponent</em>) only via the parent path <em>/demo/dashboard</em>.</p>
  <p>How can I achieve this functionality? Any idea?</p>