Open Closed

Refused to apply style due to unsupported MIME type #6202


0
timmackey created

Refused to apply style from 'http://localhost:4200/node_modules/@fortawesome/fontawesome-pro/css/all.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

...message is displayed in Chrome Version 71.0.3578.98 browser debug console, and icons are not visible for AspNetZereo release 6.4.0. AspNetZero release 6.2.0 does not display this message and all icons are visible.

I read the other 3 issues related to this, and was unable to apply any of those solutions to solving my issue. Starting with a clean database does not solve the issue either. I've also attempted other solutions found in places like github and stackoverflow - without success. The issue is related to "pro" icons only. Non-pro icons display normally.

What is required to fix this issue?


10 Answer(s)
  • 0
    ryancyq created

    Hi @timmackey, can you share the approaches/solutions that you have tried?

  • 0
    timmackey created

    Since my original post I have continued to try more potential solutions:

    1. modified src/index.html <link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-pro/css/all.css">
      1. removed rel="stylesheet",
      2. replaced href with src,
      3. replaced all.css with all.min.css
    2. added <base href="/"> before any <link .. >
    3. copied the entire @fortawesome folder to src/assets folder and changed index.html to <link rel="stylesheet" href="./assets/@fortawesome/fontawesome-pro/css/all.min.css">.

    Item 3. does fix the issue, but isn't an ideal solution, since the 'assets' folder is reserved for modifed vendor-supplied components, and it's another setup setp. It will be OK as an interim solution during development. Still, it begs the question, what changed from 6.2.0 to 6.4.0 that would cause the error message and non-functionality?

  • 0
    ismcagdas created

    Hi @timmackey

    What was the original usage causing error for you ? Normally you can't directly use content under node_modules folder in your app.

  • 0
    exlnt created

    @timmackey - I am having this exact same issue too on my hosted app. Can you tell me the exact folder/file you changed in your solution #3? I cannot seem to find such a link entry anywhere in my solution.

  • 0
    ismcagdas created

    Hi @exlnt

    1. Are you having the same problem with fortawesome or are you getting the error message about MIME type ?
    2. Is your project Angular or JQuery ?
  • 0
    exlnt created

    @ismcagdas - I'm getting just mime error from what I can see I don't see any fontawesome related error I'm using the. Net core Jquery MVC template.

  • 0
    timmackey created

    @ismcagdas - Please refer to #5527 for installation and usage. The fonts have been working since August with versions 5.6.0 and 6.2.0.

  • 0
    timmackey created

    @exInt - solution #3 file is src/index.html. You create the link yourself. My project type is Angular / Core.

  • 0
    ismcagdas created

    Thanks @timmackey

    This problem might be related to angular-cli. You shouldn't use files fron node_modules directly actually in your index.html file.

    You can add content of font-awesome (css and font files) to angular.json just like we do for abp.signalr-client.js. angular-cli will copy the specified files to output assets folder for you. Then you can use those files from assets folder of your app in the index.html.

    Here is the usage I'm talking about https://github.com/aspnetzero/aspnet-zero-core/blob/dev/angular/angular.json#L24

  • 0
    timmackey created

    @ismcagdas - The solution you suggested solves the problem. Thank you.

    Added the following to angular.json:

    "glob": "**/*",
    "input": "node_modules/@fortawesome",
    "output": "/assets/@fortawesome"
    

    and this to index.html:

    <link rel="stylesheet" href="./assets/@fortawesome/fontawesome-pro/css/all.css">