1

My angular 5 application which is running on angular cli is not working on ie11. What makes me wonder is the application is fine on edge. I have my ployfills set for both ie and edge. On ie11 application is throwing 'ERROR TypeError: Object doesn't support property or method' errors. Please look at my ployfills.ts, tsConfig and angular-cli and let me know what is missing.

I tried commenting web-animations polyfills but no luck. enter image description here

polyfill.ts

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

/** PhantomJS Polyfills  **/
// import 'core-js/es6/object';
// import 'intl';

if (typeof Object.assign !== 'function') {
    Object.assign = function(target) {
      'use strict';
      if (target == null) {
        throw new TypeError('Cannot convert undefined or null to object');
      }

      target = Object(target);
      for (let index = 1; index < arguments.length; index++) {
        const source = arguments[index];
        if (source != null) {
          for (const key in source) {
            if (Object.prototype.hasOwnProperty.call(source, key)) {
              target[key] = source[key];
            }
          }
        }
      }
      return target;
    };
  }

/** 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/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 to support `@angular/animation`. */
import 'web-animations-js';  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';
// import 'core-js/client/shim'; // PhantomJS dependency

import 'hammerjs/hammer'; // Needed for tests to run without errors.


/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import 'zone.js/dist/zone';  // Included with Angular CLI.



/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
import 'intl';  // Run `npm install --save intl`.

tsConfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

angular-cli.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "project": {
    "name": "SampleApp"
  },
  "apps": [
    {
      "root": "client-app",
      "outDir": "wwwroot",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "nee",
      "styles": [
        "styles.scss",
        "neer-theme.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "client-app/tsconfig.app.json"
    },
    {
      "project": "client-app/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {}
  }
}
user3154990
  • 555
  • 4
  • 13
  • 27
  • Please provide the exact errors that you are getting – Daniel W Strimpel May 07 '18 at 14:51
  • ERROR TypeError: Object doesn't support property or method 'yScale' – user3154990 May 07 '18 at 15:35
  • Is that the only one? (your question made it sound like there were multiple ones) Please update your question with the exact message (or messages) and additionally a call stack (or call stacks). – Daniel W Strimpel May 07 '18 at 15:58
  • Yes Daniel, One error 54 times. Application working fine on edge and chrome. This error shows up only on ie. I attached an error image to this question – user3154990 May 07 '18 at 16:22
  • Can you expand the details for one of those errors to see the call stack? `yScale` isn't a standard property on the `Object` type itself so not sure what object is throwing the error. It might be a problem with the library trying to use that property on some object, which is why it would be beneficial to show the call stack to determine with library is trying to access that property. – Daniel W Strimpel May 07 '18 at 16:35
  • Updated the image with stack Daniel. Is it because of lazy loading the modules. Few modules are lazy loaded in this application – user3154990 May 07 '18 at 17:12

0 Answers0