Angular 2應用程序不支持在IE11中

Question

我有一個角度2應用程序設置與webpack。我想支持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: Error: Can't resolve all parameters for PlanningComponent: ([object Object], [object Object], ?, [object Object]).

這是可選參數的一些問題。還有些時候，它會引發一些其他類似錯誤 小號

CRIPT1028: Expected identifier, string or number

但它不是在其他瀏覽器發生。

Answer 1

您是否嘗試取消註釋polyfills.ts文件中的某些行？ （與index.html相同）

如果不是，則應該查看該文件並取消註釋IE11所需的所有行。

我希望它能解決您的問題！

Answer 2

您得到的錯誤與Webpack，polyfills無關，也不像某人在評論中提出的問題 - 無論您是否操縱DOM。

它與Angular的依賴注入系統有關。

錯誤僅僅是說您要尋求注入PlanningComponent構造函數的第三個參數無法解析。這是因爲Angular無法在PlanningComponent的噴油器中找到DI token，或者在任何直接位於根噴油器的主噴油嘴中找不到DI token。

除了依賴注入之外，Angular Docs對分層注入器有很好的概述，這可能有助於更多地瞭解該主題：https://angular.io/guide/hierarchical-dependency-injection。

很高興提供更多信息，但就目前爲止我所能提供的細節而言，這是很有幫助的。希望它證明有幫助！