Search code examples
angulartypescriptlazy-loadingangular-routingangular-module

Angular - Refused to apply style from '<URL>'

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>
Solution

  • 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.