9

My Ionic build was working perfectly up until I wanted to test on my iPhone, so I stopped my server, 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...

How can I fix this problem?

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Simon
  • 2,498
  • 3
  • 34
  • 77

9 Answers9

6

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

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 every time on the initial ionic serve.

Check out the full answer here

Junaid
  • 4,682
  • 1
  • 34
  • 40
2

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.

Christo Goosen
  • 566
  • 4
  • 11
  • I think this one needs to get a few more upvotes as this appears to be linked to web pack and adjusting the version as @Christo Goosen suggests worked perfectly. – Indy-Jones Aug 27 '19 at 02:18
1

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
Tomas Schier
  • 407
  • 5
  • 16
0

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.

Iavor
  • 1,997
  • 16
  • 27
Izas
  • 19
  • 5
0

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. :(

Meryan
  • 1,285
  • 12
  • 25
0

I changed my base href in my index.html from

<base href="./" />

to

<base href="/" />
Mo D Genesis
  • 5,187
  • 1
  • 21
  • 32
-1

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.

Christo Goosen
  • 566
  • 4
  • 11
  • Thanks for the comment.. but my `build/main.css` is being linked like this: `` inside of `index.html` is that not correct? – Simon Feb 25 '18 at 19:37
  • That should be fine to be honest. Still try type="text/css". Otherwise a wild guess is around CORS settings: https://blog.ionicframework.com/handling-cors-issues-in-ionic/ – Christo Goosen Feb 26 '18 at 22:15
-1

Perhaps not the best strategy to solve this problem, but what worked for me was creating a new blank project, installing all extra plugins by hand, and then replacing the whole src folder to this new project. Some adjusting may be required for files config.xml and package.json.

In commands that is:

~user/DevFolder/ $ ionic start DummyProject blank
~user/DevFolder/ $ cd DummyProject
~user/DevFolder/DummyProject/ $ ionic cordova plugin add cordova-plugin-advanced-http
~user/DevFolder/DummyProject/ $ rm -fr src
~user/DevFolder/DummyProject/ $ cp -r ../FailingProject/src .
~user/DevFolder/DummyProject/ $ ionic serve -lcs

For the commands I used ~user/DevFolder as the folder where all your projects live, and cordova-plugin-advanced-http as the plugin. Remember to answer Y when the command line requires it.

At least for me the problema was solved, but no idea why this happened. Hope it helps.

JSantaCL
  • 500
  • 4
  • 12
-1

I found the solution to fix it but don’t know the ultimate cause of this. Solution -> Just go to any of the .ts files like user.ts or app.ts and press ‘CTRL+S’. Now it will automatically again build and serve your app and once build is finished ,your app will run fine.

You will have to do this each time you write fresh ‘ionic serve’ in terminal. But not required if automatically build during development cycle on pressing ‘CTRL+S’.

Mr. Vij
  • 1