title: Angular IE11 not working. Getting SCRIPT1002 Syntax Error
body: <p>Trying to get Angular to work in IE 11.
  I tried everything I found on the web already.</p>
  
  <p>I'm getting the following errors: </p>
  
  <blockquote>
    <p>SCRIPT1002: Syntax error</p>
    
    <p>File: polyfills.js, Line: 2358, Column: 1</p>
  </blockquote>
  
  <p>Line 2358    </p>
  
  <pre><code>class Disposable {
  
      /**
       * Frees internal resources.
       */
  
      dispose() {}
  
  }
  </code></pre>
  
  <blockquote>
    <p>SCRIPT1002: Syntax error</p>
    
    <p>File: scripts.js, Line: 424, Column: 35</p>
  </blockquote>
  
  <p>line 424 </p>
  
  <pre><code>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;
      }
  </code></pre>
  
  <blockquote>
    <p>SCRIPT1002: Syntax error</p>
    
    <p>File: vendor.js, Line: 88, Column: 1</p>
  </blockquote>
  
  <p>Line 88 </p>
  
  <pre><code>class AnimationBuilder {
  }
  </code></pre>
  
  <blockquote>
    <p>SCRIPT1002: Syntax error</p>
    
    <p>File: main.js, Line: 91422, Column: 35</p>
  </blockquote>
  
  <p>Line 91422 Same as above</p>
  
  <pre><code>    let SoapService = SoapService_1 = class SoapService {
          constructor(servicePort, servicePath, targetNamespace) {
  ....
  </code></pre>
  
  <p>I do have a soap connection which wont work on localhost anyway. So thats probably not the problem</p>
  
  <p>Added this line in main.ts </p>
  
  <p><code>/// &lt;reference path= "../node_modules/typescript/lib/lib.es6.d.ts" /&gt;</code></p>
  
  <p>Added this script in index.html</p>
  
  <pre><code>&lt;script src="/node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>tsconfig.json</strong></p>
  
  <pre><code>{
    "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/**/*"
    ]
  }
  </code></pre>
  
  <p>I also have a tsconfig.app.json and tsconfig.spec.json</p>
  
  <p><strong>polyfills.js</strong></p>
  
  <pre><code>/**
   * 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 &gt;= 10, Chrome &gt;= 55 (including Opera),
   * Edge &gt;= 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';
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "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"
    }
  }
  </code></pre>