title: Angular 8 Multiple layout use different css and js for each layout
body: <p>I am working on an application which include frontend site layout and backend admin layout. These both layouts have different CSS and JS. How can use different CSS and Js according to each layout template. Here is my structure.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Couaff&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet"&gt;
    &lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  
   &lt;!--[if lt IE 9]&gt;
          &lt;script src="http://html5shim.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
      &lt;!--[if lte IE 8]&gt;
          &lt;script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"&gt;&lt;/script&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- **Favicon** --&gt;
      &lt;link rel="shortcut icon" href="favicon.ico" type="image/x-icon" /&gt;
  
      &lt;!-- **CSS - stylesheets** --&gt;
      &lt;link id="default-css" href="assets/style.css" rel="stylesheet" media="all"&gt;
      &lt;link href="assets/css/shortcode.css" rel="stylesheet" type="text/css"&gt;
  
      &lt;!-- **Additional - stylesheets** --&gt;
      &lt;link rel="stylesheet" href="assets/css/responsive.css" type="text/css" media="all"&gt;
      &lt;link href="assets/css/animations.css" rel="stylesheet" media="all"&gt;
      &lt;link id="skin-css" href="assets/skins/red/style.css" rel="stylesheet" media="all"&gt;
      &lt;link rel="stylesheet" href="assets/css/meanmenu.css" type="text/css" media="all"&gt;
      &lt;link rel="stylesheet" type="text/css" href="assets/css/pace-theme-loading-bar.css"&gt;
  
      &lt;!-- **Font Awesome** --&gt;
      &lt;link rel="stylesheet" href="assets/css/font-awesome.min.css"&gt;
  
      &lt;!-- **Google - Fonts** --&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300,700,900' rel='stylesheet' type='text/css'&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700' rel='stylesheet' type='text/css'&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'&gt;
  
      &lt;!--[if IE 7]&gt;
      &lt;link rel="stylesheet" href="css/font-awesome-ie7.min.css" /&gt;
      &lt;![endif]--&gt;
  
      &lt;!-- jQuery --&gt;
      &lt;script src="assets/js/modernizr.custom.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;&lt;/app-root&gt;
  
  
    &lt;!-- **jQuery** --&gt;
  &lt;script src="assets/js/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
  &lt;script src="assets/js/jquery.parallax-1.1.3.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="assets/js/jquery.sticky.min.js"&gt;&lt;/script&gt;
  &lt;script src="assets/js/jquery.inview.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="assets/js/jsplugins.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="assets/js/jquery.meanmenu.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="assets/js/custom.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My app.routing.ts is consists of the following code.</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  import { SiteLayoutComponent } from './layouts/site-layout/site-layout.component';
  import { HomeComponentComponent } from './other-component/home-component/home-component.component';
  import {DashboardComponent} from './secure-component/dashboard/dashboard.component';
  import {AdminLayoutComponent} from './layouts/admin-layout/admin-layout.component';
  
  const routes: Routes = [
    {path: '', redirectTo: '/home', pathMatch: 'full'},
      {
        path: '', component : SiteLayoutComponent,
          children: [
            {path: 'home', component: HomeComponentComponent}
          ]
      },
      {
        path: '', component : AdminLayoutComponent,
          children: [
            {path: 'dashboard', component: DashboardComponent}
  
          ]
      }
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(routes)
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>My point is here to just load different style sheets and js files for each layouts I created. Here is both layouts</p>
  
  <p><a href="https://i.stack.imgur.com/wMoYs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wMoYs.png" alt="application structure"></a></p>
  
  <blockquote>
    <p>Note: I don't want to use multiple application inside one angular 8
    application.</p>
  </blockquote>