When trying to access a child component directly in production mode (using ng serve --prod), it fails to load the CSS file as it attempts to fetch it from a nested path. For example, when navigating to "localhost:4200/doc/", the CSS Request URL is:
localhost:4200/doc/styles.6eab038f040a1c7c7ed6.css.
An error message is displayed:
Refused to apply style from 'http://localhost:4200/doc/styles.6eab038f040a1c7c7ed6.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
However, when accessing the root (localhost:4200), the CSS loads correctly. The issue only arises when directly navigating to a child component while in production mode, and does not occur on the development server. No changes have been made to the default settings regarding styles.css.
"styles": [
"src/styles.css"
],
Any ideas on what could be causing this problem?
Edit
I discovered that the issue occurs specifically when navigating to nested routes (thanks to the reply from mikegross).
The problem does not occur on routes without nested parameters, but on routes with nested parameters (such as 'doc/:id'), it does.
Router module:
const routes: Routes = [
{ path: '', redirectTo: 'list', pathMatch: "full"},
{ path: 'list', component: ListComponent},
{ path: 'doc/:id', component: DocumentComponent},
{ path: '**', redirectTo: ''},
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Update (Feb. 28)
Since my project was still relatively small, I created a new Angular project, installed the same dependencies, and copied the code over. Surprisingly, in the new project, the problem did not occur. The only noticeable difference was a minor version update (ng 9.0 to 9.1).