Angular 2 application ne prend pas en charge dans IE11

Question

J'ai une application angulaire 2 application avec webpack. Je veux soutenir l'application dans Internet Explorer 11. Dans mon 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' } 
     ]) 
    ]  
} 

L'erreur dans la fenêtre de la console est

SCRIPT5022: Error: Can't resolve all parameters for PlanningComponent: ([object Object], [object Object], ?, [object Object]).

Il y a un problème avec le paramètre optionnel. Et aussi quelques fois il jette quelques autres erreurs comme S

CRIPT1028: Expected identifier, string or number

Mais il ne se passe pas dans d'autres navigateurs.

Answer 1

Avez-vous essayé de décommenter certaines lignes dans le fichier polyfills.ts? (Même niveau que index.html)

Si ce n'est pas le cas, vous devriez jeter un coup d'œil à ce fichier et décommenter toutes les lignes requises pour IE11.

J'espère que cela va résoudre votre problème!

Answer 2

L'erreur que vous obtenez n'est pas liée à Webpack, aux polyfills, ni à la question de savoir si vous manipulez le DOM ou non.

Il est associé au système d'injection de dépendances d'Angular. L'erreur indique simplement que le troisième paramètre que vous souhaitez injecter dans le constructeur PlanningComponent ne peut pas être résolu. C'est parce que Angular ne peut pas trouver le DI token dans l'injecteur pour PlanningComponent ou dans l'un des injecteurs parents tout le chemin jusqu'à l'injecteur de racine.

En plus de l'injection de dépendances, les documents Angular ont une très bonne vue d'ensemble sur les injecteurs hiérarchiques, ce qui peut être utile pour en savoir plus sur le sujet: https://angular.io/guide/hierarchical-dependency-injection.

Heureux de fournir plus d'informations, mais c'est aussi loin que je peux aller avec les détails que vous avez fournis jusqu'à présent. J'espère que cela sera utile!