In the process of developing my angular project, I've integrated pre-designed HTML templates. Implementing lazy loading for page loading has led to an issue where the CSS appears distorted, as shown in the attached gif image. https://i.sstatic.net/7UZr5.gif
To provide a common navigation bar and footer across components, I have created separate navbar and footer components with all necessary CSS links included. Here is a snippet from my homepagecomponent.html file:
<app-basehome></app-basehome>
<app-navbarhome></app-navbarhome>
<body>
// Remaining HTML content
</body>
<app-footerhome></app-footerhome>
Seeking assistance in understanding the cause of this issue and potential solutions, I suspect it could be related to lazy loading implementation.
The routing setup within my app.routing module is as follows:
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 { }
CSS files are stored in the src/assets folder with corresponding links provided in the following manner:
<!-- 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">