Importing JQuery Plugin Into Angular 2+ Refused To Execute Script Because Its MIME Type ('text/html') Is Not Executable

I need to load a JavaScript (jQuery plugin) in an HTML file. But it doesn't seem to be working. This is running on Angular-CLI server (ng serve) Here's the HTML.

Solution 1:

Try putting your js script in the src/assets folder. Then it should be served with correct mime type by the development server

Then reference it like below

<script src="/assets/scripts/test.js" type="text/javascript"></script>

Rather than including jquery and your script in index.html, you could add the files to the "scripts" properties of angular-cli.json (or angular.json if using angular 6)

"scripts":
 [
      //include jQuery here, e.g. if installed with npm
      "../node_modules/jquery/dist/jquery.min.js" ,
      "assets/scripts/test.js"
 ]

Note: Don't forget to restart ng serve after modifying the .angular-cli.json or angular.json files

Solution 2:

I encountered with the similar issue

and resolved by a simple change in index.html file

<base href="./"> // remove dot (.) and your app will execute scripts

Share