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

14
  • I've mentioned that I'm not using any library and I've already removed any comments in my stylesheets Commented Dec 24, 2018 at 10:58
  • Try adding <base href="/"> in your HTML <head> (from github.com/froala/angular-froala/issues/…) Commented Dec 24, 2018 at 11:01
  • when I use <base href="/"> nothing works so I changed it to <base href="./"> and this works fine as long as I'm not viewing a child component Commented Dec 24, 2018 at 11:03
  • Did you try adding it to the styles attribute in angular.json and removing the <link> tag from the html? "styles": ["src/styles.scss"], Commented Dec 24, 2018 at 11:06
  • 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. Commented May 26, 2019 at 0:13

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.