Menu
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.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<base href="/">
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="./test.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
I get this error:
Refused to execute script from 'http://localhost:8080/test.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I found this question, where the solution seems to be correcting the type attribute, but that didn't fix it for me. I tried text/javascript and application/javascript.
What do I need to do here?
EDIT: The network console shows a 404 error for the script. Says the request has no response data available. Content type says text/html; charset=utf-8
NOTE: I originally posted this as a more minimal example than my actual code, as I didn't think it had to do with Angular CLI server. That may be the case, so I restored my example to the actual code I have.
936
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
135
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
