title: Nested outlets in master layout outlet in angular 6
body: <p>I am building an angular 6 application where I have two separate screens:</p>
  
  <ol>
  <li>Login (login, register, forgot password, profile)
  
  <ul>
  <li>those pages are not part of the layout</li>
  </ul></li>
  <li>Layout (dashboard, products, invoices)
  
  <ul>
  <li>those pages should share the same layout</li>
  </ul></li>
  </ol>
  
  <p>My application is based on modules, so I have</p>
  
  <ul>
  <li><strong>app.module.ts</strong></li>
  <li>account.module.ts </li>
  <li>dashboard.module.ts  </li>
  <li>products.module.ts </li>
  <li>invoices.module.ts</li>
  </ul>
  
  <p>Each module has empty component containing just an outlet, except the layout(containing header, body and footer).</p>
  
  <p>I want to achieve those routes:</p>
  
  <ul>
  <li><code>site.com/account/login</code> </li>
  <li><code>site.com</code> | will navigate to the dashboard
  
  <ul>
  <li><code>site.com/dashboard</code></li>
  </ul></li>
  <li><code>site.com/products</code></li>
  <li><code>site.com/invoices</code></li>
  </ul>
  
  <hr>
  
  <p><a href="https://i.stack.imgur.com/mBL8R.png" rel="noreferrer"><strong>Visual explanation</strong></a></p>
  
  <hr>
  
  <p>I have no problem with adding the <code>account.module</code>, but I don't know how to configure the <em>routes</em> when adding the <code>layout.module</code></p>
  
  <p>Note: maybe my whole approach is wrong, but to me it is the only logical thing to do, since I have modules containing components, and I want to be prepared for possible <em>lazy loading</em> configuration. </p>
  
  <p><em>Please advice me If I'm on the wrong path.</em></p>
  
  <p><strong>Code</strong></p>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { NgModule } from '@angular/core';
  import { HttpClientModule } from '@angular/common/http';
  import { RouterModule } from '@angular/router';
  
  import { AppComponent } from './app.component';
  
  import { LayoutModule } from './layout/layout.module';
  import { AccountModule } from './feature-components/membership/account.module';
  
  
  @NgModule({
    declarations: [
      AppComponent,
      FetchDataComponent
    ],
    imports: [
      BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
      BrowserAnimationsModule,
      HttpClientModule,
      LayoutModule,
      AccountModule,
      BrowserAnimationsModule
      RouterModule.forRoot([
       { path: '', component: LayoutOutletComponent },
       { path: '**', component: PageNotFoundComponent }
      ]),
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>account.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { SharedModule } from '@app-shared/shared.module';
  import { LoginComponent } from './login/login.component';
  import { ResetPasswordComponent } from './reset-password/reset-password.component';
  import { ChangePasswordComponent } from './change-password/change-password.component';
  import { RouterModule } from '@angular/router';
  import { AccountOutletComponent } from './account-outlet/account-outlet.component';
  
  @NgModule({
    imports: [
      SharedModule,
      RouterModule.forChild(
        [{
          path: 'account', component: AccountOutletComponent,
          children: [
            { path: 'login', component: LoginComponent },
            { path: 'reset-password', component: ResetPasswordComponent },
            { path: 'change-password', component: ChangePasswordComponent },
            { path: '', redirectTo: 'login', pathMatch: 'full' }
          ]
        }]
      )
    ],
    exports: [
      LoginComponent,
      ResetPasswordComponent,
      ChangePasswordComponent
    ],
    declarations: [
      AccountOutletComponent,
      LoginComponent,
      ResetPasswordComponent,
      ChangePasswordComponent
    ]
  })
  export class AccountModule { }
  </code></pre>
  
  <p>So, no problems here, the problems starts when I add that <code>layout module</code> which should constants the layout and inside of it, all nested modules.. and to be honest I don't even know how to start the routing configuration</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterModule } from '@angular/router';
  
  import { NavMenuComponent } from './nav-menu/nav-menu.component';
  import { FooterComponent } from './footer/footer.component';
  import { LayoutOutletComponent  } from './layout-outlet/layout-outlet.component';
  import { InvoicesModule } from '../feature-components/invoices/invoices.module';
  
  
  @NgModule({
    imports: [
      CommonModule,
      InvoicesModule,
      RouterModule
    )],
    exports: [
      NavMenuComponent,
      FooterComponent
    ],
    declarations: [
      NavMenuComponent,
      FooterComponent,
      LayoutOutletComponent
    ]
  })
  export class LayoutModule { }
  </code></pre>