IE11不支持Angular 2应用

Question

我有一个用webpack设置的angular 2应用程序。 我想在Internet Explorer 11中支持该应用程序。在我的package.json中

"scripts": {
    "build": "webpack --progress",
    "build:prod": "webpack -p --progress --config=webpack.prod.config.js",
    "postinstall": "typings install",
    "local": "webpack-dev-server --inline --progress --port 3000",
    "tslint": "tslint -c tslint.json src/app/**/*.ts"
  },
  "dependencies": {
    "@angular/common": "^2.4.8",
    "@angular/compiler": "^2.4.8",
    "@angular/core": "^2.4.8",
    "@angular/forms": "^2.4.8",
    "@angular/http": "^2.4.8",
    "@angular/platform-browser": "^2.4.8",
    "@angular/platform-browser-dynamic": "^2.4.8",
    "@angular/router": "^3.4.8",
    "angular2-cool-storage": "1.2.1",
    "angular2-highcharts": "^0.4.1",
    "core-js": "^2.4.1",
    "json-loader": "^0.5.4",
    "lodash": "^4.16.3",
    "moment": "^2.17.1",
    "moment-timezone": "^0.5.13",
    "ng2-slimscroll": "1.2.1",
    "ngx-clipboard": "^5.1.0",
    "ngx-tooltip": "0.0.9",
    "ngx-uploader": "^2.2.8",
    "reflect-metadata": "^0.1.8",
    "rxjs": "^5.2.0",
    "web-animations-js": "^2.2.5",
    "zone.js": "^0.7.7"
  },
  "repository": {},
  "devDependencies": {
    "@types/node": "^6.0.53",
    "angular2-template-loader": "^0.6.0",
    "codelyzer": "2.0.0-beta.4",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.26.1",
    "html-webpack-plugin": "^2.24.1",
    "raw-loader": "^0.5.1",
    "retyped-gapi.auth2-tsd-ambient": "0.0.0-1",
    "style-loader": "^0.13.1",
    "ts-loader": "2.2.2",
    "tslint": "4.5.1",
    "typescript": "^2.0.10",
    "typings": "^2.1.0",
    "webpack": "^1.14.0",
    "webpack-dev-server": "^1.16.2"
  }

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "include": [
        "src/**/*"
    ],
  "exclude": [
    "node_modules/*",
    "**/*-aot.ts"
  ]
}

webpack.config.json

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/main.ts',
    output: {
        path: './dist',
        filename: 'app.bundle.js'
    },
    devServer: {    //Only required for development environment
        historyApiFallback:true,
        stats: 'minimal'
    },
    devtool:'source-map', //Only required for development environment
    module: {
        loaders: [
            {test: /\.css$/,  loader: 'raw', exclude: /node_modules/},
            {test: /\.css$/,  loader: 'style!css?-minimize', exclude: /src/},
            {test: /\.html$/, loader: 'raw'},
            {test:/\.ts$/, loader: 'ts-loader!angular2-template-loader'},
            {include: /\.json$/, loaders: ["json-loader"]}
            ]
    },
    resolve: {
        extensions: ['','.js','.ts', '.json']
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CopyWebpackPlugin([
            { from: 'static' }
        ])
    ]    
}

控制台窗口中的错误是

SCRIPT5022：错误：无法解析PlanningComponent的所有参数：（[对象对象]，[对象对象]，？，[对象对象]）。

可选参数有问题。 有时还会引发其他错误，例如S

CRIPT1028：预期的标识符，字符串或数字

但是在其他浏览器中却没有发生。

Answer 1

您是否尝试取消注释polyfills.ts文件中的某些行？ （与index.html相同的级别）

如果不是，则应查看此文件，并取消注释IE11所需的所有行。

希望它能解决您的问题！

Answer 2

您遇到的错误与Webpack，polyfills无关，也与有人在评论中要求的无关，无论您是否在操纵DOM。

它与Angular的依赖注入系统有关。

错误只是说无法解析您要注入到PlanningComponent构造函数中的第三个参数。 这是因为Angular无法在PlanningComponent的注入器或任何父注入器中找到DI令牌 ，直到根注入器为止。

除了Dependency Injection，Angular Docs还对Hierarchical Injector进行了很好的概述，这可能有助于进一步了解该主题： https : //angular.io/guide/hierarchical-dependency-injection 。

很乐意提供更多信息，但到目前为止，我可以提供您提供的详细信息。 希望对您有所帮助！

Answer 3

IE11，以及其他一些较旧的浏览器，要求对ES6 Reflect进行依赖项注入。 core-js提供了此功能，您似乎已经安装了它： https : //github.com/zloirock/core-js#ecmascript-6-reflect 。

有几种解决方法：

• 如果您使用@angular/cli ，则只需取消注释polyfills.ts文件中的相关行（请参见下面的链接）。

• 如果您不使用CLI，则需要在捆绑商品条目的开头导入相关的polyfill，以确保Reflect可用于解决依赖关系。 无论如何，这基本上看起来应该与CLI的polyfills.ts文件非常相似。

作为参考，这是CLI通过Angular默认示意图提供的polyfills文件的蓝图： https : //github.com/angular/devkit/blob/v6.0.5/packages/schematics/angular/application/files/src /polyfills.ts#L41 。 注意，在撰写本文时，我正在链接到当前版本v6.0.5。

此外，Angular文档还提供了方便的Polyfill列表，包括强制性的和建议性的，包括支持IE所需的一切： https : //angular.io/guide/browser-support#polyfill-libs 。

希望这可以帮助！