CODEWITHSUNDEEP
angularangular8
user12484971
user12484971

Reputation:

Angular 8 Multiple layout use different css and js for each layout

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.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Couaff</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

 <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <!--[if lte IE 8]>
        <script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script>
    <![endif]-->

    <!-- **Favicon** -->
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

    <!-- **CSS - stylesheets** -->
    <link id="default-css" href="assets/style.css" rel="stylesheet" media="all">
    <link href="assets/css/shortcode.css" rel="stylesheet" type="text/css">

    <!-- **Additional - stylesheets** -->
    <link rel="stylesheet" href="assets/css/responsive.css" type="text/css" media="all">
    <link href="assets/css/animations.css" rel="stylesheet" media="all">
    <link id="skin-css" href="assets/skins/red/style.css" rel="stylesheet" media="all">
    <link rel="stylesheet" href="assets/css/meanmenu.css" type="text/css" media="all">
    <link rel="stylesheet" type="text/css" href="assets/css/pace-theme-loading-bar.css">

    <!-- **Font Awesome** -->
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">

    <!-- **Google - Fonts** -->
    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300,700,900' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

    <!--[if IE 7]>
    <link rel="stylesheet" href="css/font-awesome-ie7.min.css" />
    <![endif]-->

    <!-- jQuery -->
    <script src="assets/js/modernizr.custom.js"></script>

</head>
<body>
  <app-root></app-root>


  <!-- **jQuery** -->
<script src="assets/js/jquery-1.11.3.min.js"></script>
<script src="assets/js/jquery.parallax-1.1.3.js" type="text/javascript"></script>
<script type="text/javascript" src="assets/js/jquery.sticky.min.js"></script>
<script src="assets/js/jquery.inview.js" type="text/javascript"></script>
<script src="assets/js/jsplugins.js" type="text/javascript"></script>
<script src="assets/js/jquery.meanmenu.min.js" type="text/javascript"></script>
<script src="assets/js/custom.js"></script>

</body>
</html>

My app.routing.ts is consists of the following 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 { }

My point is here to just load different style sheets and js files for each layouts I created. Here is both layouts

application structure

Note: I don't want to use multiple application inside one angular 8 application.

Upvotes: 1

Views: 782

Answers (2)

Ayobami Araile
Ayobami Araile

Reputation: 1

For each module l, what i would try to do is import the css files in the scss file using @import and pointing it to the css i want it to use and likewise for the jquery, i would import it as a file in the component.ts file . Check https://www.digitalocean.com/community/tutorials/angular-shortcut-to-importing-styles-files-in-components for further explanation

Upvotes: 0

Xesenix
Xesenix

Reputation: 2548

You can use routing for choosing which layout to use on specific url. Your layout should use <router-outlet></router-outlet>

const routes: Routes = [
  {
    path: 'a',
    component: LayoutAComponent,
    children: [{ path: '', component: ContentComponent },]
  },
  {
    path: 'b',
    component: LayoutBComponent,
    children: [{ path: '', component: ContentComponent },]
  },
]

You can check this example. If thats not enough you may want to create lazy loaded modules to separate stuff loaded by each view.

Upvotes: 0

Related Questions