Reputation: 371
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"
}
}
Upvotes: 8
Views: 18251
Reputation: 1181
To complete what @Lionheart Scholar said, there is one final step: registering the zone-flags.ts file in the tsconfig.app.json "files" section, like so:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts",
"src/zone-flags.ts"
],
"include": [
"src/**/*.d.ts"
]
}
Upvotes: 0
Reputation: 95
In tsconfig.json replace "target": "es5", //"target": "es2015",
Upvotes: -3
Reputation: 76
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.
Upvotes: 6
Reputation: 63578
It looks like you are using or transpiring down your JavaScript but it isn't going far enough and you are getting syntax issues because you are trying to use features that IE11 doesn't support.
e.g.
Upvotes: 0