title: Angular 4 - How to create Multi-user, Multi master layout template
body: <p>I need to create multiple master layouts for multiple users in Angular 4.</p>
  
  <ol>
  <li>Frontend / Client Users</li>
  <li>Backend / Admin Users</li>
  </ol>
  
  <p>Each of the above use different master templates with their own different header and footer.
  Each of the templates use different css and js files.</p>
  
  <p>Currently I am able to only add styles and scripts for 1 particular type (either admin or client).</p>
  
  <p>I put all my template's .css and .js in index.html. It now applies to all pages in the project. I want to make these imports specific to user types.</p>
  
  <p>Following is my project setup</p>
  
  <pre><code>--app
    --layouts
      --frontend-header
      --frontend-footer
      --frontend-layout
      --backend-header
      --backend-footer
      --backend-menus
      --backend-settings
    --frontend
      --home
    --backend
      --dashboard
    --login
      --backend-login
      --frontend-login
  </code></pre>
  
  <p>app-routing.module.ts is below</p>
  
  <pre><code>const appRoutes: Routes = [
  
  //Frontend routes goes here
  {
      path: '',
      component: FrontendLayoutComponent,
      children: [
        { path: '', component: HomeComponent, pathMatch: 'full'},
        { path: 'home', component: HomeComponent },
      ]
  },
  
  //Backend routes goes here here
  {
      path: '',
      component: BackendLayoutComponent,
      children: [
        { path: '', component: DashboardComponent, pathMatch: 'full'},
        { path: 'admin/dashboard', component: DashboardComponent },
      ]
  },
  
  //no layout routes
  { path: 'login', component: FrontendLoginComponent},
  { path: 'admin/login', component: BackendLoginComponent },
  // otherwise redirect to home
  { path: '**', redirectTo: '' }
  
  ];
  </code></pre>
  
  <p>Could someone please help me in achieving this?</p>