wake-up-neo.net

Importieren des jQuery-Plugins in Angular 2+ Verweigert die Ausführung des Skripts, da sein MIME-Typ ('text / html') nicht ausführbar ist

Ich muss ein JavaScript (jQuery-Plugin) in eine HTML-Datei laden. Aber es scheint nicht zu funktionieren. Dies läuft auf einem Angular-CLI-Server (ng serve). Hier ist der HTML-Code.

<!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>

Ich erhalte diesen Fehler:

Es wurde abgelehnt, ein Skript von ' http: // localhost: 8080/test.js ' auszuführen, da sein MIME-Typ ('text/html') nicht ausführbar ist und die strikte Überprüfung des MIME-Typs aktiviert ist.

Ich habe diese Frage gefunden, wo die Lösung das type -Attribut zu korrigieren scheint, aber das hat es für mich nicht behoben. Ich habe es versucht text/javascript und application/javascript.

Was muss ich hier machen?

BEARBEITEN: Die Netzwerkkonsole zeigt einen 404-Fehler für das Skript. Sagt, dass für die Anfrage keine Antwortdaten verfügbar sind. Inhaltstyp sagt text/html; charset=utf-8

ANMERKUNG: Ich habe dies ursprünglich als ein minimaleres Beispiel als meinen eigentlichen Code gepostet, da ich dachte, dass es nicht mit Angular= CLI-Server zu tun hat. Das kann der Fall sein, also habe ich meinen wiederhergestellt Beispiel zu dem eigentlichen Code, den ich habe.

javascriptjqueryhtmlangular
8
BBaysinger

Versuchen Sie, Ihr js-Skript in den Ordner src/assets Zu kopieren. Dann sollte es vom Entwicklungsserver mit dem richtigen MIME-Typ geliefert werden

Dann referenziere es wie unten

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

Anstatt jquery und Ihr Skript in index.html aufzunehmen, können Sie die Dateien zu den "Skripteigenschaften" von angular-cli.json (Oder angular.json Hinzufügen, wenn Sie angular verwenden 6)

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

Hinweis: Vergessen Sie nicht, ng serve Nach dem Ändern der Dateien .angular-cli.json Oder angular.json Neu zu starten

13
David

Ich bin auf ein ähnliches Problem gestoßen

issue

und gelöst durch eine einfache Änderung in index.html Datei

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