I'm currently working on an Angular application and attempting to lazy load a module called ProjectsModule. The projects component is displayed without any issues, but when I navigate to a specific project like /projects/1, everything looks fine until I hit refresh.
After clicking the refresh button in the browser, the page's style becomes distorted (some styles are missing, and the overall layout is broken) with the following error message appearing multiple times with different URLs:
Refused to apply style from '<URL>' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
The broken layout persists until I visit another page and refresh again.
NOTE: This error only occurs in this particular component.
This is my code:
"app-routing.module.ts":
const routes: Routes = [
// other routes here
{path: 'projects', loadChildren: () => import('./views/projects/projects.module').then(m=>m.ProjectsModule)},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
"app.module.ts":
@NgModule({
components: [
App.component.ts,
// other components
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
ProjectsModule,
// other modules
],
bootstrap: [AppComponent]
})
export class AppModule { }
"projects-routing.module.ts":
const routes: Routes = [
{path: '', component: ProjectsComponent},
{path: ':projectId', component: SingleProjectComponent}
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
exports: [RouterModule]
})
export class ProjectsRoutingModule { }
"projects.module.ts":
@NgModule({
declarations: [ProjectsComponent, SingleProjectComponent],
imports: [
CommonModule,
ProjectsRoutingModule,
// other modules
],
exports: [ProjectsComponent, SingleProjectComponent]
})
export class ProjectsModule { }
The "SingleProjectComponent" contains only static HTML elements in "single-project.component.html" for now. None of which seem out of the ordinary.
If there's any additional code that I may have missed, please inform me in the comments.
EDIT: "index.html":
<!doctype html>
<html lang="en">
<head>
<title>Eline</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="author" content="Eline">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<meta name="description" content="Eline">
<!-- favicon icon -->
<link rel="shortcut icon" href="assets/images/favicon.png">
<link rel="apple-touch-icon" href="assets/images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/images/apple-touch-icon-114x114.png">
<!-- style sheets and font icons -->
<link rel="stylesheet" type="text/css" href="assets/css/font-icons.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/theme-vendors.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />
<link rel="stylesheet" type="text/css" href="assets/css/responsive.css" />
<base href="/">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body data-mobile-nav-trigger-alignment="right" data-mobile-nav-style="full-screen-menu" data-mobile-nav-bg-color="#33343a">
<app-root></app-root>
</body>
</html>