web-dev-qa-db-fra.com

Importation du plug-in jQuery dans Angular 2+ a refusé l'exécution du script car son type MIME ('text / html') n'est pas exécutable.

Je dois charger un JavaScript (plug-in jQuery) dans un fichier HTML. Mais cela ne semble pas fonctionner. Ceci est exécuté sur un serveur CLI-Angulaire (serveur) Voici le code 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>

Je reçois cette erreur:

Refusé d'exécuter le script à partir de ' http: // localhost: 8080/test.js ' car son type MIME ('text/html') n'est pas exécutable et la vérification de type MIME stricte est activée.

J'ai trouvé cette question , où la solution semble corriger l'attribut type, mais cela ne m'a pas résolu le problème. J'ai essayé text/javascript et application/javascript.

Que dois-je faire ici?

EDIT: la console réseau affiche une erreur 404 pour le script. Dit que la demande n'a pas de données de réponse disponibles. Le type de contenu dit text/html; charset=utf-8

REMARQUE: j’avais initialement publié cet exemple comme un exemple plus minimal que mon code réel, car je ne pensais pas qu’il était lié à Angular CLI. C’est peut-être le cas, j’ai donc restauré mon exemple au code réel que j'ai.

javascriptjqueryhtmlangular
8
BBaysinger

Essayez de placer votre script js dans le dossier src/assets. Ensuite, il devrait être servi avec le type mime correct par le serveur de développement

Puis référence comme ci-dessous

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

Plutôt que d’inclure jquery et votre script dans index.html, vous pouvez ajouter les fichiers aux propriétés "scripts" de angular-cli.json (Ou angular.json Si vous utilisez angular 6)

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

Note: N'oubliez pas de redémarrer ng serve Après avoir modifié les fichiers .angular-cli.json Ou angular.json

13
David

J'ai rencontré le même problème

issue

et résolu par un simple changement de index.html fichier

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