Base solution for your next web application
Open Closed

Refused to apply style due to unsupported MIME type #6202


User avatar
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?


12 Answer(s)
  • User Avatar
    0
    ryancyq created
    Support Team

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

  • User Avatar
    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?

  • User Avatar
    0
    ismcagdas created
    Support Team

    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.

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

  • User Avatar
    0
    ismcagdas created
    Support Team

    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 ?
  • User Avatar
    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.

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

  • User Avatar
    0
    timmackey created

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

  • User Avatar
    0
    ismcagdas created
    Support Team

    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

  • User Avatar
    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">
    
  • User Avatar
    0
    timmackey created

    ANZ version 8.5.0 angular/.net core

    The above solution has appeared to work for a long time, Now I'm migrating from 8.4.0 to 8.5.0 'npm start' for ver 8.4.0 is a clean build with no conflict warnings or "Compiling" messages.

    For ver 8.5.0, when the "glob": ... etc. is included in angular.json I'm getting warnings for 'npm start', as follows:

    WARNING in Conflict: Multiple assets emit different content to the same filename fa-brands-400.eot
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-regular-400.eot
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-solid-900.eot
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-brands-400.woff2
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-regular-400.woff2
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-solid-900.woff2
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-brands-400.woff
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-regular-400.woff
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-solid-900.woff
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-brands-400.ttf
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-regular-400.ttf
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-solid-900.ttf
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-brands-400.svg
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-regular-400.svg
    WARNING in Conflict: Multiple assets emit different content to the same filename fa-solid-900.svg
    

    If I DO NOT include the "glob" solution, the WARNINGs do not appear, however the following messages appear:

    Compiling primeng/dom : module as esm5
    Compiling @angular/cdk/keycodes : module as esm5
    Compiling @angular/animations : module as esm5
    Compiling ngx-bootstrap/chronos : module as esm5
    Compiling @angular/compiler/testing : module as esm5
    Compiling ngx-bootstrap/mini-ngrx : module as esm5
    Compiling @angular/core : module as esm5
    Compiling ngx-bootstrap/locale : module as esm5
    Compiling @angular/common : module as esm5
    Compiling @angular/cdk/collections : module as esm5
    Compiling @angular/animations/browser : module as esm5
    Compiling ngx-bootstrap/collapse : module as esm5
    Compiling ngx-bootstrap/utils : module as esm5
    Compiling @angular/cdk/observers : module as esm5
    Compiling @angular/core/testing : module as esm5
    Compiling @angular/cdk/accordion : module as esm5
    Compiling @angular/cdk/platform : module as esm5
    Compiling @angular/router : module as esm5
    Compiling @angular/cdk/bidi : module as esm5
    Compiling primeng/button : module as esm5
    Compiling @angular/platform-browser : module as esm5
    Compiling @angular/forms : module as esm5
    Compiling ngx-bootstrap/positioning : module as esm5
    Compiling primeng/api : module as esm5
    Compiling @angular/common/http : module as esm5
    Compiling primeng/tooltip : module as esm5
    Compiling @angular/cdk/scrolling : module as esm5
    Compiling primeng/inputtext : module as esm5
    Compiling @angular/platform-browser-dynamic : module as esm5
    Compiling primeng/utils : module as esm5
    Compiling ngx-bootstrap/component-loader : module as esm5
    Compiling @angular/cdk/portal : module as esm5
    Compiling @angular/platform-browser/testing : module as esm5
    Compiling @angular/cdk/a11y : module as esm5
    Compiling @angular/platform-browser/animations : module as esm5
    Compiling primeng/focustrap : module as esm5
    Compiling primeng/messages : module as esm5
    Compiling primeng/progressbar : module as esm5
    Compiling primeng/dropdown : module as esm5
    Compiling @angular/http : module as esm5
    Compiling @angular/common/testing : module as esm5
    Compiling ngx-bootstrap/accordion : module as esm5
    Compiling @angular/platform-browser-dynamic/testing : module as esm5
    Compiling ngx-bootstrap/alert : module as esm5
    Compiling primeng/paginator : module as esm5
    Compiling @angular/platform-server : module as esm5
    Compiling ngx-bootstrap/buttons : module as esm5
    Compiling ngx-bootstrap/carousel : module as esm5
    Compiling ngx-bootstrap/modal : module as esm5
    Compiling ngx-bootstrap/dropdown : module as esm5
    Compiling ngx-bootstrap/pagination : module as esm5
    Compiling ngx-bootstrap/datepicker : module as esm5
    Compiling ngx-bootstrap/rating : module as esm5
    Compiling ngx-bootstrap/progressbar : module as esm5
    Compiling ngx-bootstrap/sortable : module as esm5
    Compiling ngx-bootstrap/tabs : module as esm5
    Compiling ngx-bootstrap/timepicker : module as esm5
    Compiling ngx-bootstrap/tooltip : module as esm5
    Compiling ngx-bootstrap/popover : module as esm5
    Compiling primeng/accordion : module as esm5
    Compiling ngx-bootstrap/typeahead : module as esm5
    Compiling primeng/blockui : module as esm5
    Compiling primeng/autocomplete : module as esm5
    Compiling primeng/breadcrumb : module as esm5
    Compiling primeng/calendar : module as esm5
    Compiling primeng/captcha : module as esm5
    Compiling primeng/card : module as esm5
    Compiling primeng/carousel : module as esm5
    Compiling primeng/checkbox : module as esm5
    Compiling primeng/chart : module as esm5
    Compiling primeng/codehighlighter : module as esm5
    Compiling primeng/colorpicker : module as esm5
    Compiling primeng/chips : module as esm5
    Compiling primeng/confirmdialog : module as esm5
    Compiling primeng/contextmenu : module as esm5
    Compiling primeng/dataview : module as esm5
    Compiling primeng/defer : module as esm5
    Compiling primeng/dialog : module as esm5
    Compiling primeng/dragdrop : module as esm5
    Compiling primeng/dynamicdialog : module as esm5
    Compiling primeng/fieldset : module as esm5
    Compiling primeng/editor : module as esm5
    Compiling primeng/fileupload : module as esm5
    Compiling primeng/fullcalendar : module as esm5
    Compiling primeng/gmap : module as esm5
    Compiling primeng/galleria : module as esm5
    Compiling primeng/inplace : module as esm5
    Compiling primeng/inputmask : module as esm5
    Compiling primeng/inputswitch : module as esm5
    Compiling primeng/lightbox : module as esm5
    Compiling primeng/keyfilter : module as esm5
    Compiling primeng/inputtextarea : module as esm5
    Compiling primeng/megamenu : module as esm5
    Compiling primeng/listbox : module as esm5
    Compiling primeng/message : module as esm5
    Compiling primeng/menu : module as esm5
    Compiling primeng/menubar : module as esm5
    Compiling primeng/orderlist : module as esm5
    Compiling primeng/organizationchart : module as esm5
    Compiling primeng/overlaypanel : module as esm5
    Compiling primeng/multiselect : module as esm5
    Compiling primeng/panel : module as esm5
    Compiling primeng/panelmenu : module as esm5
    Compiling primeng/progressspinner : module as esm5
    Compiling primeng/password : module as esm5
    Compiling primeng/picklist : module as esm5
    Compiling primeng/rating : module as esm5
    Compiling primeng/radiobutton : module as esm5
    Compiling primeng/scrollpanel : module as esm5
    Compiling primeng/sidebar : module as esm5
    Compiling primeng/selectbutton : module as esm5
    Compiling primeng/slidemenu : module as esm5
    Compiling primeng/slider : module as esm5
    Compiling primeng/splitbutton : module as esm5
    Compiling primeng/spinner : module as esm5
    Compiling primeng/steps : module as esm5
    Compiling primeng/tabmenu : module as esm5
    Compiling primeng/terminal : module as esm5
    Compiling primeng/tabview : module as esm5
    Compiling primeng/table : module as esm5
    Compiling primeng/tieredmenu : module as esm5
    Compiling primeng/toast : module as esm5
    Compiling primeng/togglebutton : module as esm5
    Compiling primeng/toolbar : module as esm5
    Compiling primeng/tree : module as esm5
    Compiling primeng/treetable : module as esm5
    Compiling @angular/animations/browser/testing : module as esm5
    Compiling primeng/tristatecheckbox : module as esm5
    Compiling @angular/cdk/clipboard : module as esm5
    Compiling primeng/virtualscroller : module as esm5
    Compiling @angular/cdk/drag-drop : module as esm5
    Compiling @angular/cdk/layout : module as esm5
    Compiling @angular/cdk/text-field : module as esm5
    Compiling @angular/cdk/stepper : module as esm5
    Compiling @angular/cdk/table : module as esm5
    Compiling @angular/cdk/tree : module as esm5
    Compiling @angular/cdk/overlay : module as esm5
    Compiling @angular/common/http/testing : module as esm5
    Compiling @angular/http/testing : module as esm5
    Compiling @angular/platform-server/testing : module as esm5
    Compiling @angular/router/testing : module as esm5
    Compiling angular-gridster2 : module as esm5
    Compiling abp-ng2-module : module as esm5
    Compiling angular2-counto : main as commonjs
    Compiling angular-oauth2-oidc : module as esm5
    Compiling angular2-text-mask : main as commonjs
    Compiling ng2-file-upload : module as esm5
    Compiling ngx-captcha : module as esm5
    Compiling @swimlane/ngx-charts : module as esm5
    Compiling ngx-image-cropper : module as esm5
    Compiling ngx-perfect-scrollbar : module as esm5
    Compiling ngx-bootstrap : module as esm5
    Compiling ngx-spinner : module as esm5
    Compiling primeng : module as esm5
    

    In both cases the same errors for all 15 .eot assets are displayed on the browser console:

    Conflict: Multiple assets emit different content to the same filename fa-brands-400.eot
    .
    .
    .
    

    tsconfig.json had to be changed to accomodate @nth-cloud/ng-toggle.

    {
      "targetComment": "es2015 REQUIRED for @nth-cloud/ng-toggle",
        "angularCompilerOptions": {
            "enableIvy": true
          },
        "compilerOptions": {
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es6", "dom" ],
        "mapRoot": "./",
        "module": "esnext",
        "skipLibCheck": true,
        "moduleResolution": "node",
        "outDir": "../dist/out-tsc",
        "sourceMap": true,
        "target": "es2015",
        "typeRoots": [
          "../node_modules/@types"
        ],
        "baseUrl": ".",
        "paths": {
          "@app/*": [ "./app/*" ],
          "@account/*": [ "./account/*" ],
          "@shared/*": [ "./shared/*" ],
          "@node_modules/*": [ "../node_modules/*" ],
          "@angular/*": [ "../node_modules/@angular/*" ],
          "@metronic/*": [ "./assets/metronic/*" ]
        }
      },
      "exclude": [ "node_modules" ]
    }
    

    The duplicate files apear in: angular\node_modules@fortawesome\fontawesome-pro\webfonts ...and... angular\src\assets\metronic\vendors\global\fonts@fortawesome

    How can the duplication be resolved?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    Could you check if you have below config in your tsconfig.json ?

    "angularCompilerOptions": {
        "enableIvy": true
      }