6

When I reload my angular children component the page gets white and I'm getting an error

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.

So as long as I route through my page by clicking buttons that change my routerLink everything works.

Update

I have this error only in production mode so when I use ng serve I can reload my page and I don't get any errors and in the Developer Tools I also see all files in the Source tab, which is not the case when I inspect the page in production mode

I've already

  • changed

    <link rel="stylesheet" href="styles.9eca5df2f679ed98933c.css">

    to

    <link rel="stylesheet" type="text/css" href="styles.9eca5df2f679ed98933c.css">

  • build my project with vendorChunk=true in my angular.json

  • commented every related html and css out

  • removed any comments in my stylesheets

  • set encapsulation: ViewEncapsulation.None on both, parent and child

  • checked <base href="/"> in my index.html <head> tag and changed it to <base href="./"> because otherwise nothing works

I guess there is no stylesheet at [URL] but I don't know why and how I can specify the URL to the related stylesheet, because styleUrls: ['./dashboard.component.css'] in the @Component-Decorator does obviously not work when I build my project in production mode (--prod).

By the way I don't use any external stylesheets, as this may be the cause of my error I found out when I searched for this problem.

This error only occurs on children components with the following routes:

/<parent>/:id/<child>

to which a navigate by

this.router.navigate(['../server/' + guild.id + "/dashboard"], { relativeTo: this.route });

in every browser

I would be grateful for any help

Crentix
  • 61
  • 6
  • I've mentioned that I'm not using any library and I've already removed any comments in my stylesheets – Crentix Dec 24 '18 at 10:58
  • Try adding `` in your HTML `` (from https://github.com/froala/angular-froala/issues/170#issuecomment-386117678) – zer0 Dec 24 '18 at 11:01
  • when I use `` nothing works so I changed it to `` and this works fine as long as I'm not viewing a child component – Crentix Dec 24 '18 at 11:03
  • Did you try adding it to the `styles` attribute in angular.json and removing the `` tag from the html? `"styles": ["src/styles.scss"],` – zer0 Dec 24 '18 at 11:06
  • this is the case by default (for me). The `` tag is created when I build the project in `production mode` (--prod) and `"styles": ["src/styles.css"]` is presented in the `angular.json` – Crentix Dec 24 '18 at 11:09
  • Could you try setting `encapsulation: ViewEncapsulation.None` on the child component? – zer0 Dec 24 '18 at 11:18
  • I tried this as well and it didn't work. And this won't be a good solution by the way, because it will make the styling globally and this is not what I want – Crentix Dec 24 '18 at 11:50
  • https://github.com/angular/angular-cli/issues/10325#issuecomment-402050207 – zer0 Dec 24 '18 at 11:58
  • Unfortunately it doesn't work. I've a similar error but not the exact same. In my case the MIME type is not supported and in the discussion you've sent the MIME type is not executable – Crentix Dec 24 '18 at 12:06
  • Is this the issue with every browser? – zer0 Dec 24 '18 at 12:07
  • Yes it is in every browser – Crentix Dec 24 '18 at 12:15
  • I wonder if it has something to do with the path of your CSS. – zer0 Dec 24 '18 at 12:22
  • I think so. But I don't know how to specify the path correctly in angular or if it is already correct and I changed something else so the browser can't find it. But I mentioned this in my post – Crentix Dec 24 '18 at 12:25
  • 1
    Hopefully you've resolved this by now, but my two cents... Maybe it's getting a 'text/html' MIME type because a 404 HTML response page is being returned instead of the stylesheet. If so, that seems to indicate a path issue, possibly in the angular.json config. – Dale Harris May 26 '19 at 00:13

0 Answers0