angular - IE11 上的 Webpack + Angular(4) + ES6 无法正常工作

Question

我已经对这个问题进行了大量调查，老实说，我不知道接下来该尝试什么。出于某种原因，我的 webpack 无法在 IE11(我尝试过的唯一 IE)、装有 iOS 9.3.5 的 iPad 上的 Safari 和一些 Android 手机上执行。我不确定他们是否都有同样的问题，但在这里我展示了 IE。我得到的实际错误是 SCRIPT1002: Syntax error:

    "use strict";
eval("\r\nvar __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {\r\n    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;\r\n    if (typeof Reflect === \"object\" && typeof Reflect.decorate === \"function\") r = Reflect.decorate(decorators, target, key, desc);\r\n    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;\r\n    return c > 3 && r && 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");

现在，我一直在使用几个 polyfills.ts，添加不同的包和导入，例如英雄之旅中建议的包和导入 https://github.com/johnpapa/angular-tour-of-heroes/blob/master/src/polyfills.ts但这似乎不起作用。我开始相信这是一个 webpack 问题，但同样，我可能在这里遗漏了一些东西。我在一个只有应用程序组件的简单应用程序上重现了错误:

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "app.component.html",
})
export class AppComponent { }

app.module.ts:

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 { }

这在 iPhone 上的 Chrome、FF 和 Safari 上运行良好(iOS 10+。我知道有些人在旧版本的 iOS 上没有遇到这个问题，但就像我说的，我在这里有点迷路而不是确定这怎么可能)。

我的 packages.json 非常简单，使用最新的包来快速启动和运行它:

{
  "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"
  }
}

webpack 配置同样非常简单。 webpack.common.js:

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')
    )
  ]
};

和 webpack.dev.js:

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'
  }
});

我的 vendor.ts 非常标准:

// Angular
import "@angular/common";
import "@angular/core";
import "@angular/platform-browser";
import "@angular/platform-browser-dynamic";
import "@angular/router";

// RxJS
import "rxjs";

main.ts 也是如此:

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);

我目前使用的 polyfills.ts:

/**
 * 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 >= 10, Chrome >= 55 (including Opera),
 * Edge >= 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";

最后是 index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <script>
        document.write('<base href="' + document.location + '" />');
    </script>
    <title>My website</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <my-app>
    </my-app>
</body>

</html>

tsconfig.json:

{
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true
    },
    "exclude":[
        "node_modules"
    ]
}

现在我的问题是:是否可以在 IE11 和其他一些浏览器上运行针对 ES6 的 webpack 应用程序？我已经搜索了很多，但不幸的是我还没有找到一个可行的解决方案。我想如果我能够“调试”webpack 并了解失败的原因，我或许可以更好地理解实际问题，但我不知道该怎么做，也不知道我是否可以针对任何浏览器做到这一点。

谢谢。

Answer 1

我想您必须将此代码添加到您的 polyfills.ts

 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
 import 'core-js/es6/parse-int';
 import 'core-js/es6/parse-float';
 import 'core-js/es6/number';
 import 'core-js/es6/math';
 import 'core-js/es6/string';
 import 'core-js/es6/date';
 import 'core-js/es6/array';
 import 'core-js/es6/regexp';
 import 'core-js/es6/map';
 import 'core-js/es6/set';

检查是否添加了所有内容。在大多数情况下这会有所帮助。在我的 angular2 项目中，我必须添加

<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.33.3/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://npmcdn.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

到 index.html。在Angular4中，这个问题应该已经解决了，不过你可以试试看。