web-dev-qa-db-fra.com

Angular 6 app ne fonctionne pas dans IE <11

Mon application angulaire ne fonctionne pas dans IE inférieure à 11, mais auparavant elle ne fonctionnait même pas dans IE 11, mais après avoir supprimé certaines importations dans polyfills.ts, elle fonctionnait, versions.

Voici mon polyfills.ts, package.json et erreur de la console du navigateur, respectivement

polyfills.ts

/**
* This file includes polyfills needed by Angular and is loaded before the 
app.
You can add your own extra polyfills to this file.

This file is divided into 2 sections:
1. Browser polyfills. These are applied before loading ZoneJS and are sorted 
 by browsers.
2. Application imports. Files imported after ZoneJS that should be loaded 
before your main file.
*
* The current setup is for so-called "evergreen" browsers; the last versions 
of 
browsers that
automatically update themselves. This includes Safari >= 10, Chrome >= 55 
(including Opera),
Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
/**************
BROWSER POLYFILLS
/

/* 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';

import 'core-js/es6/array';
import 'core-js/es7/array';


/* IE10 and IE11 requires the following for NgClass support on SVG elements /
import 'classlist.js';  // Run `npm install --save classlist.js`.

/* IE10 and IE11 requires the following for the Reflect API. /
import 'core-js/es6/reflect';


/* Evergreen browsers require these. */
// Used for reflect-metadata in JIT. If you use AOT (and only Angular 
decorators), you can remove.
import 'core-js/es7/reflect'; 


/**
 * Required to support Web Animations `@angular/platform-browser/animations`.
 Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web- 
animation
*/
import 'web-animations-js';  // Run `npm install --save web-animations-js`.   



/*************************************
 * Zone JS is required by Angular itself.
/
import 'zone.js/dist/zone';  // Included with Angular CLI.

import 'hammerjs/hammer';


/***********************************************************************
APPLICATION IMPORTS
/

/**
* Date, currency, decimal and percent pipes.
Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
/
// import 'intl';  // Run `npm install --save intl`.
/**
* Need to import at least one locale-data with intl.
*/
// import 'intl/locale-data/jsonp/en';
import 'es5-shim';
// (window as any).global = window ;

package.json

{
"name": "material",
"version": "1.0.0",
"license": "MIT",
"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "start-proxy": "ng serve --Host 0.0.0.0 --proxy-config proxy.config.json",
  "build": "ng build",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
} ,
"private": true,
"dependencies": {
  "@angular-devkit/core": "0.6.3",
  "@angular/animations": "6.0.3",
  "@angular/cdk": "^6.1.0",
  "@angular/common": "6.0.3",
  "@angular/compiler": "6.0.3",
  "@angular/core": "6.0.3",
  "@angular/flex-layout": "2.0.0-beta.10-4905443",
  "@angular/forms": "6.0.3",
  "@angular/http": "6.0.3",
  "@angular/material": "^6.1.0",
  "@angular/platform-browser": "6.0.3",
  "@angular/platform-browser-dynamic": "6.0.3",
  "@angular/router": "6.0.3",
  "@swimlane/ngx-charts": "^7.0.1",
  "@swimlane/ngx-datatable": "^11.1.5",
  "Amazon-cognito-identity-js": "^2.0.12",
  "angular-calendar": "^0.22.1",
  "aws-sdk": "^2.266.1",
  "chartist": "^0.11.0",
  "classlist.js": "^1.1.20150312",
  "core-js": "^2.4.1",
  "d3": "^4.8.0",
  "es5-shim": "^4.5.10",
  "hammerjs": "^2.0.8",
  "intl": "^1.2.5",
  "jquery": "^3.2.1",
  "moment": "^2.20.0",
  "ng-chartist": "1.1.1",
  "ng2-charts": "1.6.0",
  "ng2-dragula": "1.5.0",
  "ng2-file-upload": "1.3.0",
  "ng2-smart-table": "1.2.2",
  "ng2-validation": "^4.2.0",
  "ngx-perfect-scrollbar": "^5.0.0",
  "ngx-quill": "^3.1.0",
  "rxjs": "^6.2.0",
  "rxjs-compat": "^6.2.0",
  "rxjs-tslint": "^0.1.4",
  "web-animations-js": "^2.3.1",
  "zone.js": "^0.8.26"
  },
  "devDependencies": {
  "@angular/cli": "6.0.5",
  "@angular/compiler-cli": "6.0.3",
  "@angular/language-service": "6.0.3",
  "@types/chartist": "^0.9.37",
  "@types/jasmine": "~2.5.53",
  "@types/jasminewd2": "~2.0.2",
  "@types/jquery": "^3.2.5",
  "@types/node": "~6.0.60",
  "codelyzer": "~3.2.0",
  "jasmine-core": "~2.6.2",
  "jasmine-spec-reporter": "~4.1.0",
  "karma": "~1.7.0",
  "karma-chrome-launcher": "~2.1.1",
  "karma-cli": "~1.0.1",
  "karma-coverage-istanbul-reporter": "^1.2.1",
  "karma-jasmine": "~1.1.0",
  "karma-jasmine-html-reporter": "^0.2.2",
  "protractor": "~5.1.2",
  "ts-node": "~3.2.0",
  "tslint": "~5.7.0",
  "TypeScript": "2.7.2",
  "@angular-devkit/build-angular": "~0.6.3"
  }
  }

erreur de la console dans IE 10  enter image description here

et pour IE 9, la console est vide.

S'il vous plaît suggérer une solution possible.

angularinternet-explorerangular-cliangular-cli-v6
3
kzrfaisal

Faire face au même problème avec Angular 6. Il suffit de ne pas commenter Pollyfills ne fonctionne pas du tout… .. En plus, ajoutez la balise méta <meta http-equiv="X-UA-Compatible" content="IE=Edge" > à votre fichier index.html.

4
Vignesh M

Commencez par ouvrir le fichier dans votre IDE ou votre éditeur de texte: c'est-à-dire-test\src\polyfills.ts Décommentez toutes les lignes d'importation. Ou simplement pour remplacer tout// import Par Import

installer 2 paquets npm installer --save classlist.js npm installer --save web-animations-js

maintenant servir et vérifier

0
Ali