Angular 2 app not supporting in IE11

Question

I have an angular 2 app setting up with webpack. I want to support the app in Internet explorer 11. In my 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' }
        ])
    ]    
}

The error in console window is

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

It is some problem with optional parameter. And also some times it throws some other errors like S

CRIPT1028: Expected identifier, string or number

But it is not happening in other browsers.

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

The error you're getting is not related to Webpack, polyfills, nor—as somebody asked in a comment—whether you're manipulating the DOM or not.

It's related to Angular's Dependency Injection system.

The error is simply saying that the third parameter you're seeking to inject into the PlanningComponent constructor cannot be resolved. This is because Angular cannot find the DI token in the injector for PlanningComponent or in any of the parent injectors all the way up to the root injector.

In addition to Dependency Injection, the Angular Docs have a very good overview on Hierarchical Injectors, which might be helpful in learning more about the subject: https://angular.io/guide/hierarchical-dependency-injection.

Happy to provide more information, but this is as far as I can go with the details you've provided so far. Hope it proves helpful!

Answer 3

IE11, amongst a few other older browsers, require a polyfill for ES6 Reflect for Dependency Injection. core-js provides this, which you already seem to have installed: https://github.com/zloirock/core-js#ecmascript-6-reflect.

There are a couple ways to go about this:

• If you're using the @angular/cli, you'll simply need to uncomment the relevant line in your polyfills.ts file (see link below).

• If you're not using the CLI, you'll need to import the relevant polyfills at the beginning of your bundle entry to ensure Reflect is available to resolve dependencies. This should basically look very similar to the CLI's polyfills.ts file anyway.

For reference, this is the blueprint for the polyfills file provided by the CLI via the Angular default schematics: https://github.com/angular/devkit/blob/v6.0.5/packages/schematics/angular/application/files/src/polyfills.ts#L41. Note I'm linking to the current version—v6.0.5—at the time of this writing.

Additionally, the Angular docs also provide a handy list of polyfills, both mandatory and suggested, including everything you'd need to support IE: https://angular.io/guide/browser-support#polyfill-libs.

Hope this helps!