Question

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

中

$('#gallery')

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

webpack.config.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"
  ]
}

控制台窗口中的错误是

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

可选参数存在一些问题。而且有时它会抛出一些其他错误小号

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

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

Answer 1

Did you try to uncomment some lines in the polyfills.ts file ? (same level that index.html)

If not, you should have a look to this file and uncomment all lines required for IE11.

I hope it will solve your problem !

Answer 2

您获得的错误与Webpack，polyfill无关，也不像有人在评论中询问的那样 - 您是否正在操纵DOM。

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

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

除了依赖注入之外，Angular Docs还非常了解Hierarchical Injectors，这可能有助于我们更多地了解该主题：https://angular.io/guide/hierarchical-dependency-injection。

很高兴提供更多信息，但就目前为止您提供的详细信息而言，这是我能够做到的。希望它证明有用！

Answer 3

IE11，在其他一些较旧的浏览器中，需要一个用于ES6 Reflect的polyfill用于依赖注入。 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文档还提供了一个方便的填充列表，包括强制和建议，包括您支持IE所需的一切：https://angular.io/guide/browser-support#polyfill-libs。

希望这有帮助！

Angular 2 app在IE11中不支持

3 个答案: