Angular IE11 not working. Getting SCRIPT1002 Syntax Error
For others running across similar issues:
Angular 8 has made the default target es2015
instead of es5
You'll want to create a tsconfig.es5.json
so that you only run on es5 in development mode, but more information on that can be found here: https://github.com/angular/angular-cli/issues/14455
You'll also want to uncomment the polyfills in polyfills.ts
depending on what you are using.
For others and for the asker:
Then, you'll want to add a flag to zone.js
Add import './zone-flags.ts';
before import 'zone.js/dist/zone';
then create the zone-flags.ts
file in the same directory as the polyfills.ts
.
In the zone-flags.ts
file add the following line:
(window as any).__Zone_enable_cross_context_check = true;
Hopefully after that everything is working! If you followed the link above,
Execute: ng serve --configuration es5
to run your project in IE in development mode.
Update
It looks like angular actually has documentation on this: angular.io/guide/deployment#fallback
Look for "Local development in older browsers" and then "Configuring serve for ES5"
The issue is caused by Angular 8's differential loading process.
Fluqz
Updated on June 04, 2022Comments
-
Fluqz almost 2 years
Trying to get Angular to work in IE 11. I tried everything I found on the web already.
I'm getting the following errors:
SCRIPT1002: Syntax error
File: polyfills.js, Line: 2358, Column: 1
Line 2358
class Disposable { /** * Frees internal resources. */ dispose() {} }
SCRIPT1002: Syntax error
File: scripts.js, Line: 424, Column: 35
line 424
let SoapService = SoapService_1 = class SoapService { constructor(servicePort, servicePath, targetNamespace) { this.debug = false; this.asynchronous = true; this.localName = false; this.servicePort = ''; this.servicePath = ''; this.serviceUrl = ''; this.targetNamespace = ''; this.envelopeBuilder_ = null; this.xmlResponseHandler_ = null; this.jsoResponseHandler_ = null; this.servicePort = servicePort; this.servicePath = servicePath; this.serviceUrl = servicePort + servicePath; if (undefined !== targetNamespace) this.targetNamespace = targetNamespace; }
SCRIPT1002: Syntax error
File: vendor.js, Line: 88, Column: 1
Line 88
class AnimationBuilder { }
SCRIPT1002: Syntax error
File: main.js, Line: 91422, Column: 35
Line 91422 Same as above
let SoapService = SoapService_1 = class SoapService { constructor(servicePort, servicePath, targetNamespace) { ....
I do have a soap connection which wont work on localhost anyway. So thats probably not the problem
Added this line in main.ts
/// <reference path= "../node_modules/typescript/lib/lib.es6.d.ts" />
Added this script in index.html
<script src="/node_modules/core-js/client/shim.min.js"></script>
tsconfig.json
{ "compileOnSave": false, "compilerOptions": { "forceConsistentCasingInFileNames":true, "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom", "es5", "es6" ] }, "files": [ "src/app/app.module.ts" ], "include": [ "src/**/*" ] }
I also have a tsconfig.app.json and tsconfig.spec.json
polyfills.js
/** * This file includes polyfills needed by Angular and is loaded before the app. * You can add your own extra polyfills to this file. * * This file is divided into 2 sections: * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. * 2. Application imports. Files imported after ZoneJS that should be loaded before your main * file. * * The current setup is for so-called "evergreen" browsers; the last versions of browsers that * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. * * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html */ /*************************************************************************************************** * BROWSER POLYFILLS */ /** IE9, IE10 and IE11 requires all of the following polyfills. **/ import 'core-js/es6/symbol'; import 'core-js/es6/object'; import 'core-js/es6/function'; import 'core-js/es6/parse-int'; import 'core-js/es6/parse-float'; import 'core-js/es6/number'; import 'core-js/es6/math'; import 'core-js/es6/string'; import 'core-js/es6/date'; import 'core-js/es6/array'; import 'core-js/es6/regexp'; import 'core-js/es6/map'; import 'core-js/es6/weak-map'; import 'core-js/es6/set'; /** IE10 and IE11 requires the following for NgClass support on SVG elements */ import 'classlist.js'; // Run `npm install --save classlist.js`. /** IE10 and IE11 requires the following for the Reflect API. */ import 'core-js/es6/reflect'; /** Evergreen browsers require these. **/ // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. /** * Required to support Web Animations `@angular/platform-browser/animations`. * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation **/ import 'web-animations-js'; // Run `npm install --save web-animations-js`. /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ import 'zone.js/dist/zone'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS */ import 'three'; import 'three-orbitcontrols-ts'; import 'postprocessing';
package.json
{ "name": "regalplaner", "version": "1.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^7.2.1", "@angular/common": "^7.0.0", "@angular/compiler": "^7.0.0", "@angular/core": "^7.0.0", "@angular/forms": "^7.0.0", "@angular/http": "^7.0.0", "@angular/platform-browser": "^7.0.0", "@angular/platform-browser-dynamic": "^7.0.0", "@angular/router": "^7.0.0", "@tweenjs/tween.js": "^17.2.0", "@types/three": "^0.92.20", "autopulous-angular2-soap": "^0.4.7", "classlist.js": "^1.1.20150312", "core-js": "^2.4.1", "dat.gui": "^0.7.5", "es6-tween": "^5.3.0", "n": "^2.1.12", "ng-drag-drop": "^5.0.0", "ng2-drag-drop": "^3.0.2", "ngx-color-picker": "^6.7.0", "normalize.css": "^5.0.0", "postprocessing": "^5.3.1", "rxjs": "^6.3.3", "rxjs-compat": "^6.3.3", "stats-js": "^1.0.0", "three": "^0.94.0", "three-addons": "^1.2.0", "three-gltf-loader": "^1.102.0", "three-orbitcontrols-ts": "^0.1.2", "tween.js": "^16.6.0", "web-animations-js": "^2.3.1", "zone.js": "^0.8.14" }, "devDependencies": { "@angular-devkit/build-angular": "~0.10.0", "@angular/cli": "^7.0.1", "@angular/compiler-cli": "^7.0.0", "@angular/language-service": "^7.0.0", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "^4.0.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "^5.4.1", "ts-node": "~3.2.0", "tslint": "~5.7.0", "typescript": "~3.1.3" } }