Angular 8应用程序无法在IE中运行。 (不使用Angular CLI)

时间:2020-06-26 20:11:18

标签: javascript angular internet-explorer-11 angular8 polyfills

最近我们已将应用程序从Angular 5升级到8。它在Chrome和Microsoft Edge中运行正常,但在IE 11中却无法正常工作。我没有使用Angular CLI,因此请不要发布基于CLI的解决方案。

我添加了core-js和core-js-bundle作为polyfill,使其可以与IE 11一起使用,但到目前为止没有成功。

这是我的package.json

"dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "brace": "^0.11.1",
    "core-js": "^3.6.5",
    "core-js-bundle": "^3.6.5",
    "moment": "2.18.1",
    "ng2-ace-editor": "^0.3.9",
    "ng2-dragula": "1.5.0",
    "primeicons": "^2.0.0",
    "primeng": "6.1.7",
    "reflect-metadata": "^0.1.3",
    "rxjs": "~6.4.0",
    "systemjs": "^0.19.27",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  }

这是我的index.html

<script src="~/App/Shared/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/App/node_modules/core-js-bundle/index.js"></script>
<script src="~/App/node_modules/zone.js/dist/zone.js"></script> 
<script src="~/App/node_modules/reflect-metadata/Reflect.js"></script> 
<script src="~/App/node_modules/systemjs/dist/system.src.js"></script>
<script src="~/App/Shared/Scripts/systemjs.config.js"></script>
 
<script>

    // bootstrap the application
    System.import('myApp').then(function (m) {
        m.bootstrap();
    })
</script>

<my-app>
    <div style="padding-top:20px;">Loading...</div>
</my-app>

这是tsconfig.json(我也尝试过使用lib:es2018)

{
  "compileOnSave": true,
  "compilerOptions": {
    "lib": [ "es2017", "dom" ],
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  },
  "exclude": [
    "node_modules"
  ]
}

如果我没有在HTML中包含 core-js-bundle.js 文件,则会收到以下错误消息:

SCRIPT5009: 'Symbol' is undefined

Potentially unhandled rejection [2] TypeError: Object doesn't support property or method 'fill'
       at ReflectionCapabilities.prototype._ownParameters (eval code:10977:13)
       at ReflectionCapabilities.prototype.parameters (eval code:10986:13)
       at convertInjectableProviderToFactory (eval code:11318:17)
       at preR3NgModuleCompile (eval code:25627:9)
       at ɵ1$5 (eval code:25616:29)
       at TypeDecorator (eval code:228:21)
       at DecorateConstructor (http://localhost/UI/App/node_modules/reflect-metadata/Reflect.js:541:17)
       at decorate (http://localhost/UI/App/node_modules/reflect-metadata/Reflect.js:130:17)
       at __decorate (eval code:161:84)
       at Anonymous function (eval code:6477:9)

如果我在html中包含 core-js-bundle.js 文件,则会出现以下错误:

HTML1300: Navigation occurred.
File: reports
Unhandled Promise rejection: Multiple definitions of a property not allowed in strict mode ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError: Multiple definitions of a property not allowed in strict mode SyntaxError: Multiple definitions of a property not allowed in strict mode
   at JitEvaluator.prototype.evaluateCode (eval code:6789:13)
   at JitEvaluator.prototype.evaluateStatements (eval code:6759:13)
   at JitCompiler.prototype._interpretOrJit (eval code:27708:17)
   at JitCompiler.prototype._compileTemplate (eval code:27678:13)
   at Anonymous function (eval code:27619:53)
   at forEach (http://localhost/UI/App/node_modules/core-js-bundle/index.js:5237:11)
   at JitCompiler.prototype._compileComponents (eval code:27619:13)
   at Anonymous function (eval code:27529:17)
   at ZoneDelegate.prototype.invoke (http://localhost/UI/App/node_modules/zone.js/dist/zone.js:390:13)
   at Zone.prototype.run (http://localhost/UI/App/node_modules/zone.js/dist/zone.js:150:17)
   "Unhandled Promise rejection:"
   "Multiple definitions of a property not allowed in strict mode"

添加有关如何在不使用CLI的情况下构建此应用程序的更多详细信息

当Angular 1.5发布时,我们开始构建此Web应用程序。最初,我们的应用程序由ASP.net + Angular 1模块组成。然后,角度2出现了完全不同的框架。因此,而不是转换现有模块(那样将需要大量工作)。我们决定在Angular 2中开发新模块,并逐步升级angular 1模块。我们遵循小型SPA的模式,其中在一个SPA中使用angular 1模块,在另一个SPA中使用angular 2模块。我不认为CLI那时(当我们开始开发angular 2模块时)是一回事。要加载模块,我们使用SystemJS。正如我发布的HTML所示。

0 个答案:

没有答案