title: Angular2 - Shared Layout for multiple modules
body: <p>I build an Angular application with different modules. Each module handles distinct tasks. On my landing page, the user should login or register. It's a very lean layout without any navigation. On my feature modules (which are accessible after a login) the user can perform tasks and search for information.</p>
  
  <p>My main problem is, that my feature modules should share the same layout (with navigation, toolbar and so on) while my AuthModule should not have the same layout. The following image should illustrate what I try to achieve.</p>
  
  <p><a href="https://i.stack.imgur.com/eZZTJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/eZZTJ.png" alt="enter image description here"></a></p>
  
  <p>Every module (Auth and Features) have their own RoutingModule and distinct set of components. The access to the Layout2 and the FeatureModules is protected by AuthService/AuthGuards.</p>
  
  <p>I already found good solutions for a Component-based setup (<a href="https://stackoverflow.com/a/40508804/1365061">https://stackoverflow.com/a/40508804/1365061</a> and <a href="https://stackblitz.com/edit/angular-multi-layout-example?file=app%2Fapp.routing.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-multi-layout-example?file=app%2Fapp.routing.ts</a>) but not for a module based one. I want to lazy load the feature modules and this can't be applied to the given solutions I found (at least it does not work for modules).</p>
  
  <p>What can I do to share the layouts between the modules or in other words "load the modules within the layout component"?</p>
  
  <p>My current code snippets are:</p>
  
  <p><strong>app.component</strong></p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>user-area.component</strong></p>
  
  <pre><code>&lt;mat-toolbar color="primary" class="mat-elevation-z2" *ngIf="(auth.account$ | async) as account"&gt;
      &lt;button mat-button class="pull-left" [disabled]="!account" (click)="sidenav.toggle()"&gt;
          &lt;i class="fa fa-navicon" aria-hidden="true"&gt;&lt;/i&gt; SiteName
      &lt;/button&gt;
  
      &lt;button mat-button class="pull-left ml-3 pull-left" routerLink="/settings/profile"&gt;
          &lt;img [src]="account.userID | avatar" class="rounded-circle mr-1" width="30" height="30"&gt;
          &lt;span class="d-none d-sm-inline"&gt; {{account.name}}&lt;/span&gt;
      &lt;/button&gt;
  
      &lt;button id="logoutButton" mat-button class="pull-right" routerLink="/auth/logout"&gt;
          &lt;i class="fa fa-power-off" aria-hidden="true"&gt;&lt;/i&gt;&lt;span class="d-none d-sm-inline"&gt; Logout&lt;/span&gt;
      &lt;/button&gt;
  &lt;/mat-toolbar&gt;
  
  &lt;mat-sidenav-container (window:resize)="onResize($event)" [style]="mainStyle.getValue()"&gt;
      &lt;mat-sidenav *ngIf="auth.account$ | async" [mode]="sidenavMode" [opened]="true" #sidenav class="sidenav-shadow"&gt;
          &lt;app-nav-pane *ngFor="let nav of (app.navmods$ | async)" [content]="nav"&gt;&lt;/app-nav-pane&gt;
      &lt;/mat-sidenav&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="row" style="flex: 1 0 auto;"&gt;
              &lt;div class="col-12"&gt;
  
                  &lt;router-outlet&gt;&lt;/router-outlet&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;app-footer *ngIf="responsiveService.mdOrLarger"&gt;&lt;/app-footer&gt;
  &lt;/mat-sidenav-container&gt;
  </code></pre>
  
  <p><strong>public.component</strong></p>
  
  <pre><code>&lt;div class="..." style="..."&gt;
     &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My <strong>app.routing.module routing</strong>:</p>
  
  <pre><code>const routes: Routes = [
      {
          path: 'auth',
          component: PublicAuthComponent,
          canActivate: [NotLoggedInGuard]
      },
      {
          path: '',
          component: UserAreaComponent,
          canActivate: [LoggedInGuard]
      }
  ];
  </code></pre>
  
  <p>As said I tried to use the concept from the above-mentioned links but it's not working as intended.</p>