web-dev-qa-db-fra.com

Angular 8 ng-build lançant une erreur MIME avec cordova

Lors de l'exécution de ng build --prod --base-href ./ pour la construction de mon application cordova, la sortie finale génère une erreur comme ci-dessous.

Échec du chargement du script de module: le serveur a répondu avec un type MIME non JavaScript de "". Une vérification stricte du type MIME est appliquée pour les scripts de module par spécification HTML.

J'ai fini par corriger cela en changeant le module de type en texte/javascript

src = "runtime-es2015.858f8dd898b75fe86926.js" type = "module">

src = "runtime-es2015.858f8dd898b75fe86926.js" type = "text/javascript">

Y a-t-il quelque chose qui peut être fait dans le fichier angular.json pour corriger ou est-ce que je manque quelque chose ici?

22
Nidhin Joseph

J'ai eu le même problème.

  1. Créé un nouveau projet.
  2. Construit une version de production

      "build-production": "ng build --configuration=production --extract-css=false --prod --aot"
    
  3. Déployé sur NGINX

  4. Page blanche sans contenu entre les balises dans Chrome Inspecteur d'élément

Fix

Mettre à jour tsconfig.json

        "target": "es5",

Reconstruisez ensuite l'application et déployez à nouveau.

Cette solution a fonctionné pour moi, j'ai maintenant du contenu dans mon application déployée.

J'espère que ça aide quelqu'un

18
englishPete

J'ai ce même problème (similaire) lors de la création d'une application angular/électron.

Je suis les étapes ici:

https://alligator.io/angular/electron/

et je reçois juste un écran vide (blanc) lorsque je lance l'application d'électrons. Lorsque vous inspectez l'application avec des outils de développement, vous obtenez une poignée de messages d'erreur dans la console comme:

Impossible de charger le script du module: le serveur a répondu avec un type MIME non JavaScript de "". Une vérification stricte du type MIME est appliquée pour les scripts de module par spécification HTML.

Ceux-ci apparaissent sur toutes les inclusions JS présentes dans le fichier dist/index.html.

Je dois parcourir manuellement toutes les balises de script (comme ceci):

<script src="runtime-es2015.858f8dd898b75fe86926.js" type="module">

et modifiez-les pour inclure un type MIME:

<script src="runtime-es2015.858f8dd898b75fe86926.js" type="text/javascript">

Ce n'est qu'alors que cela fonctionne à l'intérieur de la fenêtre des électrons. Si je lance un projet en utilisant "ng serve", et que je regarde la page Web servie par angular, alors cela fonctionne très bien.

Je pense que c'est quelque chose à voir avec les fichiers chargés localement à partir du système de fichiers et ne fournissant pas de type MIME, alors que lorsqu'ils sont servis à partir d'un serveur Web, un type MIME est fourni.

8
John

Vous devez changer la propriété "target" dans le fichier "tsconfig.json" en "es5". Lisez cette entrée de blog, "Chargement différentiel par défaut":

https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27

Cette propriété choisit entre JavaScript moderne ou hérité en fonction des capacités du navigateur:

<script type="module" src="…"> // JS moderne

<script nomodule src="…"> // Legacy JS

7
Ameen Rashad

Jamais utilisé Cordova, mais rencontré le même problème avec Nginx. La solution que j'ai implémentée (sans la régression proposée par la solution acceptée): ajouter "module" aux types MIME . Voir question connexe

1
jbh

J'ai réussi à faire fonctionner mon application Electron (avec Angular 8) en modifiant le fichier de la liste des navigateurs dans le répertoire racine. Comme pour votre message, j'avais aussi des problèmes avec les types MIME.

J'ai ajouté Chrome >= 70 and Chrome <= 72 au fichier étant donné que la dernière instance de Chromium dans Electron est 72. Semblait faire l'affaire.

Edit: Je me rends compte que vous utilisez Cordova et je ne sais pas très bien sur quoi il s'appuie (par exemple Chromium). Dans ce cas, essayez de modifier votre liste de navigateurs pour refléter les versions antérieures des navigateurs. Vous pouvez trouver les requêtes nécessaires pour y parvenir ici: https://github.com/browserslist/browserslist

J'espère que cela t'aides. Ça m'a donné pas mal de tête.

1
Justin Jackson