Je rencontre un problème lors de l'utilisation d'angular 6 et d'IE 11, l'application fonctionne correctement dans Chrome et un autre navigateur mais dans Internet Explorer, je reçois ce
ERREUR Erreur: non intercepté (promis): Erreur: chargement du bloc par défaut ~ app-xxxxx ~ eb5ba6d4 échoué. (manquant: http: // localhost: 4200 / default ~ app-xxxx.js ) Erreur: Le chargement du bloc par défaut ~ app-xxxx ~ eb5ba6d4 a échoué. (disparu: http: // localhost: 4200 / default ~ app-xxxx ~ eb5ba6d4.js a >)
Détails du projet
CLI angulaire: 6.2.3 Nœud: 8.12.0 Système d'exploitation: win32 x64 Angulaire: ...
@ angular-devkit / architect 0.8.3 @ angular-devkit / core 0.8.3 @ angular-devkit / schematics 0.8.3 @ schémas / angulaire 0.8.3 @ schematics / mise à jour 0.8.3 rxjs 6.2.2 typecript 2.9.2
Le routage de mon application est
const routes: Routes = [
{
path: '',
loadChildren: 'app/content/pages/pages.module#PagesModule'
},
{
path: 'layout',
loadChildren: 'app/content/layout/layout.module#LayoutModule',
},
{
path: '**',
redirectTo: ''
}
];
6 Réponses :
Je pense que vous devez ajouter des polyfills. Si vous ouvrez le fichier src / polyfills.ts , vous devez décommenter ces importations:
/** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import 'core-js/es6/symbol'; // import 'core-js/es6/object'; // import 'core-js/es6/function'; // import 'core-js/es6/parse-int'; // import 'core-js/es6/parse-float'; // import 'core-js/es6/number'; // import 'core-js/es6/math'; // import 'core-js/es6/string'; // import 'core-js/es6/date'; // import 'core-js/es6/array'; // import 'core-js/es6/regexp'; // import 'core-js/es6/map'; // import 'core-js/es6/weak-map'; // import 'core-js/es6/set';
EDIT:
Il peut y avoir plus de polyfils listés sous cette liste, comme mentionné par @Arikael dans les commentaires, que vous voudrez peut-être également décommenter.
sous ces lignes, il y a / ** IE10 et IE11 requiert ce qui suit pour l'API Reflect. * / import 'core-js / es6 / reflect'; Avez-vous également décommenté cela?
@Arikael oui "core-js / es6 / reflètent" déjà non commenté mais toujours le même problème
Vous devez ajouter une balise Meta.
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
Pouvez-vous vérifier les étapes à partir de cela? c'était le problème avec IE
Les applications CLI angulaires nécessitent quelques étapes supplémentaires pour prendre en charge Internet Explorer.
Après avoir investi quelques heures, j'ai enfin trouvé mes solutions Problème concernant la promesse ((t, n) =>,
module.exports = function (event) {
return new Promise(function(resolve, reject) {
let reader = new FileReader();
let files = event.target.files;
let len = files.length;
if (len > 1) {
reject(new DOMException("Only one file can be uploaded at a time"));
} else {
reader.onerror = function() {
reader.abort();
reject(new DOMException("Problem parsing input file."));
};
let file = files[0]
reader.onload = function(evt){
const uint = new Uint8Array(evt.target.result);
let bytes = [];
uint.map(function(byte) {
bytes.push(byte.toString(16));
});
const hex = bytes.join('').toUpperCase();
let base64 = reader.result.split(',')[1];
file.base64 = base64;
file.binaryFileType = getMimetype(hex);
resolve(file);
};
reader.readAsDataURL(file);
}
});
}
=> l'expression lambda n'est pas prise en charge dans IE, nous pouvons donc la remplacer par code function () au lieu de cette expression.
Installez quelques packages
npm install --save web-animations-js
npm install --save classlist.js
Ensuite, on m'a trouvé un problème de promesse dans l'un des packages npm (fuctbase64 / index.js)
module.exports = function (event) {
return new Promise((resolve, reject) => {
let reader = new FileReader();
let files = event.target.files;
let len = files.length;
if (len > 1) {
reject(new DOMException("Only one file can be uploaded at a time"));
} else {
reader.onerror = () => {
reader.abort();
reject(new DOMException("Problem parsing input file."));
};
let file = files[0]
reader.onload = (evt) => {
const uint = new Uint8Array(evt.target.result);
let bytes = [];
uint.map(byte => {
bytes.push(byte.toString(16));
});
const hex = bytes.join('').toUpperCase();
let base64 = reader.result.split(',')[1];
file.base64 = base64;
file.binaryFileType = getMimetype(hex);
resolve(file);
};
reader.readAsDataURL(file);
}
});
}
Remplacez le code par
/** IE9, IE10 and IE11 requires all of the following polyfills. **/ // import 'core-js/es6/symbol'; // import 'core-js/es6/object'; // import 'core-js/es6/function'; // import 'core-js/es6/parse-int'; // import 'core-js/es6/parse-float'; // import 'core-js/es6/number'; // import 'core-js/es6/math'; // import 'core-js/es6/string'; // import 'core-js/es6/date'; // import 'core-js/es6/array'; // import 'core-js/es6/regexp'; // import 'core-js/es6/map'; // import 'core-js/es6/weak-map'; // import 'core-js/es6/set';
> l'expression lambda ne prend pas en charge dans IE, peut-être que vous pouvez modifier les paramètres som dans votre fichier tsconfig.json à la place pour résoudre ce problème: "module": "es2015" et "target": "es5"
Je suis nouveau chez angular. J'ai rencontré une erreur concernant «l'échec du chargement du module xyz du bloc» dans Internet Explorer. J'avais essayé beaucoup de choses mais aucune solution. Enfin, j'ai changé l'ordre d'ajout du tableau "déclarations" et du tableau "importations" dans la définition de NgModule. Je veux dire que la définition de "déclarations" avant "importations" dans NgModule () a résolu mon problème.
@NgModule({
declarations: [SomeComponent],
imports: [
FormsModule,
ReactiveFormsModule,
CommonModule,
MaterialModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: translateHttpLoaderFactory,
deps: [HttpClient]
}
})
]
})
Cela se produit si un bloc ne peut pas être chargé, ce qui se produira plus souvent sur mobile en raison de mauvaises connexions. Vous devez avoir une gestion des erreurs en cas d'échec du chargement d'un bloc, comme demander à l'utilisateur de recharger la page.
voyez-vous quelque chose (comme un 404) dans l'onglet réseau de la console de développement?
@Arikael non rien à voir comme 404
quel est le statut http du fichier? Ou ne voyez-vous rien du tout? Nous avons eu une fois le problème que certains AdBlocker interféraient
Essayez de mettre à jour les packages associés, pouvez-vous publier le code Assez pour reproduire le problème comme dans l ' exemple minimal, complet et vérifiable .