title: Webpack + Angular(4) + ES6 on IE11 not working
body: <p>I've been investigating quite a bit this issue and honestly I don't know what to try next. For some reason my webpack is not able to be executed in IE11 (the only IE I've tried), Safari on iPads with iOS 9.3.5 and some Android phones. I'm not sure if they all have the same issue but here I show the IE one. The actual error I'm getting is SCRIPT1002: Syntax error:</p>
  
  <pre><code>    "use strict";
  eval("\r\nvar __decorate = (this &amp;&amp; this.__decorate) || function (decorators, target, key, desc) {\r\n    var c = arguments.length, r = c &lt; 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" &amp;&amp; typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i &gt;= 0; i--) if (d = decorators[i]) r = (c &lt; 3 ? d(r) : c &gt; 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c &gt; 3 &amp;&amp; r &amp;&amp; Object.defineProperty(target, key, r), r;\r\n};\r\nObject.defineProperty(exports, \"__esModule\", { value: true });\r\nconst core_1 = __webpack_require__(38);\r\nconst platform_browser_1 = __webpack_require__(92);\r\nconst app_component_1 = __webpack_require__(714);\r\nlet AppModule = class AppModule {\r\n};\r\nAppModule = __decorate([\r\n    core_1.NgModule({\r\n        bootstrap: [\r\n            app_component_1.AppComponent,\r\n        ],\r\n        declarations: [\r\n            app_component_1.AppComponent,\r\n        ],\r\n        imports: [\r\n            platform_browser_1.BrowserModule,\r\n        ],\r\n    })\r\n], AppModule);\r\nexports.AppModule = AppModule;\r\n//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiNzEzLmpzIiwic291cmNlcyI6WyJ3ZWJwYWNrOi8vLy4vc3JjL2FwcC9hcHAubW9kdWxlLnRzPzAwZmUiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgTmdNb2R1bGUgfSBmcm9tIFwiQGFuZ3VsYXIvY29yZVwiO1xyXG5pbXBvcnQgeyBCcm93c2VyTW9kdWxlIH0gZnJvbSBcIkBhbmd1bGFyL3BsYXRmb3JtLWJyb3dzZXJcIjtcclxuaW1wb3J0IHsgQXBwQ29tcG9uZW50IH0gZnJvbSBcIi4vYXBwLmNvbXBvbmVudFwiO1xyXG5cclxuQE5nTW9kdWxlKHtcclxuICBib290c3RyYXA6IFtcclxuICAgIEFwcENvbXBvbmVudCxcclxuICBdLFxyXG4gIGRlY2xhcmF0aW9uczogW1xyXG4gICAgQXBwQ29tcG9uZW50LFxyXG4gIF0sXHJcbiAgaW1wb3J0czogW1xyXG4gICAgQnJvd3Nlck1vZHVsZSxcclxuICBdLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQXBwTW9kdWxlIHsgfVxyXG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gbm9kZV9tb2R1bGVzL2FuZ3VsYXIyLXRlbXBsYXRlLWxvYWRlciEuL25vZGVfbW9kdWxlcy90c2xpbnQtbG9hZGVyPz9yZWYtLTAhLi9zcmMvYXBwL2FwcC5tb2R1bGUudHMiXSwibWFwcGluZ3MiOiI7Ozs7Ozs7O0FBQUE7QUFDQTtBQUNBO0FBYUE7QUFBQTtBQUFBO0FBWEE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQUE7Iiwic291cmNlUm9vdCI6IiJ9\n//# sourceURL=webpack-internal:///713\n");
  </code></pre>
  
  <p>Now, I've been playing around with several polyfills.ts, adding different packages and imports such as the ones suggested in the tour of heroes <a href="https://github.com/johnpapa/angular-tour-of-heroes/blob/master/src/polyfills.ts" rel="nofollow noreferrer">https://github.com/johnpapa/angular-tour-of-heroes/blob/master/src/polyfills.ts</a> however that doesn't seem to work. I'm starting to believe it's a webpack issue but again, I may be missing something here. I reproduced the error on a simple app with just the app-component:</p>
  
  <pre><code>import { Component } from "@angular/core";
  
  @Component({
    selector: "my-app",
    templateUrl: "app.component.html",
  })
  export class AppComponent { }
  </code></pre>
  
  <p>The app.module.ts:</p>
  
  <pre><code>import { NgModule } from "@angular/core";
  import { BrowserModule } from "@angular/platform-browser";
  import { AppComponent } from "./app.component";
  
  @NgModule({
    bootstrap: [
      AppComponent,
    ],
    declarations: [
      AppComponent,
    ],
    imports: [
      BrowserModule,
    ],
  })
  export class AppModule { }
  </code></pre>
  
  <p>and this works fine on Chrome, FF and Safari on the iPhones (iOS 10+ . I know some people didn't experience the issue on older versions of iOS but like I say, I'm a bit lost here and not sure how that's possible).</p>
  
  <p>My packages.json is quite simple and took the latest of the packages to get this up and running quickly:</p>
  
  <pre><code>{
    "name": "my-website",
    "version": "1.0.0",
    "description": "My Website",
    "scripts": {
      "start": "webpack-dev-server --inline --progress --port 10209",
      "postinstall": "typings install"
    },
    "author": "Me",
    "license": "ISC",
    "dependencies": {
      "@angular/common": "4.3.5",
      "@angular/compiler": "4.3.5",
      "@angular/core": "4.3.5",
      "@angular/platform-browser": "4.3.5",
      "@angular/platform-browser-dynamic": "4.3.5",
      "@angular/router": "4.3.5",
      "classlist.js": "1.1.20150312",
      "core-js": "2.5.0",
      "intl": "1.2.5",
      "mdn-polyfills": "5.0.0",
      "rxjs": "5.4.3",
      "web-animations-js": "2.3.1",
      "zone.js": "0.8.16"
    },
    "devDependencies": {
      "angular2-template-loader": "0.6.2",
      "awesome-typescript-loader": "3.2.3",
      "babel-minify": "0.2.0",
      "css-loader": "0.28.5",
      "extract-text-webpack-plugin": "3.0.0",
      "file-loader": "0.11.2",
      "html-loader": "0.5.1",
      "html-webpack-plugin": "2.30.1",
      "null-loader": "0.1.1",
      "raw-loader": "0.5.1",
      "rimraf": "2.6.1",
      "style-loader": "0.18.2",
      "to-string-loader": "1.1.5",
      "tslint": "5.6.0",
      "tslint-loader": "3.5.3",
      "typescript": "2.4.2",
      "typings": "2.1.1",
      "url-loader": "0.5.9",
      "webpack": "3.5.5",
      "webpack-dev-server": "2.7.1",
      "webpack-merge": "4.1.0"
    }
  }
  </code></pre>
  
  <p>The webpack configuration is, again quite straightforward. webpack.common.js:</p>
  
  <pre><code>const webpack = require('webpack');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const helpers = require('./helpers.js');
  
  module.exports = {
    entry: {
      'polyfills': './src/polyfills.ts',
      'vendor': './src/vendor.ts',
      'app': './src/main.ts'
    },
  
    resolve: {
      extensions: ['.ts', '.js']
    },
  
    module: {
      rules: [{
          test: /\.ts$/,
          enforce: 'pre',
          loader: 'tslint-loader',
          options: {
            emitErrors: true,
            tsConfigFile: 'tsConfig.json',
            configFile: 'tslint.json',
            failOnHint: true
          }
        },
        {
          test: /\.ts$/,
          loaders: [{
              loader: 'awesome-typescript-loader',
              options: {
                configFileName: 'tsconfig.json'
              }
            },
            'angular2-template-loader'
          ]
        },
        {
          test: /\.html$/,
          loader: 'html-loader'
        },
        {
          test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot|ico)$/,
          loader: 'file-loader?name=assets/images/[name].[ext]'
        },
        {
          test: /\.css$/,
          exclude: helpers.root('src', 'app'),
          loader: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })
        },
        {
          test: /\.css$/,
          include: helpers.root('src', 'app'),
          use: [{
            loader: 'raw-loader'
          }]
        },
      ]
    },
  
    plugins: [
      new webpack.optimize.CommonsChunkPlugin({
        name: ['app', 'vendor', 'polyfills']
      }),
  
      new HtmlWebpackPlugin({
        template: 'src/index.html',
      }),
  
      new webpack.ContextReplacementPlugin(
        /angular(\\|\/)core(\\|\/)@angular/,
        helpers.root('../src')
      )
    ]
  };
  </code></pre>
  
  <p>and the webpack.dev.js:</p>
  
  <pre><code>const webpackMerge = require('webpack-merge');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  const commonConfig = require('./webpack.common.js');
  const helpers = require('./helpers');
  
  module.exports = webpackMerge(commonConfig, {
    devtool: 'cheap-module-eval-source-map',
  
    output: {
      path: helpers.root('dist'),
      publicPath: 'http://localhost:10209/',
      filename: '[name].js',
      chunkFilename: '[id].chunk.js'
    },
  
    plugins: [
      new ExtractTextPlugin('[name].css')
    ],
  
    devServer: {
      historyApiFallback: true,
      stats: 'minimal'
    }
  });
  </code></pre>
  
  <p>My vendor.ts is very standard:</p>
  
  <pre><code>// Angular
  import "@angular/common";
  import "@angular/core";
  import "@angular/platform-browser";
  import "@angular/platform-browser-dynamic";
  import "@angular/router";
  
  // RxJS
  import "rxjs";
  </code></pre>
  
  <p>and so is the main.ts:</p>
  
  <pre><code>import { enableProdMode } from "@angular/core";
  import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
  import { AppModule } from "./app/app.module";
  
  if (process.env.ENV === "production") {
      enableProdMode();
  }
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p>The polyfills.ts I'm currently using:</p>
  
  <pre><code>/**
   * This file includes polyfills needed by Angular and is loaded before the app.
   * You can add your own extra polyfills to this file.
   *
   * This file is divided into 2 sections:
   *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
   *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
   *      file.
   *
   * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
   * automatically update themselves. This includes Safari &gt;= 10, Chrome &gt;= 55 (including Opera),
   * Edge &gt;= 13 on the desktop, and iOS 10 and Chrome on mobile.
   *
   * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
   */
  
  /***************************************************************************************************
   * BROWSER POLYFILLS
   */
  
  /* IE9, IE10 and IE11 requires all of the following polyfills. **/
  import "core-js/es6/symbol";
  // tslint:disable-next-line:ordered-imports
  import "core-js/es6/object";
  import "core-js/es6/function";
  import "core-js/es6/parse-int";
  // tslint:disable-next-line:ordered-imports
  import "core-js/es6/parse-float";
  import "core-js/es6/number";
  // tslint:disable-next-line:ordered-imports
  import "core-js/es6/math";
  import "core-js/es6/string";
  // tslint:disable-next-line:ordered-imports
  import "core-js/es6/date";
  import "core-js/es6/array";
  import "core-js/es6/regexp";
  // tslint:disable-next-line:ordered-imports
  import "core-js/es6/map";
  import "core-js/es6/set";
  /** IE10 and IE11 requires the following for NgClass support on SVG elements */
  // tslint:disable-next-line:align
  // tslint:disable-next-line:ordered-imports
  import "classlist.js";  // Run `npm install --save classlist.js`.
  
  /* Evergreen browsers require these. **/
  import "core-js/es6/reflect";
  import "core-js/es7/reflect";
  
  /**
   * Required to support Web Animations `@angular/animation`.
   * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
   */
  // tslint:disable-next-line:align
  import "web-animations-js";  // Run `npm install --save web-animations-js`.
  
  /***************************************************************************************************
   * Zone JS is required by Angular itself.
   */
  import "zone.js/dist/zone"; // Included with Angular CLI.
  
  /***************************************************************************************************
   * APPLICATION IMPORTS
   */
  
  /**
   * Date, currency, decimal and percent pipes.
   * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
   */
  // tslint:disable-next-line:align
  import "intl";  // Run `npm install --save intl`.
  /**
   * Need to import at least one locale-data with intl.
   */
  // tslint:disable-next-line:align
  import "intl/locale-data/jsonp/en";
  </code></pre>
  
  <p>And finally the index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;script&gt;
          document.write('&lt;base href="' + document.location + '" /&gt;');
      &lt;/script&gt;
      &lt;title&gt;My website&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;my-app&gt;
      &lt;/my-app&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>The tsconfig.json:</p>
  
  <pre><code>{
      "compilerOptions": {
          "target": "es6",
          "module": "commonjs",
          "moduleResolution": "node",
          "sourceMap": true,
          "emitDecoratorMetadata": true,
          "experimentalDecorators": true,
          "removeComments": false,
          "noImplicitAny": true,
          "suppressImplicitAnyIndexErrors": true
      },
      "exclude":[
          "node_modules"
      ]
  }
  </code></pre>
  
  <p>Now my question is: Is it possible to run and webpack'ed app targeting ES6 on IE11 and some of the other browsers? I have already searched quite a bit but unfortunately I haven't come across a working solution for this. I guess if I was able to "debug" webpack and see why that's failing I could perhaps get a better understanding of the actual problem but I don't know how to do that and whether I can do that against any browser.</p>
  
  <p>Thanks.</p>