Je ne suis pas sûr que cela doive être fermé ou envoyé à Stack Overflow pour le moment.
Vous pouvez reproduire ce problème avec une toute nouvelle application "hello world" version 8.02 générée à partir de la CLI.
La même application version 7 a toujours très bien fonctionné et fonctionne toujours sur le stockage Azure.
Donc, étant donné qu'il n'y a vraiment rien que nous puissions faire pour reconfigurer Azure Storege, que pouvons-nous faire pour que les applications de la version 8 s'exécutent là-bas ? Quelque chose a changé qui a brisé cette capacité et l'hébergement gratuit est une très bonne raison d'utiliser Angular. :)

Les applications de la version 8 fonctionnent bien sur un "vrai" serveur Web.

Merci!

@Aurora7Sys

J'ai trouvé la source du problème. Angular 8 supprimé -- type="text/javascript" des balises de script dans index.html. Angular 7 les avait, c'est pourquoi cela fonctionnait avec Azure Storage.

Nous avons également découvert que le téléchargement manuel du portail Azure n'ajoutait pas les métadonnées MIME aux fichiers .js qui étaient téléchargés. Donc... lorsque j'ai téléchargé manuellement mon site Angular 8, les erreurs ci-dessus ont été générées.

J'ai commencé à utiliser Visual Studio Code pour publier mes applications Angular 8 sur Azure Storage et cela fonctionne car l'extension de publication ajoute les métadonnées MIME correctes aux fichiers.

Microsoft cherchera à corriger le téléchargement manuel du portail Azure pour ajouter les métadonnées MIME afin que cela ne puisse pas se produire sur leur serveur.

Merci pour la mise à jour @kdawg1406.
J'allais commencer à creuser à partir de index.html, mais cela fait gagner beaucoup de temps !!

Même problème ici, et toujours pas de solution évidente ? Prod build téléchargé sur Github Pages ne fonctionne pas non plus.

@ lion9 ma solution ci-dessus ne fonctionne-t-elle pas pour vous ? Comment publiez-vous votre application sur le serveur ? J'ai utilisé VS Code et cela a résolu mon problème.

@ lion9 ma solution ci-dessus ne fonctionne-t-elle pas pour vous ? Comment publiez-vous votre application sur le serveur ? J'ai utilisé VS Code et cela a résolu mon problème.

J'ai essayé de le télécharger sur Github Pages, pas de chance. Il semble que peu importe l'outil que j'utilise - Webstorm ou VS Code - cela ne fonctionnera pas :-( Voir ici - https://lion9.github.io/test/

@ lion9 comprend. Divulgation complète, ma solution a fonctionné pour moi car l'extension de code VS qui effectue le téléchargement vers le stockage Azure Blob a appliqué les métadonnées correctes aux fichiers .js.

Angular 8 publie les fichiers .js différemment. Si vous comparez un Angular 7 index.html avec Angular 8 index.html, les scripts au bas du fichier sont différents. Les fichiers Angular 7 .js ont le type="text/javascript" où les fichiers de script Angular 8 index.html n'ajoutent pas cela.

Angulaire 7
<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js"></script>

Je pense que c'est la racine du problème, recommandez de contacter GitHub et demandez-leur comment vous pouvez appliquer les métadonnées requises aux fichiers.

Peut-être pouvez-vous essayer d'ajouter le type="text/javascript" aux balises de script qui n'ont pas d'attribut type ? Si je me souviens bien, la moitié des fichiers ont l'attribut, les autres non.

Bien cordialement, Karl

Ce problème est posté sur Stack Overflow , mais pas encore de résolution, merci !

J'ai eu le même problème lorsque j'héberge les fichiers sur AWS S3. Le problème vient du "type='module'", j'ai dû le changer manuellement en "type='text/javascript'" pour le faire fonctionner à nouveau.

Pourquoi "type='module'" dans Angular 8, je me demande ? Quel est son avantage par rapport à "type='text/javascript'" ?

@Erayus Je pense que cela a quelque chose à voir avec le fait qu'un navigateur moderne charge le fichier au lieu de l'autre version du fichier.

Je contacterais l'équipe Angular, vous pourriez être à l'origine d'un problème.

Les métadonnées du serveur doivent être appliquées aux fichiers et ils se chargeront correctement.

Je pense qu'Angular a besoin de bien meilleurs documents et tests pour expliquer aux développeurs comment déployer les applications Angular 8.

@kdawg1406 Merci beaucoup !

essayez la liste des navigateurs

Même problème lors de l'empaquetage avec Electron, semble être résolu en définissant type="text/javascript" au lieu de type="module".

Vous devez changer la propriété "target" dans le fichier "tsconfig.json" en "es5". Lisez cet article 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="…"> // Modern JS

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

@btey Je ne vois rien dans le lien que vous avez fourni que la cible suggérée devrait être es5. Au lieu de cela, l'exemple montre es2015 (qui est es6).

Je l'ai résolu en créant une tâche dans gulp, je partage les étapes :

1) npm install --save-dev gulp
2) npm install --save-dev gulp-replace
3) créer à la racine du projet un fichier avec le nom :
gulpfile.js
4) copiez le code dans le _gulpfile.js_ :

const { src, dest } = require('gulp');
var replace = require('gulp-replace')

exports.default = function (cb) {    
    src(['dist/ng-project/index.html'])
        .pipe(replace('type="module"', 'type="text/javascript"'))
        .pipe(dest('dist/ng-project/'));
    cb();
};

5) Dans le fichier packaje.json , modifiez le script _"electron"_ comme suit :
"electron": "ng build --base-href ./ && tsc --p electron && gulp && electron ."
6) exécutez votre projet : npm run electron

note : dans le fichier electron principal, assurez-vous d'aller dans le dossier dist de votre fichier index.html
_ Exemple : _

win.loadURL(url.format({
        pathname: path.join(__dirname, `/../../dist/ng-project/index.html`),
        protocol: "file:",
        slashes: true
        })
    );

C'est un problème lié au serveur Web. Angular 7 incluait un type MIME dans lebalises dans index.html :
<script type="text/javascript" src="runtime.26209474bfa8dc87a77c.js">

Angular 8 n'inclut pas de type MIME dans

@alan-agius4

Pourquoi est-ce fermé ? C'est une régression. ng7 a créé un index.html approprié. Au moins dans certaines situations, ng8 ne le fait pas. Je n'ai pas vu une seule "solution" qui ne soit pas une solution de contournement pour une faille ng8 et sans rapport avec le code du consommateur. ng8 ne devrait pas créer de balises de script ambiguës.

Vous devez définir la prise en charge de votre navigateur de sortie dans le fichier browserslist. Dans ce cas, pour le manque de support dans les navigateurs modernes, vous devriez ajouter quelque chose comme :

Chrome >= 70 and Chrome <= 75

L'ajout de ceci dans votre liste de navigateurs devrait ajouter la prise en charge du chrome et des applications basées sur le chrome.

Pour plus d'informations, vous pouvez voir ce référentiel github. Il a une liste d'autres options pour l'intérieur de la liste des navigateurs https://github.com/browserslist/browserslist

J'ai essayé celui-là, donc pas de chance. Je vais lui donner un deuxième coup lundi car c'est la deuxième fois que je le vois.

Même problème, cela ressemble à un problème ng8 et non à quelque chose qui peut être corrigé du côté du nœud

Bien que cela ne traite que le symptôme, vous pouvez désactiver le chargement différentiel pour gagner du temps pour traiter le problème.

Nous utilisons des pipelines de construction ADO pour déposer des fichiers dans un stockage blob exécutant un site Web statique et doté d'un CDN.

+1

Toujours pas de solution à ce problème ??

Toujours pas de solution à ce problème ??

la solution facile
remplacez simplement target par es5 dans tsconfig,json

"target": "es5",

Ce problème affecte toute personne utilisant Cordova, car Cordova sert finalement des fichiers via le protocole file:// . Je ne peux pas changer mon "serveur" pour servir les fichiers js en tant que text/javascript comme il n'y a pas de serveur. Il y a un problème sur le github de Cordova , mais je ne sais pas si c'est quelque chose que l'équipe de Cordova peut résoudre.

Est-ce que quelqu'un sait s'il existe un support pour les modules file:// avec javascript ?

J'utilise un serveur Web c++ dérivé de https://github.com/eidheim/Simple-Web-Server . Vous pouvez facilement créer un serveur REST c++ rapide avec cela, qui servira votre client angulaire. Lorsque vous demandez un fichier, il envoie simplement le fichier. Aucun traitement. Donc, s'il n'y a pas de métadonnées MIME dans le fichier, il ne les ajoutera pas. Je ne comprends pas pourquoi ce sujet est clos. L'ajout des métadonnées MIME semble assez simple. Et si cela ne vous convient pas, il devrait y avoir une option.

La configuration de NGINX échouait même avec les types mime chargés à partir de /etc/nginx/mime.types.

Finalement, après quelques recherches, en supprimant une option à la fois, j'ai réussi à tracer l'option qui causait les erreurs de types MIME que j'obtenais dans la console. L'a commenté et le contenu de l'alto s'est bien affiché.

`
# This option cause issues with Angular served applications
#          add_header X-Content-Type-Options nosniff;
`

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

J'ai le même problème, est-ce que quelqu'un m'aide, s'il vous plaît, merci beaucoup

btey avait la solution pour construire avec des électrons. Remplacez la cible dans tsconfig.json par es5. Merci bébé

Merci Kdawg ! type='module' est vraiment bizarre, l'hébergement AWS S3 ne fonctionnera pas avec Opera et Chrome (indigestion V8 haha). Merci, solution facile pour tout réparer !!

Changer le type dans index.html

j'ai résolu ce problème dans tsconfig.json
changer la cible en es5 et le module en commonjs

Ex:
{
"compileOnSave": faux,
"Options du compilateur": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": vrai,
"déclaration": faux,
"downlevelIteration": vrai,
"experimentalDecorators": vrai,
"module": "commonjs",
"moduleResolution": "nœud",
"importHelpers": vrai,
"cible": "es5",
"typeRacines": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": vrai,
"strictInjectionParameters": true
}
}

Changer la cible en ES5 n'est pas une solution, c'est une solution de contournement. Cela signifie que le compilateur dactylographié ne peut pas utiliser les fonctionnalités javascript modernes et devra les émuler. Je le corrige en modifiant le fichier index.html généré et en ajoutant le type mime. Pas beaucoup de travail mais une nuisance.

La solution astucieuse de gulp pour corriger le fichier index.html

les gars, ces solutions (cible 'es5', module 'commonjs', ect...) ne fonctionnent même pas pour moi. que puis-je faire d'autre ?

J'ai ceci :

Text color plugin is now built in to the core editor, please remove it from your editor configuration

plugin Context menu plugin is now built in to the core editor, please remove it from your editor configuration 

Refused to apply style from  because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.  ​

J'ai l'impression que toutes les discussions à ce sujet sont en grande partie fermées lorsqu'il s'agit d'un problème valable :
https://github.com/angular/angular-cli/issues/15094

Par curiosité, pour ceux d'entre vous qui changent la cible en es5, ne supportez-vous pas du tout IE11 ? Le changement de cible a résolu le problème avec les navigateurs modernes pour moi, mais maintenant IE11 se trompe sur les fonctions de flèche.

@ santhony7, vous pouvez techniquement écrire du code es5 compatible avec IE11, cela signifie cependant 0 lambdas. en réalité trop de tracas pour être faisable. Pour moi, nous devons toujours prendre en charge Edge, mais IE11 a été abandonné en tant que cible.

changer la cible dans tsconfig.json en "es5" a fonctionné pour moi pour obtenir une application angulaire 8 fonctionnant en électron. merci aux commentateurs ci -

Ce problème persiste. Quel est le plan pour trouver une solution réelle ou une explication sur la façon de l'utiliser ? et le truc bizarre c'est que ça marche sur Edge ! mais pas Chrome. Qui aurait pensé?

J'ai rencontré le même problème
Pendant un mois ou deux, la version angulaire 8 a bien fonctionné pour moi, mais peut-être que les navigateurs ont changé quelque chose et aujourd'hui, la version m'a donné la même erreur.

"module": "esnext", "target": "es2015",

déclassement à :
"module": "es2015", "target": "es5",
et la modification de la syntaxe de chargement paresseux a résolu ce problème, mais il s'agit d'une solution de contournement temporaire.
L'équipe Angular travaille-t-elle sur ce problème ?

mes versions de packages angulaires :
"@angular/cdk": "8.0.2", "@angular/common": "^8.1.1", "@angular/compiler": "^8.1.1", "@angular/core": "^8.1.1",

essayez de définir index.html 404.html : <base href="/">
peut être utile.
https://angular.io/guide/router

Les attributs defer et nomodule ne sont pas identifiables pour le résolveur thymeleaf et ceux-ci ne sont pas bien formatés sur les balises de script index.html car la version angulaire 8 n'est pas très utile pour l'utilisateur qui utilise thymeleaf, veuillez nous donner une solution à ce problème , les autres versions jusqu'à angulaire 7 fonctionnent bien mais cette version ne fonctionne pas comme prévu, merci

Au lieu de désactiver le chargement différentiel en forçant un build es5 , j'ai pu résoudre le problème en définissant la propriété crossOrigin sur le build. Le problème sous-jacent était un bogue Chrome empêchant l'envoi des en-têtes d'authentification avec la demande de fichiers javascript.

Réglages

Spécifiez crossOrigin pour la version de production en modifiant l'élément de ligne de construction dans package.json pour qu'il soit quelque chose comme "build": "ng build --prod --crossOrigin=anonymous .... ou en définissant la stratégie crossOrigin dans la configuration de production de votre fichier angular.json . L'une ou l'autre méthode aura le même effet sur le build.

// file: angular.json
{
    "projects": {
        "your-project-name": {
            "architect": {
                "build": {
                    "configurations": {
                        "production": {
                            //....
                            "crossOrigin": "anonymous"
                            //....
                        }
                    }
                }
            }
        }
    }
}

Explication:

Selon cette question de débordement de pile , il semblerait que lorsque les anciennes versions de Chrome (le problème se produit dans Chrome 70, mais a été résolu dans certaines versions à ou avant Chrome 78) voient un <script src="..." type="module"> , Chrome néglige d'envoyer les en-têtes d'authentification le long avec la demande du fichier de script. En tant que tel, dans de nombreuses situations, le serveur répond avec une exception 404 ou une autre autorisation au lieu de la ressource de script demandée. La page d'erreur reçue aura probablement un type de texte MIME, car il s'agit après tout d'une page d'erreur, et non de la ressource de script demandée.

La définition de l'attribut crossorigin sur le <script src="..." crossorigin type="module"> entraîne l'envoi correct de ces anciennes versions de Chrome avec les en-têtes d'authentification, et donc les ressources de serveur correctes sont renvoyées, au lieu de la page d'erreur 404 / d'authentification susmentionnée.

À l' aide des forces de paramètres de construction ci - dessus angulaires pour ajouter un crossorigin="anonymous" attribut au <script> balises (note crossorigin="anonymous" est identique à un nu crossorigin attribut mentionné dans la question de débordement de pile).

J'utilise Chrome 78 et je sers à partir d'un serveur golang et je rencontre le problème.

Une solution suggérée consistait à définir les balises de script dans index.html sur le type MIME correct. Cela ne fonctionne pas si vous avez un service worker et avez donc des références de script en dehors de index.html. Erreur résultante :

main.3ae3d6ffc19608a068bd.js:1 L'enregistrement du service worker a échoué avec : DOMException : échec de l'enregistrement d'un ServiceWorker pour la portée ('http://localhost:4200/') avec le script ('http://localhost:4200/ngsw-worker. js') : le script a un type MIME non pris en charge (« text/plain »).

Comme d'autres l'ont dit, la rétrogradation vers ES5 n'est pas une vraie solution. TBH Je ne sais pas quoi faire à propos de ce problème. Je ne vais pas passer beaucoup de temps à essayer de trouver une solution de contournement - la rétrogradation vers Angular 7 semble être la bonne chose à faire.

@Gregory-Ledray avez-vous inspecté le contenu de ce qui est réellement renvoyé au navigateur lors de votre demande de ngsw-worker.js à l'aide des outils de développement de votre navigateur pour vous assurer qu'il s'agit bien du javascript attendu ?

@jamesmikesell ngsw-worker.js n'est pas réellement livré au client par lui-même. Je reçois seulement :
main-es ...
polyfill-es ...
runtime-es ...
styles.b ...
manifest.webmanifest

Après quelques recherches, il semble que l'utilisation de "serveur http" fonctionne très bien - il ne rencontre jamais l'erreur dans ce problème. Cependant, utiliser un serveur go pour servir mes fichiers ne fonctionne pas (comme je l'ai décrit dans mon dernier message). En lisant votre commentaire James, il semble que vous vous attendiez à ce qu'il y ait une erreur dans le javascript où mon application demande ngsw-worker.js. Je ne pense pas qu'il y ait une erreur dans mon javascript car s'il y avait une erreur, je m'attendrais à ce qu'il échoue lors de l'utilisation de "http-server". Parce que cela fonctionne avec le serveur http, je pense que le problème réside soit avec Angular 8, soit avec le serveur golang. Étant donné que d'autres affiches ont signalé un problème identique dans ce numéro, je pense qu'Angular 8 est à blâmer.

https://angular.io/guide/deployment#differential -loading

https://angular.io/guide/deployment#differential -loading

Je comprends le concept de chargement différentiel. J'utilise le dernier Chrome qui devrait pouvoir le prendre en charge. Cependant, j'obtiens toujours le message "Impossible de charger le script du module : le serveur a répondu avec un type MIME non JavaScript de "text/plain". message d'erreur lors du chargement du fichier index.html.

J'utilise un simple serveur Web non standard pour cela dans un environnement local, il sert simplement le fichier "en l'état" au navigateur lors d'un get.

J'étais confronté au même problème mais après une heure, j'ai découvert que je jouais également avec apache .htaccess pour router le serveur et il y a une règle qui est RewriteRule ^ index.html qui est la cause du erreur de non-JavaScript MIME type of "text/html"

Lorsque j'ai supprimé cette règle et effectué une actualisation complète, cela fonctionne comme il se doit, donc si vous rencontrez le même problème, vérifiez également le .htaccess pour toute erreur intentionnelle ou non intentionnelle et n'oubliez pas non plus de rafraîchissement dur après l'avoir changé, merci.

Nous avons également résolu le problème côté serveur. Dans notre cas, nous avons modifié un paramètre dans Akamai qui définira toujours le type MIME correct pour les fichiers JS.

J'étais également confronté au même problème, nous utilisons nginx et voyons par les derniers commentaires ici, nous ajoutons sur nginx.conf ces configurations :

http {
    ....
    types {
        # here are additional types
        text/javascript .js;
        module .js;
    }
}

Et nous avons défini la cible de _tsconfig.json_ de "es2015" à "es5"
Tout fonctionne maintenant.

Y a-t-il une mise à jour à ce sujet ? Je n'ai pas le luxe de modifier manuellement le index.html pour inclure script="text/javascript" puisque ng build est exécuté pendant mon pipeline CI/CD.

Comme mentionné ci-dessus, passer à target: es5 est une solution de contournement, pas une solution. Repro repo's ont été fournis. Quelle est la solution ?

salut j'ai une solution qui peut t'aider.

1. Construisez votre application angulaire à l'aide de la commande "ng build --prod"
2. créez un fichier js à l'intérieur du projet racine (ou n'importe où ailleurs convient également, selon l'emplacement auquel vous devez donner le chemin à la 3ème étape). ici, je crée en tant que angularserver.js
3. Écrivez les lignes de code suivantes

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const chemin = require('chemin');

var app = express();
app.use(bodyParser.json());
app.use(cors());

app.listen(4200, () => console.log('serveur démarré 4200'));

app.use(express.static(path.join(__dirname,'./dist/')));
// vous pouvez vérifier dans le dossier dist que vous devez avoir un dossier qui n'est rien d'autre que le nom du projet ;
//donnez le chemin correct si vous créez le fichier js dans un autre emplacement

app.get("*",(req,res)=>{
return res.sendFile(chemin.join(__dirname,'./dist//index.html'));
});

1. puis exécutez maintenant la commande "node angularserver.js"
2. Si vous trouvez une erreur comme le module cors introuvable ou autre chose comme ça, installez simplement ces modules en utilisant "npm install cors --save"
3. exécutez à nouveau node angularserver.js après l'installation, puis accédez au navigateur et exécutez ip:4200

Remarque : la solution ci-dessus est purement basée sur nodejs, j'ai attaché le fichier de construction angulaire dans le chemin nodejs et l'ai exécuté. Ça marche pour moi. Si vous avez un doute faites le moi savoir

Ce problème semble se produire uniquement si le href de base de l'application est défini avec l'indicateur --base-href dans un dossier autre que "/". Aucune des solutions proposées ici ne sera à la rescousse si cela se produit.

Si possible, servez votre application à partir de la racine (/) de votre serveur Web.

$ng build --aot --prod

Omettre --base-href="nom-du-projet"

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

@btey Cela a fonctionné pour moi. Dans la version précédente, vous trouverez, target="es2015". Je viens de supprimer 2015 et d'ajouter 5. target="es5"

2020 et c'est toujours un problème et c'est même fermé ?!?! Aucune des solutions ci-dessus n'a fonctionné pour moi, je ne sais toujours pas ce qui se passe, j'ai une application angulaire - ssr sur nginx

comme @Haritsinh mentionné ci-dessus, je confirme qu'il s'agit d'un problème avec votre serveur, pas ng.
peut-être avez-vous besoin de meilleures règles de réécriture ?
par exemple, une approche extrêmement pauvre et simple pour apache .htaccess serait :
ErrorDocument 404 /index.html

@thel0ner Tout le monde n'utilise pas un serveur Web à part entière. Un index.html généré doit être analysable par un navigateur "en l'état", une modification par le serveur web ne devrait pas être nécessaire. J'exécute le code généré angulairement à partir d'un serveur basé sur https://github.com/eidheim/Simple-Web-Server. Lorsque vous lui demandez index.html, il vous envoie le fichier non modifié. Je ne comprends vraiment pas pourquoi le type mime n'est pas ajouté aux références de script dans le fichier index.html. Quand je les ajoute manuellement, tout va bien, mais c'est une nuisance.

Bonjour à tous,
Je suis d'accord avec le commentaire de @Arno-v : j'utilise AWS S3, via serverless, je ne devrais pas avoir à modifier de configuration mime.
Merci !

@thel0ner a convenu que cela doit être corrigé dans la CLI angulaire. Nous utilisons également S3 pour héberger le site Web. Tout l'avantage d'utiliser un SPA est que vous n'avez pas besoin d'avoir un serveur Web à part entière pour héberger votre application. HTML doit simplement être du texte formaté qui peut être lu par n'importe quel navigateur.

Et honnêtement, ça va être des trucs comme ça qui poussent les gens à réagir/vue

Je veux dire... 100 % histoire vraie, je viens de convaincre le gars qui gère ce projet d'utiliser Angular au lieu de réagir, et maintenant je ressemble à un con car nous ne pouvons même pas déployer l'application.

@dilyandimitrov avez-vous pu trouver le correctif ? car je suis confronté à la même situation que vous (ssr sur nginx).

Enfin, j'ai trouvé la solution à mon problème ici.
https://gist.github.com/soheilhy/8b94347ff8336d971ad0

Ajouter ceci à mon nginx.conf est la seule solution qui a fonctionné pour moi

http {
    types {
      module js;
    }
    include       /etc/nginx/mime.types;
    # rest of your config...
}

J'ai trouvé cette solution ici .

C'est un problème de serveur. Ce problème n'a été remarqué qu'avec la configuration d'Alias ​​Apache.

Sous apache 2.4 :

• J'ai remarqué ce problème lors du déploiement sous le dossier Alias
• MAIS je n'ai pas remarqué ce problème lors du déploiement directement sous le dossier DocumentRoot

Configuration : apache 2.4
Version CLI angulaire : 8.3

Il semble que nous ne puissions pas exécuter une application Angular (à partir de la v8) sous le dossier Alias.
La solution de contournement consiste à déployer sous un vrai sous-dossier.

Considérons l'url finale de my_angular_application
https://www.example.com/my_angular_application

1. Le dossier du serveur nous structure comme suit

/folder_path_related_to_www_example_com
---/my_angular_application
------index.html

1. La commande build est la suivante
   ng build --prod --baseHref /my_angular_application/

2. La configuration d'apache est la suivante

```

Nom du serveur www.exemple.com
DocumentRoot /folder_path_related_to_www_example_com

DirectoryIndex index.html

# Angular part
<Directory "/folder_path_related_to_www_example_com/my_angular_application" >
    Require all granted

    # Angular
    RewriteEngine On
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    RewriteRule ^ /my_angular_application/index.html
</Directory>

```

@ranaivomahaleo Et si vous n'utilisez pas de serveur web dédié comme Apache ? Si vous utilisez un serveur très simple qui ne réécrit pas le fichier index.html généré, mais sert simplement le fichier tel quel ? Dans angulaire 7, ce n'était pas un problème, et maintenant je dois éditer le fichier index.html manuellement après chaque build. Je n'ai pas vu d'explication dans ce fil pour expliquer pourquoi cela ne peut pas être corrigé. Je me semble banal. (en tant que développeur, je suis conscient que les choses ne sont pas toujours aussi simples, mais expliquez au moins pourquoi cela ne peut pas être corrigé)

Je suis d'accord avec certains commentaires ici.

J'utilise moi aussi des outils AWS, comme S3 et CloudFront pour l'hébergement de sites Web et je ne peux pas modifier les paramètres du serveur

Et je ne pense pas que l'utilisation de la cible de construction es5 devrait être une solution permanente

Enfin corrigé dans mon application après quelques essais et erreurs. Dans angular.json , j'ai dû changer mon chemin de sortie en "outputPath": "dist/", - Voir ce commentaire pour une plongée plus profonde

Enfin corrigé dans mon application après quelques essais et erreurs. Dans angular.json , j'ai dû changer mon chemin de sortie en "outputPath": "dist/", - Voir ce commentaire pour une plongée plus profonde

J'ai réussi à résoudre le problème, mais je ne comprends pas pourquoi la modification du répertoire de sortie de build résoudra le problème

J'ai réussi à résoudre le problème, mais je ne comprends pas pourquoi la modification du répertoire de sortie de build résoudra le problème

Moi non plus. C'est le monde de CLI, j'y vis.

J'ai réussi à résoudre le problème, mais je ne comprends pas pourquoi la modification du répertoire de sortie de build résoudra le problème

Moi non plus. C'est le monde de CLI, j'y vis.

Même sans changer le répertoire de sortie, la commande build suivante a le même effet.
ng build --prod --baseHref /dist/

@alan-agius4 pensez-vous qu'il est temps de rouvrir ce problème ?

C'est toujours un problème dans ng9... Le service d'application Azure ne peut pas héberger mon application angulaire car je n'ai pas le contrôle sur les types mime. Sans un correctif valide, nous devrons revenir à ng7 jusqu'à ce que le problème soit réglé

Ce genre de problèmes rend difficile la recommandation d'un nouveau projet

@philtyl ce lien devrait vous aider à configurer un type mime dans les services d'application Azure
https://social.microsoft.com/Forums/Azure/en-US/d3af7fa3-dc2b-415b-b281-333c26f833c5/azure-app-service-mime-type-aac?forum=AzureAPIApps

De plus, @Splaktar a compilé une liste compressée sur la façon d'ajouter des types mime à divers fournisseurs de cloud : https://github.com/angular/angular/issues/35734#issuecomment -593024055

@alan-agius4 J'ai commenté ci - file:// . Aujourd'hui, je suis obligé de désactiver le chargement différentiel et de cibler uniquement es5 pour mes builds Cordova. Si vous avez rouvert ce problème à la recherche de suggestions, voyez-vous un problème avec un autre paramètre dans angular.json pour configurer le type de script ?

Salut @adamdport , je pense que dans votre cas, il serait logique de désactiver le chargement différentiel et de ne servir que les bundles es2015. Cordova Web View utilise Google Chrome sous le capot qui prend en charge la syntaxe es2015, vous ne devriez donc pas avoir besoin des bundles es5.

Ma suggestion serait d'essayer ce qui suit :
1) dans votre tsconfig.json changez la cible de compilation en es2015
2) Mettez à jour le fichier de configuration de la liste des navigateurs pour qu'il ne contienne que la version de Chrome utilisée par l'exemple de Cordova Web View chrome 79

@adamdport C'est malheureusement une limitation de Cordova. Il ne prend pas directement en charge les scripts de module. Même quelque chose comme ce qui suit échouera :

<script type="module">
    import abc from "./xyz.js"
</script>

Pour contourner cette limitation, vous pouvez utiliser ce plugin : cordova-plugin-ionic-webview . Il est utilisé automatiquement avec les applications ioniques mais peut également être utilisé par n'importe quelle application Cordova. Cela simplifie également l'utilisation du routage basé sur le chemin qui peut également vous être utile.

Je rencontre ce problème lors du déploiement d'Angular 8 sur Azure App Service.

J'ai pu contourner ce problème en définissant manuellement l'attribut type pour chaque script et fichier css dans le index.html du dossier de sortie ng build --prod .

par exemple
<script type="application/javascript"></script>
<link rel="stylesheet" type="text/css">

même problème avec le projet 9 :
CLI angulaire : 9.0.6
Nœud : 10.15.2
OS : linux x64

et déployer sur les pages github. essayé es5 sans succès

le code source est ici, si quelqu'un peut m'aider
https://github.com/s0l0c0ding/coming-soon

Pour toute personne utilisant kubernetes et helm nginx-ingress, vous pouvez ajouter le configMap suivant à l'entrée nginx pour résoudre ce problème.

kind: ConfigMap
apiVersion: v1
metadata:
  name: nginx-ingress-controller
data:
  http-snippet: |
    types {
      module;
    }

Certains ont-ils la possibilité de déployer sur S3 ?

J'ai eu le même problème avec le site Angular sur le compte de stockage Azure déployé en tant que site Web statique. La résolution qui a fonctionné pour moi consistait également à définir le chemin du document d'erreur sur index.html. Parce qu'il essaie d'atteindre le contenu par chemin et qu'il n'est pas trouvé, il affiche une page d'erreur.
Cela fonctionne pour moi, essayez-le.

Est-ce que quelqu'un sait si cela est abordé dans la version bêta d'Angular 10 ?

Est-ce que quelqu'un sait si cela est abordé dans la version bêta d'Angular 10 ?

J'utilise Angular: 10.0.0-next.1 et cette solution de contournement sur le compte de stockage Azure fonctionne pour moi.

Lorsque j'ai changé la cible en « es5 », l'application fonctionne dans S3.

J'essaie de déployer sur IIS et aucune des méthodes suggérées ne semble fonctionner. J'ai essayé de changer outputPath , mais cela n'a pas aidé. Changer de cible n'a rien fait non plus. C'est extrêmement frustrant.

Edit : j'ai résolu mon problème, qui n'était pas du tout un problème angulaire. Je travaillais sur Windows avec Git bash , et l'exécution de ng build --prod --base-href=/myapp/ provoquait l'insertion de caractères invisibles dans la partie base-href et gâchait la page. La base href a été définie sur quelque chose comme /C:/Files/Git/..." .

J'ai ajouté la commande à une commande npm dans package.json et j'ai maintenant résolu mon problème. Donc, si vous travaillez sous Windows, validez votre attribut index.html base-href après la construction.

Le problème d'origine était causé par un défaut dans la fonctionnalité de téléchargement du stockage blob du portail Azure. Le portail ne définissait pas correctement les types de contenu lors du téléchargement. Lorsque vous utilisez le stockage objet pour héberger des sites statiques, il est important que les outils utilisés effectuent un téléchargement complet des fichiers, y compris le type de contenu. Des outils propriétaires tels qu'Azure et AWS CLI fournissent cette fonctionnalité. Si vous utilisez des outils personnalisés (utilisation directe de l'API, par exemple) ou des outils tiers, assurez-vous qu'ils effectuent également ces étapes.

La version 8.0 de l'Angular CLI a introduit la fonctionnalité de chargement différentiel. Cela tire parti de la fonctionnalité de script de module dans les navigateurs modernes pour prendre en charge le chargement des scripts appropriés pour différents navigateurs. Les scripts de module offrent la possibilité d'utiliser la dernière fonctionnalité ECMAScript dans les navigateurs pris en charge et sont nécessaires pour utiliser la fonctionnalité d'importation native.

Lors de l'utilisation de scripts de module, la spécification HTML exige que l'en-tête de type MIME/contenu pour les données reçues soit valide. Le type de contenu qui doit être envoyé par le serveur pour les fichiers JavaScript ( .js ) est text/javascript (ou l'un des équivalents trouvés ici ). La plupart des serveurs et des services d'hébergement le feront automatiquement, car les fichiers JavaScript sont un type de fichier courant. Si vous utilisez des services de stockage d'objets pour l'hébergement, les outils propriétaires couramment utilisés pour ces services définiront également le type approprié lors du téléchargement. Il n'y a aucune garantie qu'un navigateur exécutera un script (module ou autre) avec un type de contenu invalide. Cela est particulièrement vrai lorsque vous utilisez des en-têtes liés à la sécurité tels que X-Content-Type-Options=nosniff ( détails ). Même si les scripts de module ne sont pas utilisés, l'en-tête de type de contenu correct doit toujours être envoyé par le serveur.

Des en-têtes de type de contenu incorrects ou manquants peuvent avoir un large éventail d'impacts négatifs sur un site ; dont certains sont liés à la sécurité. Pour plus d'informations à ce sujet, veuillez consulter : https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Configuration_server_MIME_types

Il y a aussi une erreur non liée que certains peuvent recevoir qui se présente avec le même message mais un type de contenu envoyé de text/html . Cette erreur est généralement causée par des fichiers manquants sur le serveur, une URL de déploiement incompatible ou un paramètre d'application HREF de base incompatible pour l'emplacement déployé, ou une règle de réécriture de serveur mal configurée pour le routage basé sur le chemin. Ce qui se passe dans ce cas, c'est que la règle de réécriture de routage basée sur le chemin est déclenchée en raison de l'absence d'un fichier à l'emplacement demandé. La règle de réécriture entraîne à son tour l'envoi du fichier HTML d'index dont le type de contenu est text/html . Si le fichier demandé à l'origine était un script ou une feuille de style, l'erreur peut s'afficher car HTML n'est pas un script ou une feuille de style valide.
Pour plus d'informations sur la configuration du routage du serveur, veuillez consulter : https://angular.io/guide/deployment#routed -apps-must-fallback-to-indexhtml
Pour plus d'informations sur le HREF de base, veuillez consulter : https://angular.io/guide/deployment#the -base-tag

Une documentation supplémentaire dans le guide de déploiement est en cours de rédaction pour mieux expliquer ces types d'erreurs ainsi que les mesures qui peuvent être prises pour y remédier.

Le mien était une règle de réécriture après l'avoir retiré de web.config, cela a fonctionné

C'était la première fois que je déployais une application angulaire (v9) sur Azure et j'avais un problème avec le rechargement des pages Web sur un itinéraire (F5, Ctrl+F5, Ctrl+R).

J'obtenais une erreur « Impossible de charger le script du module : le serveur a répondu avec un type MIME non JavaScript de « text/html » ».

J'ai pu résoudre ce problème en changeant mon build ng de ng build --prod --base-href à ng build --prod .

J'ai donc une application Angular 9, elle a 3 routes principales :
/ - Accueil
/tableau de bord
/tableau de bord/guildes

Pour accéder au tableau de bord, vous pouvez soit cliquer sur un lien et laisser le routeur vous naviguer, soit le saisir directement dans votre barre d'adresse : /dashboard

Dans la route du tableau de bord, il y a un bouton qui, lorsqu'il est cliqué, naviguera par programme avec le routeur vers /dashboard/guildes. Je peux alors très bien afficher mon composant, cependant, si j'actualise la page, j'obtiens ce problème :

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
06:12:19.128 polyfills-es2015.3fd94ed6a324eee92aec.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
06:12:19.128 main-es2015.0b1d748ffcf78a2a0b26.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Je ne sais pas pourquoi, cela fonctionne bien localement, donc je suppose que c'est quelque chose à voir avec mon serveur de production ? J'ai NGINX en cours d'exécution. Si nécessaire, je fournirai la configuration du bloc serveur.

J'ai essayé quelques trucs ici : https://github.com/angular/angular/issues/30835 mais je n'ai jamais eu ce problème avec Angular 8 auparavant. Et celui-ci semble très spécifique, ce n'est pas comme si la page ne se chargeait pas, elle génère simplement cette erreur si j'essaie de visiter manuellement cet itinéraire au lieu de laisser le routeur angulaire naviguer pour moi.

index.html de la construction

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SomeWebsite</title>
  <base href="./">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.8426c2fc899c530c7f78.css"></head>
<body class="mat-typography">
  <app-root></app-root>
<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script><script src="polyfills-es5.c219b7059a7feb126472.js" nomodule defer></script><script src="polyfills-es2015.3fd94ed6a324eee92aec.js" type="module"></script><script src="main-es2015.0b1d748ffcf78a2a0b26.js" type="module"></script><script src="main-es5.0b1d748ffcf78a2a0b26.js" nomodule defer></script></body>
</html>
``` I've tried changing type="text/javascript" but no luck, I just got some "> token error" I don't really remember.

I'm not sure what else is needed, but if anyone knows what the issue and how I could fix it, I would appreciate it.

----
I found a work around by changing the way my routes were handled:

Before: 

routes const : Routes = [
{ chemin : '', composant : HomeComponent },
{
chemin : 'tableau de bord',
composant : DashboardComponent,
canActivate : [AuthGuard],
},
{
chemin : 'tableau de bord/guildes',
composant : GuildsComponent,
canActivate : [AuthGuard]
}
] ;

and after

routes const : Routes = [
{ chemin : '', composant : HomeComponent },
{
chemin : 'tableau de bord',
composant : DashboardComponent,
canActivate : [AuthGuard],
},
{
chemin : 'guildes',
composant : GuildsComponent,
canActivate : [AuthGuard]
}
] ;
``` J'avais également défini pathMatch sur full à l'origine, mais je ne sais pas vraiment ce que cela résout.

J'ai donc une application Angular 9, elle a 3 routes principales :
/ - Accueil
/tableau de bord
/tableau de bord/guildes

Pour accéder au tableau de bord, vous pouvez soit cliquer sur un lien et laisser le routeur vous naviguer, soit le saisir directement dans votre barre d'adresse : /dashboard

Dans la route du tableau de bord, il y a un bouton qui, lorsqu'il est cliqué, naviguera par programme avec le routeur vers /dashboard/guildes. Je peux alors très bien afficher mon composant, cependant, si j'actualise la page, j'obtiens ce problème :

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
06:12:19.128 polyfills-es2015.3fd94ed6a324eee92aec.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
06:12:19.128 main-es2015.0b1d748ffcf78a2a0b26.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Je ne sais pas pourquoi, cela fonctionne bien localement, donc je suppose que c'est quelque chose à voir avec mon serveur de production ? J'ai NGINX en cours d'exécution. Si nécessaire, je fournirai la configuration du bloc serveur.

J'ai essayé quelques trucs ici: #30835 mais je n'ai jamais eu ce problème avec Angular 8 auparavant. Et celui-ci semble très spécifique, ce n'est pas comme si la page ne se chargeait pas, elle génère simplement cette erreur si j'essaie de visiter manuellement cet itinéraire au lieu de laisser le routeur angulaire naviguer pour moi.

index.html de la construction

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SomeWebsite</title>
  <base href="./">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.8426c2fc899c530c7f78.css"></head>
<body class="mat-typography">
  <app-root></app-root>
<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script><script src="polyfills-es5.c219b7059a7feb126472.js" nomodule defer></script><script src="polyfills-es2015.3fd94ed6a324eee92aec.js" type="module"></script><script src="main-es2015.0b1d748ffcf78a2a0b26.js" type="module"></script><script src="main-es5.0b1d748ffcf78a2a0b26.js" nomodule defer></script></body>
</html>
``` I've tried changing type="text/javascript" but no luck, I just got some "> token error" I don't really remember.

I'm not sure what else is needed, but if anyone knows what the issue and how I could fix it, I would appreciate it.

----
I found a work around by changing the way my routes were handled:

Before: 

routes const : Routes = [
{ chemin : '', composant : HomeComponent },
{
chemin : 'tableau de bord',
composant : DashboardComponent,
canActivate : [AuthGuard],
},
{
chemin : 'tableau de bord/guildes',
composant : GuildsComponent,
canActivate : [AuthGuard]
}
] ;

and after

routes const : Routes = [
{ chemin : '', composant : HomeComponent },
{
chemin : 'tableau de bord',
composant : DashboardComponent,
canActivate : [AuthGuard],
},
{
chemin : 'guildes',
composant : GuildsComponent,
canActivate : [AuthGuard]
}
] ;

Vous devez vérifier votre configuration nginx. Vérifiez si vous avez les bons types de mime répertoriés.

J'ai donc une application Angular 9, elle a 3 routes principales :
/ - Accueil
/tableau de bord
/tableau de bord/guildes
Pour accéder au tableau de bord, vous pouvez soit cliquer sur un lien et laisser le routeur vous naviguer, soit le saisir directement dans votre barre d'adresse : /dashboard
Dans la route du tableau de bord, il y a un bouton qui, lorsqu'il est cliqué, naviguera par programme avec le routeur vers /dashboard/guildes. Je peux alors très bien afficher mon composant, cependant, si j'actualise la page, j'obtiens ce problème :

Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
06:12:19.128 polyfills-es2015.3fd94ed6a324eee92aec.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
06:12:19.128 main-es2015.0b1d748ffcf78a2a0b26.js:1 Failed to load module script: The server responded with a non-JavaScript MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Je ne sais pas pourquoi, cela fonctionne bien localement, donc je suppose que c'est quelque chose à voir avec mon serveur de production ? J'ai NGINX en cours d'exécution. Si nécessaire, je fournirai la configuration du bloc serveur.
J'ai essayé quelques trucs ici: #30835 mais je n'ai jamais eu ce problème avec Angular 8 auparavant. Et celui-ci semble très spécifique, ce n'est pas comme si la page ne se chargeait pas, elle génère simplement cette erreur si j'essaie de visiter manuellement cet itinéraire au lieu de laisser le routeur angulaire naviguer pour moi.
index.html de la construction

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>SomeWebsite</title>
  <base href="./">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="styles.8426c2fc899c530c7f78.css"></head>
<body class="mat-typography">
  <app-root></app-root>
<script src="runtime-es2015.0811dcefd377500b5b1a.js" type="module"></script><script src="runtime-es5.0811dcefd377500b5b1a.js" nomodule defer></script><script src="polyfills-es5.c219b7059a7feb126472.js" nomodule defer></script><script src="polyfills-es2015.3fd94ed6a324eee92aec.js" type="module"></script><script src="main-es2015.0b1d748ffcf78a2a0b26.js" type="module"></script><script src="main-es5.0b1d748ffcf78a2a0b26.js" nomodule defer></script></body>
</html>
``` I've tried changing type="text/javascript" but no luck, I just got some "> token error" I don't really remember.

I'm not sure what else is needed, but if anyone knows what the issue and how I could fix it, I would appreciate it.

----
I found a work around by changing the way my routes were handled:

Before: 

routes const : Routes = [
{ chemin : '', composant : HomeComponent },
{
chemin : 'tableau de bord',
composant : DashboardComponent,
canActivate : [AuthGuard],
},
{
chemin : 'tableau de bord/guildes',
composant : GuildsComponent,
canActivate : [AuthGuard]
}
] ;

and after

routes const : Routes = [
{ chemin : '', composant : HomeComponent },
{
chemin : 'tableau de bord',
composant : DashboardComponent,
canActivate : [AuthGuard],
},
{
chemin : 'guildes',
composant : GuildsComponent,
canActivate : [AuthGuard]
}
] ;

Vous devez vérifier votre configuration nginx. Vérifiez si vous avez les bons types de mime répertoriés.

J'ai fait. J'ai essayé littéralement chaque chose dans ce fil. Et rien n'a fonctionné pour moi. Je suis allé dans nginx.conf et j'ai ajouté include /etc/nginx/mimes./type , cela n'a pas fonctionné. J'ai essayé de changer le type="text/javascript", pas de chance. J'ai même essayé d'ajouter un en-tête pour mes fichiers .js dans NGINX, pas de chance.

J'ai également le problème (en utilisant NGINX comme entrée dans mon cluster Kubernetes).
Est-ce que quelqu'un a des idées ?

J'ai aussi tout essayé dans ce fil. Quelqu'un peut-il m'aider avec le code. Mon code d'origine ressemble à ceci

<script src="runtime-es2015.js" type="module"></script><script src="runtime-es5.js" nomodule defer></script><script src="polyfills-es5.js" nomodule defer></script><script src="polyfills-es2015.js" type="module"></script><script src="styles-es2015.js" type="module"></script><script src="styles-es5.js" nomodule defer></script><script src="vendor-es2015.js" type="module"></script><script src="vendor-es5.js" nomodule defer></script><script src="main-es2015.js" type="module"></script><script src="main-es5.js" nomodule defer></script>

Quelque chose de nouveau?

Quelque chose de nouveau?

J'ai déjà corrigé l'erreur dans mon projet. Dans mon cas, j'ai une application de nœud avec angulaire, et j'avais d'abord déclaré les routes angulaires pour le nœud, puis défini l'utilisation du dossier où se trouve la dist angulaire. Changer ces déclarations, cela a fonctionné pour moi.

Avant de:
var angularRoutes = require ('./ routes.js') (app);
app.use (express.static ('./ dist', {
index : 'index.html',
Âge max : 86 400 000
}));

Puis:
app.use (express.static ('./ dist', {
index : 'index.html',
Âge max : 86 400 000
}));
var angularRoutes = require ('./ routes.js') (app);

Le problème est que outputPath est défini sur dist/app-name par opposition à dist/ dans votre fichier angular.json.

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

Ma solution sur AWS : j'ai dû invalider des fichiers * (pas seulement /index.html) avec CloudFront.

Je n'ai donc ce problème qu'avec NGINX. Chaque fois que j'ai des routes enfants, par exemple: dashboard/guildes, ou github/issues, etc., ces routes enfants ne seront pas rendues et la console donnera les problèmes de type MIME. Cela se produit également lorsque j'ai également un autre module angulaire dans mon routage.

Pour l'instant, j'ai ajouté un en-tête pour les fichiers js dans le proxy.json

        "Javascript Files-Prod": {
            "matchCondition": {
                "route": "/js/{*path}"
            },
            "backendUri": "https://myblob.web.core.windows.net/js/{path}",
            "responseOverrides": {
                "response.statusCode": "200",
                "response.headers.Content-Type": "text/javascript",
            }
        },

Si vous déployez votre build dans le dossier de votre serveur, lors de la génération de la build prod, assurez-vous d'ajouter le dossier à l'indicateur --base-href et au chemin du dossier. Voici la commande si vous déployez dans le dossier "www"

ng build --prod --base-href /www/

Une mise à jour sur celui-ci ? Ce bogue signifie qu'il y a une étape supplémentaire dans mon processus de déploiement pour GAE.

Une mise à jour sur quand cela sera-t-il corrigé?

Comme décrit par @clydin dans l'un des commentaires ci-dessus, il ne s'agit pas d'un bogue dans Angular lui-même.

Il s'agit principalement d'un problème de documentation.

Je reposte le message cité ci-dessous :

Le problème d'origine était causé par un défaut dans la fonctionnalité de téléchargement du stockage blob du portail Azure. Le portail ne définissait pas correctement les types de contenu lors du téléchargement. Lorsque vous utilisez le stockage objet pour héberger des sites statiques, il est important que les outils utilisés effectuent un téléchargement complet des fichiers, y compris le type de contenu. Des outils propriétaires tels qu'Azure et AWS CLI fournissent cette fonctionnalité. Si vous utilisez des outils personnalisés (utilisation directe de l'API, par exemple) ou des outils tiers, assurez-vous qu'ils effectuent également ces étapes.

La version 8.0 de l'Angular CLI a introduit la fonctionnalité de chargement différentiel. Cela tire parti de la fonctionnalité de script de module dans les navigateurs modernes pour prendre en charge le chargement des scripts appropriés pour différents navigateurs. Les scripts de module offrent la possibilité d'utiliser la dernière fonctionnalité ECMAScript dans les navigateurs pris en charge et sont nécessaires pour utiliser la fonctionnalité d'importation native.

Lors de l'utilisation de scripts de module, la spécification HTML exige que l'en-tête de type MIME/contenu pour les données reçues soit valide. Le type de contenu qui doit être envoyé par le serveur pour les fichiers JavaScript ( .js ) est text/javascript (ou l'un des équivalents trouvés ici ). La plupart des serveurs et des services d'hébergement le feront automatiquement, car les fichiers JavaScript sont un type de fichier courant. Si vous utilisez des services de stockage d'objets pour l'hébergement, les outils propriétaires couramment utilisés pour ces services définiront également le type approprié lors du téléchargement. Il n'y a aucune garantie qu'un navigateur exécutera un script (module ou autre) avec un type de contenu invalide. Cela est particulièrement vrai lorsque vous utilisez des en-têtes liés à la sécurité tels que X-Content-Type-Options=nosniff ( détails ). Même si les scripts de module ne sont pas utilisés, l'en-tête de type de contenu correct doit toujours être envoyé par le serveur.

Des en-têtes de type de contenu incorrects ou manquants peuvent avoir un large éventail d'impacts négatifs sur un site ; dont certains sont liés à la sécurité. Pour plus d'informations à ce sujet, veuillez consulter : https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Configuration_server_MIME_types

Il y a aussi une erreur non liée que certains peuvent recevoir qui se présente avec le même message mais un type de contenu envoyé de text/html . Cette erreur est généralement causée par des fichiers manquants sur le serveur, une URL de déploiement incompatible ou un paramètre d'application HREF de base incompatible pour l'emplacement déployé, ou une règle de réécriture de serveur mal configurée pour le routage basé sur le chemin. Ce qui se passe dans ce cas, c'est que la règle de réécriture de routage basée sur le chemin est déclenchée en raison de l'absence d'un fichier à l'emplacement demandé. La règle de réécriture entraîne à son tour l'envoi du fichier HTML d'index dont le type de contenu est text/html . Si le fichier demandé à l'origine était un script ou une feuille de style, l'erreur peut s'afficher car HTML n'est pas un script ou une feuille de style valide.
Pour plus d'informations sur la configuration du routage du serveur, veuillez consulter : https://angular.io/guide/deployment#routed -apps-must-fallback-to-indexhtml
Pour plus d'informations sur le HREF de base, veuillez consulter : https://angular.io/guide/deployment#the -base-tag

Une documentation supplémentaire dans le guide de déploiement est en cours de rédaction pour mieux expliquer ces types d'erreurs ainsi que les mesures qui peuvent être prises pour y remédier.

Cela est dû au dossier dist dans votre espace de travail de projet. Dans votre dossier dist, il peut y avoir un dossier nommé le nom de votre projet, déplacez tous les fichiers de ce dossier vers le dossier dist, puis modifiez l'emplacement du répertoire dans le fichier server.js. Cela a fonctionné pour moi.

La modification de l'attribut type sur les balises de script dans le fichier index.html compilé résout ce problème pour moi, mais ajoute une étape supplémentaire au déploiement de Google App Engine (pour référence, NGINX et Apache servent correctement sans problème). Versions antérieures d'angular construites et déployées sur GAE sans problème.

Oui, cela peut être une des solutions, je préfère
https://stackoverflow.com/a/63207836/14033778 ici vous n'en avez pas besoin
étapes supplémentaires.

Le samedi 1 août 2020 à 21 h 43, iabutler [email protected] a écrit :

Modification de l'attribut type sur les balises de script dans le fichier index.html compilé
fichier corrige cela pour moi, mais ajoute une étape supplémentaire au déploiement pour
Google App Engine (pour référence NGINX et Apache servent correctement sans
publier).

-
Vous recevez ceci parce que vous avez commenté.
Répondez directement à cet e-mail, consultez-le sur GitHub
https://github.com/angular/angular/issues/30835#issuecomment-667553948 ,
ou se désinscrire
https://github.com/notifications/unsubscribe-auth/AMHE6SRNRNDYLJ2WSJAWNFLR6Q5LRANCNFSM4HSYDBKQ
.

Je l'ai résolu en créant une tâche dans gulp, je partage les étapes :

1. npm install --save-dev gulp
2. npm install --save-dev gulp-replace
3. créer à la racine du projet un fichier avec le nom :
   gulpfile.js
4. copiez le code dans le _gulpfile.js_ :

const { src, dest } = require('gulp');
var replace = require('gulp-replace')

exports.default = function (cb) {    
    src(['dist/ng-project/index.html'])
        .pipe(replace('type="module"', 'type="text/javascript"'))
        .pipe(dest('dist/ng-project/'));
    cb();
};

1. Dans le fichier packaje.json , modifiez le script _"electron"_ comme suit :
   "electron": "ng build --base-href ./ && tsc --p electron && gulp && electron ."
2. exécuter votre projet : npm run electron

note : dans le fichier electron principal, assurez-vous d'aller dans le dossier dist de votre fichier index.html
_ Exemple : _

win.loadURL(url.format({
        pathname: path.join(__dirname, `/../../dist/ng-project/index.html`),
        protocol: "file:",
        slashes: true
        })
    );

Cela m'a aidé.

@Amitesh comme indiqué ailleurs, si vous rencontrez cela sur Electron, cela est attendu car le protocole file:// ne transmet pas les types mime au moteur Chromium. La solution recommandée pour Electron consiste à implémenter un protocole personnalisé, qui est plus fiable et ne nécessite aucune modification/correction de votre sortie de build. Cela vous offre également d'autres avantages, car file:// est assez restreint dans les moteurs de navigateur.

Pour plus d'informations à ce sujet, consultez la documentation Electron . Vous pouvez trouver des personnes discutant de cette solution (et d'un exemple de protocole personnalisé) sur https://github.com/electron/electron/issues/12011#issuecomment -369705509

Si vous utilisez DotNetCore 3.1 , assurez-vous que app.UseSpaStaticFiles(); est dans Startup.cs.

Merci @rezonant
J'utilise le framework vanilla Angular 8 dans le navigateur.

Quelqu'un a-t-il une idée de l'endroit où le changement d'Angular 7 à Angular 8 est l'endroit où le type="text / javascript" n'est plus ajouté ? Afin que nous puissions proposer une demande de fusion pour résoudre ce problème ?

a répondu

Oui, cela a résolu mon problème d'exécution du projet Angular 8 dans le conteneur docker Nginx.
La cible de mon tsconfig.json est es2015 .
En supprimant --base-href ./ de mon script de construction, résolvez le problème !

Dans mon cas, j'ai eu le même problème pour publier une application Angular 9 sur un serveur IIS 8. L'erreur ne s'est produite que sur la machine du client et non sur la mienne. La raison en était la suivante : dans ma machine, j'ai publié l'application en indiquant dans la baseRef qu'elle se trouverait dans un dossier myFolder du site. Dans le cas de mon client, il n'a pas créé le dossier dans un site existant, mais a plutôt créé le dossier et un nouveau site qui pointe directement vers celui-ci. La solution dans mon cas était de générer la publication sans spécifier la référence de base (juste ng build --prod).

Bref, l'erreur est que le serveur ne peut pas localiser les fichiers du projet selon la façon dont il a été compilé.

J'ai également le problème (en utilisant NGINX comme entrée dans mon cluster Kubernetes).
Est-ce que quelqu'un a des idées ?

Je suis également confronté au même problème avec mon application angulaire déployée dans AKS avec le conteneur nginx et l'entrée activés.

Nous avons également ce problème avec l'entrée Nginx activée sur AKS