Recently we have upgraded our application from Angular 5 to 8. It is working fine in Chrome and Microsoft Edge but not in IE 11. I am not using Angular CLI so please do not post CLI based solutions.
I added core-js and core-js-bundle as a polyfill to make it work with IE 11 but no success till now.
Here is my 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"
}
This is my 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>
Here is the tsconfig.json ( I have tried using lib : es2018 as well )
{
"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"
]
}
If I don't include core-js-bundle.js file in the html, I get these errors:
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)
If I include core-js-bundle.js file in the html, I get this errors:
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"
Adding more details about how this application was built without CLI
We started building this web application when Angular 1.5 was released. Initially our application was consist of ASP.net + Angular 1 modules. Then angular 2 came with totally different framework. So instead of converting existing modules ( As that will be lot of work). We decided to develop new modules in Angular 2 and gradually upgrade the angular 1 modules. We followed the pattern of mini-SPAs, where angular 1 modules are in one SPA and angular 2 modules are in other SPA. I don't think so CLI was a thing back then ( when we started developing angular 2 modules ). To load the modules, we use SystemJS. As it is shown from the HTML I posted.
