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

<scriptsrc="/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