1

I am working on an angular application and trying to lazy load a module called ProjectsModule the projects component is shown without any problems and when I navigate to a project like /projects/1 it's all right until I hit refresh.
when I click the refresh button in the browser the style of the page becomes messy(some styles are lost and the main layout of the page is broken) with the error: (8 times with a different url everytime)

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.

and stays broken until I go to another page and hit refresh again.
NOTE: the error doesn't appear in any component except this one.

this is my code:
"app-routing.module.ts":

const routes: Routes = [
// some 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,
    // my 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 component called "SingleProjectComponent" contains nothing for now and it has static html elements in "single-project.component.html" and nothing special.
if there is any code that I didn't show please tell 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>
muaaz
  • 101
  • 11
  • can you post the app.component.html code here?, i think you need to add type="text/css" in link tag for css import. – Krunal Limbad Mar 26 '22 at 20:28
  • @KrunalLimbad app.component.html contains just `` but I added the link tags in index.html and the all have `type="text/css"` – muaaz Mar 26 '22 at 20:31
  • sorry my bad, please post index.html code – Krunal Limbad Mar 26 '22 at 20:32
  • @KrunalLimbad I just added it. – muaaz Mar 26 '22 at 20:38
  • 1
    All seems ok, can you please check this [solution](https://stackoverflow.com/a/50668792/8062856) ? – Krunal Limbad Mar 26 '22 at 20:42
  • I checked the solution you mentioned but it didn't solve the problem, but the urls to the style files in the error contains /projects/ like: `http://localhost:4200/projects/assets/css/style.css` but the real one is without 'projects', so why it's like this? – muaaz Mar 26 '22 at 20:58

1 Answers1

2

I solved the problem by adding '/' to the beginning of every link tag href in index.html file.
so they are now like this:

<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" />

so the path was relative to the current module no to the base.

muaaz
  • 101
  • 11
  • 1
    While this does solve your problem, you should ideally not be referencing CSS like this at all and instead be using Angular's asset bundler. – MindingData Mar 26 '22 at 22:04
  • @MindingData I actually tried to do that before but that didn't work because there are some files that are imported in the style files by urls relative to their path not to my app path (many file not found errors) so instead of changing tens of urls in the style I decided to import it in index.html. – muaaz Mar 27 '22 at 08:01