Search code examples
javascripthtmlcssangularangular8

Css gets scattered while loading a page in angular 8

I am building an angular project where I am using pre designed html templates .I am using lazy loading while loading my pages ,I don't exactly know how to describe the issue all I can say that when I load the page ,the css gets scattered as shown in the gif I am attaching. enter image description here

I have created common navbar and footer components and all the css links are there .Following is the code of my homepagecomponent.html 

<app-basehome></app-basehome>
<app-navbarhome></app-navbarhome>
<body>
// Rest Html
</body>

<app-footerhome></app-footerhome>

Can anyone tell me why is this issue and how to solve it ?? .I am guessing it might be because of lazy loading .

My app.routing module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';



const routes: Routes = [
  {
    path:'',
    loadChildren:'./website/website.module#WebsiteModule'
  },

  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  }

];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I am just putting css files in the src/assets folder and providing the links like

 <!-- Owl Carousel ->
        <link href="/assets/home/common/owl-carousel/css/owl.carousel.min.css" rel="stylesheet" type="text/css">
        <!-- Fancybox -->
        <link rel="stylesheet" href="/assets/home/common/fancybox/jquery.fancybox.min.css" type="text/css" />   
        <!-- Theme Style -->
        <link href="/assets/home/css/style.css" rel="stylesheet" type="text/css">
Solution

  • Instead of just including the files in component html files just import them in style.css (global style.css) like 

    @import "/assets/home/common/fancybox/jquery.fancybox.min.css";

    Look at the following reference