title: angular 12 route loading component without registering the module
body: <p>Angular version and CLI</p>
  <p>As a forewarning, we are moving the CLI npm package to &quot;@angular/cli&quot; with the next release,<br />
  which will only support Node 6.9 and greater. This package will be officially deprecated<br />
  shortly after.</p>
  <p>To disable this warning use &quot;ng set --global warnings.packageDeprecation=false&quot;.</p>
  <pre><code>                         _                           _  _                                    
  </code></pre>
  <p>__ _  _ __    __ _  _   _ | |  __ _  _ __         ___ | |(<em>)<br />
  / <em><code> || '_ \  / _</code> || | | || | / <em>` || '<strong>|</strong></em></em></em>  / <strong>|| || |<br />
  | (<em>| || | | || (</em>| || |<em>| || || (</em>| || |  |</strong><em><strong>|| (</strong> | || |<br />
  _</em>,<em>||</em>| |<em>| _</em>, | _<em>,</em>||<em>| _</em>,<em>||</em>|          _<strong>||<em>||</em>|<br />
  |</strong>_/<br />
  angular-cli: 1.0.0-beta.28.3<br />
  node: 14.17.4<br />
  os: win32 x64<br />
  @angular/animations: 12.1.4<br />
  @angular/common: 12.1.4<br />
  @angular/compiler: 12.1.4<br />
  @angular/core: 12.1.4<br />
  @angular/forms: 12.1.4<br />
  @angular/platform-browser: 12.1.4<br />
  @angular/platform-browser-dynamic: 12.1.4<br />
  @angular/router: 12.1.4<br />
  @angular/cli: 12.1.4<br />
  @angular/compiler-cli: 12.1.4</p>
  <p>I having the following modules</p>
  <ul>
  <li>CoreModule</li>
  <li>LayoutModule</li>
  <li>ShareModule</li>
  <li>ViewModule</li>
  </ul>
  <p>I do have a router-outlet in appcomponent which is the bootstrap component.</p>
  <p><strong>LayoutModule</strong></p>
  <p>I have 3 component which is declared in my LayoutModule
  which are follows.</p>
  <ul>
  <li>ContentLayoutComponent</li>
  <li>AuthLayoutComponent</li>
  <li>SideNav</li>
  </ul>
  <p>And in each layout a separate router-outlet (ContentLayoutComponent,AuthLayoutComponent)</p>
  <p>No components are exported from that module outside.</p>
  <pre><code>import { NgModule, Optional, SkipSelf } from '@angular/core';
  //import { components} from './components'
  import { ContentlayoutComponent } from '@layout/components/contentlayout/contentlayout.component';
  import { AuthlayoutComponent } from '@layout/components/authlayout/authlayout.component';
  import { SidenavComponent } from '@layout/components/sidenav/sidenav.component';
  import { throwIfAlreadyLoaded } from '@core/guard';
  import { RouterModule } from '@angular/router';
  
  @NgModule({
    declarations: [
      //...components,
      ContentlayoutComponent,AuthlayoutComponent,SidenavComponent
    ],
    imports:[RouterModule],
  })
  export class LayoutModule { 
  
  constructor(@Optional() @SkipSelf() layoutmodule:LayoutModule){
    throwIfAlreadyLoaded(layoutmodule,'LayoutModule')
  }
  
  }
  </code></pre>
  <p><strong>AppModule</strong></p>
  <p>If you see the below code i am not registering the LayoutModule.</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { CoreModule } from '@core/core.module';
  import { LayoutModule } from '@layout/layout.module';
  import { SharedModule } from '@shared/shared.module';
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { ViewsModule } from './views/views.module';
  
  @NgModule({
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule,
      CoreModule,
      SharedModule,
      ViewsModule,
      AppRoutingModule
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  <p><strong>AppComponent</strong></p>
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  <p><strong>AppRoutingModule</strong></p>
  <p>Here i am using a component from layoutmodule . You can see it as ContentlayoutComponent. But i did not exported those component outside.</p>
  <pre><code>import { NgModule } from '@angular/core';
  import { RouterModule, Routes } from '@angular/router';
  import {NoauthGuard } from '@core/guard'
  import {ContentlayoutComponent} from '@layout/components'
  
  const routes: Routes = [
    {
      path: '',
      redirectTo: '/contactus',
      pathMatch: 'full'
    },
   {
      path: '',
      component: ContentlayoutComponent,
      canActivate: [NoauthGuard], // no authentication applied
      children: [
        {
          path: 'contactus',
          loadChildren: () =&gt;
            import('@modules/contact/contact.module').then(m =&gt; m.ContactModule)
        }
      ]
    },
  
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
  })
  export class AppRoutingModule { }
  </code></pre>
  <p><strong>Question</strong></p>
  <p>How the AppRouteModule is able to load the component without registing the module? And also i did not export any component outside the layoutmodule.</p>
  <p>You can access the same code from <a href="https://stackblitz.com/github/vipinbmenon/angular_template" rel="nofollow noreferrer">https://stackblitz.com/github/vipinbmenon/angular_template</a>
  But in stackbliz without registering the layoutmodule it won't work.</p>
  <p><strong>Reference</strong>
  Other modules</p>
  <p><strong>SharedModule</strong></p>
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { ReactiveFormsModule } from '@angular/forms';
  import { RouterModule } from '@angular/router';
  
  @NgModule({
    declarations: [],
    imports: [
      CommonModule,
      RouterModule,
      ReactiveFormsModule,
    ],
    exports:[ReactiveFormsModule,CommonModule,RouterModule]
  })
  export class SharedModule { }
  </code></pre>
  <p><strong>ViewModule</strong></p>
  <pre><code>import { NgModule } from '@angular/core';
  import { components } from './components';
  
  @NgModule({
    declarations: [...components],
    exports: [
      ...components
    ]
  })
  export class ViewsModule { }
  </code></pre>