web-dev-qa-db-ja.com

Angular 6アプリが動作しないIE <11

My AngularアプリはIE 11より低いが、以前はIE 11、しかし、polyfills.tsでいくつかのインポートのコメントを外した後は機能しましたが、問題は以前のバージョンでも引き続き発生します。

それぞれpolyfills.ts、package.json、およびブラウザコンソールエラーがあります

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"
  }
  }

IE 10 enter image description here

およびfor IE 9コンソールは空です。

可能な解決策を提案してください。

angularinternet-explorerangular-cliangular-cli-v6
6
kzrfaisal

Angular 6.と同じ問題に直面しています。Pollfillsのコメントを外すだけではまったく機能しません。それに加えて、メタタグ<meta http-equiv="X-UA-Compatible" content="IE=Edge" > index.htmlファイルに。

5
Vignesh M

まず、IDEまたはテキストエディターでファイルを開きます。ie-test\ src\polyfills.tsすべてのインポート行のコメントを解除します。または、すべてのインポートをインポートで置き換えます。

2つのパッケージをインストールnpm install --save classlist.js npm install --save web-animations-js

今サーブとチェック

1
Ali