Issue
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.
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
Answered By - Shubh
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.