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)
-
0
Hi @timmackey, can you share the approaches/solutions that you have tried?
-
0
Since my original post I have continued to try more potential solutions:
- modified src/index.html
<link rel="stylesheet" href="../node_modules/@fortawesome/fontawesome-pro/css/all.css">- removed
rel="stylesheet", - replaced
hrefwithsrc, - replaced
all.csswithall.min.css
- removed
- added
<base href="/">before any<link .. > - 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?
- modified src/index.html
-
0
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
Hi @exlnt
- Are you having the same problem with fortawesome or are you getting the error message about MIME type ?
- Is your project Angular or JQuery ?
-
0
@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
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
@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"> -
0
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.svgIf 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 esm5In 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?
-
0
Hi,
Could you check if you have below config in your tsconfig.json ?
"angularCompilerOptions": { "enableIvy": true }
