0

我有一个使用 webpack 设置的 angular 2 应用程序。我想支持 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：错误：无法解析 PlanningComponent 的所有参数：（[object Object]、[object Object]、?、[object Object]）。

这是可选参数的一些问题。而且有时它会引发其他一些错误，例如 S

CRIPT1028：预期的标识符、字符串或数字

但它不会在其他浏览器中发生。

4

3 回答 3

0

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!

于 2017-10-12T10:54:23.500 回答
0

您是否尝试取消注释polyfills.ts文件中的某些行？（同一级别index.html）

如果没有，您应该查看此文件并取消注释 IE11 所需的所有行。

我希望它能解决你的问题！

于 2017-10-12T10:02:22.110 回答
0

IE11 和其他一些较旧的浏览器一样，需要 ES6 的 polyfillReflect来进行依赖注入。core-js提供了这个，你似乎已经安装了：https ://github.com/zloirock/core-js#ecmascript-6-reflect 。

有几种方法可以解决这个问题：

  • 如果您使用的是@angular/cli，您只需取消注释polyfills.ts文件中的相关行（请参见下面的链接）。

  • 如果您不使用 CLI，则需要在包条目的开头导入相关的 polyfill，以确保Reflect可用于解析依赖项。polyfills.ts无论如何，这基本上看起来应该与 CLI 的文件非常相似。

作为参考，这是 CLI 通过 Angular 默认原理图提供的 polyfills 文件的蓝图：https ://github.com/angular/devkit/blob/v6.0.5/packages/schematics/angular/application/files/src /polyfills.ts#L41。请注意，在撰写本文时，我正在链接到当前版本 - v6.0.5。

此外，Angular 文档还提供了一个方便的 polyfill 列表，包括强制的和建议的，包括支持 IE 所需的一切：https ://angular.io/guide/browser-support#polyfill-libs 。

希望这可以帮助！

于 2018-05-26T23:46:14.430 回答