Another developer complaining about IE11 not working - Angular 7

Note: If your issue/feature-request/question is regarding the AWS AppSync service, please log it in the official AWS AppSync forum

Do you want to request a feature or report a bug? Bug What is the current behavior? App works fine on Chrome, Edge, Firefox, not on IE. it produces 2 errors:

One is pointing to vendor AnimationBuilder

And the other one is pointing to my app routing:

not sure if it correctly parsed the main.js and points to the correct file, but in chrome when opening main.js it does look like it is pointing in the right direction:

/*line 145-->*/ let AppRoutingModule = class AppRoutingModule {
};
AppRoutingModule = __decorate([
    Object(_angular_core__WEBPACK_IMPORTED_MODULE_0__["NgModule"])({
        imports: [_angular_router__WEBPACK_IMPORTED_MODULE_1__["RouterModule"].forRoot(routes)],
        exports: [_angular_router__WEBPACK_IMPORTED_MODULE_1__["RouterModule"]]
    })
], AppRoutingModule);

What is the expected behavior? A beautifully runable project! Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions?

version: Angular 7.0.0 (I did not test previous versions). environment: IE11 browser.

package.json

{
  "name": "babywatcher-app",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^7.0.0",
    "@angular/cdk": "^7.1.0",
    "@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/material": "^7.1.0",
    "@angular/platform-browser": "~7.0.0",
    "@angular/platform-browser-dynamic": "~7.0.0",
    "@angular/router": "~7.0.0",
    "@ngx-translate/core": "^11.0.0",
    "@ngx-translate/http-loader": "^4.0.0",
    "@types/applicationinsights-js": "^1.0.7",
    "applicationinsights-js": "^1.0.20",
    "bootstrap": "^4.1.3",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "jquery": "^3.3.1",
    "json-loader": "^0.5.7",
    "moment": "^2.22.2",
    "ngx-webstorage": "^3.0.0-beta.13",
    "rxjs": "~6.3.3",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.10.0",
    "@angular/cli": "~7.0.5",
    "@angular/compiler-cli": "~7.0.0",
    "@angular/language-service": "~7.0.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.1.6"
  }
}

angular.json is standard, nothing change except for adding some styles and scripts:

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "ClientApp": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "less"
        }
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/ClientApp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.css",
              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css"

            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js",
              "src/js/adyen.encrypt.nodom.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,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                }
              ]
            }
          }
        },
...more stuff

tsconfig.json: I did play around with this because I am still receiving intellisense (VS2017) errors while according to several blogs this config should be fine.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",//es6 not supported for IE11
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es6",
      "dom"
    ],
  }
}

Like the documentation in the polyfills.ts describes, I added a much of packages which should support IE11.

/** 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';

// import 'core-js/es6/array';

 import 'classlist.js';  // Run `npm install --save classlist.js`.

 import 'web-animations-js';  // Run `npm install --save web-animations-js`.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.

I have attempted to reproduce the error in a plain app. So far I was not able to reproduce it so I am continue doing so to find out what is causing the issue. In the meantime I hope someone is spotting a mistake I have made.

awslabs / aws-mobile-appsync-sdk-js

Another developer complaining about IE11 not working - Angular 7 #314