最近我们已将应用程序从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所示。