ionic/angular2 - Refused to apply style from '

Question

My ionic build was working perfectly up until I wanted to test on my iPhone so I stopped my server and then did a ionic serve --address localhost and I noticed that my stylesheet wasn't loading anymore... so I killed the server again went back to ionic serve and the error persisted..

(index):1 Refused to apply style from 'http://localhost:8100/build/main.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I've tried clearing the the cache on localhost:8100 and rebuilding the project but the error remains...

Any ideas? I'm pretty much stuck until this gets resolved :(

Edit: The way I ended up fixing it might not be the best.. but at least it works again. I just went into my github repository for my app downloaded the main.css and pasted it into the build folder and I've not had a problem since.

Answer 1

FYI ran into exactly the same issue after I upgrade webpack. My version of webpack was ^3.11.0, then went to 4.x.x which caused a lot of issues. Recommend you downgrade webpack until ionic supports the newer version of webpack.

Answer 2

I had the same problem, with Ionic 3.

For a solution to the problem I add the type in the corresponding tag like this:

<script type="application/javascript" src="assets/js/lalalala.js"></script>
<script type="application/javascript" src="assets/js/lalala.js"></script>

(In my case the problem was with JS) Then, is needed restart the app with "ionic serve" , else the problem persist.

Answer 3

I believe there may be some compatibility problems with Webpack (or other packages). This seems to have be introduced with the @ionic/app-scripts version 3.2.*. Use any version up to 3.1.11 and this problem does NOT occur. I would suggest do the following:

• in your package.json change the version of @ionic/app-scripts to "@ionic/app-scripts": "^3.1.11"
• delete the package-lock.json file
• delete your node_module folder
• run npm install
• ensure that the version of @ionic/app-scripts is lower than 3.2

Answer 4

In my case just saving my index.html got rid of the problem.

Also, I am having to undo (delete) my symbolic links and use actual copies of folders from a similar sister project. :(

Answer 5

You need to have a look in your index.html file and look for . Like it says in the error message yours must be set to instead of .

Your css is being imported as the wrong type.

Answer 6

I followed these instructions which were posted on ionic framework forum.

Steps: serve your project with ionic serve and then just change any .ts file and save it (ctrl+s) and it will automatically build again and serve the app & error will be resolved, hopefully :).

Note: you have to do this everytime on the initial ionic serve

check out the full answer here