I have created an webapplication with Angular 11. Now, the customer will run it with IE11 (for showing a webpage on a big TV-Screen which still exists and have an integrated IE11-Browser)
for this,, I have set up all this
https://angular.io/guide/deployment#local-development-in-older-browsers
and uncommented the lines in polyfills.ts (and run the npm-commands):
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
additionally added this in index.html:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
when I run now my application after rebuild with
ng serve --configuration es5
and load it in IE11, I get the following errors:
SCRIPT1010: Expected identifier polyfills.js (143,43)
SCRIPT1020: Syntax error vendor.js (730,1)
SCRIPT1002: Syntax error main.js (13,1)
This are the referenced Lines:
polyfills (143):
const $localize = function (messageParts, ...expressions) {
vendor.js (730):
class Portal {
main.js (13):
this.newValue = newValue.toString();
Does anyone have any idea what else I can do to run the application with IE11?
Update:
Here is my angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"webportal": {
"i18n": {
"sourceLocale": "ch-DE",
"locales": {
"en": "src/translations/webportal.en.xlf"
}
},
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/webportal",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets",
{
"glob": "**/*",
"input": "node_modules/ngx-extended-pdf-viewer/assets/",
"output": "/assets/"
}
],
"styles": [
"node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",
"node_modules/@fortawesome/fontawesome-free/scss/solid.scss",
"node_modules/@fortawesome/fontawesome-free/scss/regular.scss",
"node_modules/@fortawesome/fontawesome-free/scss/brands.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/bootstrap/bootstrap.scss",
"node_modules/ng-uikit-pro-standard/assets/scss/mdb.scss",
"node_modules/animate.css/animate.css",
"src/styles.scss"
],
"scripts": [
"node_modules/chart.js/dist/Chart.js",
"node_modules/screenfull/dist/screenfull.js",
"node_modules/hammerjs/hammer.min.js"
]
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
]
},
"es5": {
"tsConfig": "./tsconfig-es5.app.json"
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "webportal:build"
},
"configurations": {
"production": {
"browserTarget": "webportal:build:production"
},
"es5": {
"browserTarget": "webportal:build:es5"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "webportal:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "webportal:serve"
},
"configurations": {
"production": {
"devServerTarget": "webportal:serve:production"
}
}
}
}
}
},
"defaultProject": "webportal",
"cli": {
"analytics": false
}
}
polyfills.ts
? I didn't uncomment the polyfills and my new Angular 12 app can work well in IE 11. Besides, what is your.browserslist
file like? Have you removed the "not" before "IE 11"? If you want to support IE 11, you need to remove "not" prefix before "IE 11".