CODEWITHSUNDEEP
angulartypescriptinternet-explorer
Amit
Amit

Reputation: 1491

Angular Not working in IE 11 both in prod and dev build

I recently update my global angular-cli version to 8. Now after building my project in prod mode its throwing error in IE11. In chrome its works fine.

For prod version error shows as:

enter image description here I tried to check the same in local and issue exists in local Dev env too.

enter image description here

This is the line in vendor.js file where it throws error

const isPresent = (value) => value !== null && value !== undefined;

my package.json:

{
  "name": "edmw-project",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --port 4300 --proxy-config proxy.conf.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "compodoc": "npx compodoc -p src/tsconfig.app.json"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^0.13.0",
    "@angular-redux/store": "^9.0.0",
    "@angular/animations": "^6.0.9",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^6.0.9",
    "@angular/compiler": "^6.0.9",
    "@angular/core": "^6.0.9",
    "@angular/forms": "^6.0.9",
    "@angular/http": "^6.0.9",
    "@angular/platform-browser": "^6.0.9",
    "@angular/platform-browser-dynamic": "^6.0.9",
    "@angular/platform-server": "^6.0.9",
    "@angular/router": "^6.0.9",
    "@progress/kendo-angular-buttons": "^4.4.2",
    "@progress/kendo-angular-charts": "^3.3.2",
    "@progress/kendo-angular-common": "^1.1.4",
    "@progress/kendo-angular-dateinputs": "^3.4.4",
    "@progress/kendo-angular-dialog": "^3.6.2",
    "@progress/kendo-angular-dropdowns": "^3.5.3",
    "@progress/kendo-angular-excel-export": "^2.1.1",
    "@progress/kendo-angular-grid": "^3.6.0",
    "@progress/kendo-angular-inputs": "^3.2.0",
    "@progress/kendo-angular-intl": "^1.4.1",
    "@progress/kendo-angular-l10n": "^1.1.0",
    "@progress/kendo-angular-layout": "^3.1.2",
    "@progress/kendo-angular-notification": "^1.0.0",
    "@progress/kendo-angular-popup": "^2.6.0",
    "@progress/kendo-angular-toolbar": "^2.2.0",
    "@progress/kendo-charts": "^1.11.2",
    "@progress/kendo-data-query": "^1.5.0",
    "@progress/kendo-drawing": "^1.5.7",
    "@progress/kendo-theme-default": "latest",
    "@progress/kendo-ui": "^2018.2.530",
    "angular": "^1.7.9",
    "angular-webstorage-service": "^1.0.2",
    "bootstrap": "^4.1.3",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.7",
    "font-awesome": "^4.7.0",
    "hammerjs": "^2.0.0",
    "html2canvas": "^1.0.0-rc.1",
    "intl": "^1.2.5",
    "jquery": "1.11.1",
    "jquery-ui": "1.12.1",
    "ngx-scrollbar": "^2.2.0",
    "redux": "^4.0.1",
    "rxjs": "^6.2.2",
    "rxjs-compat": "^6.0.0",
    "underscore": "1.8.3",
    "upgrade-angular": "^0.1.3",
    "web-animations-js": "^2.3.1",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "^6.2.5",
    "@angular/compiler-cli": "^6.0.9",
    "@angular/language-service": "^4.4.7",
    "@types/gridstack": "0.0.39",
    "@types/jasmine": "^2.8.8",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^10.5.2",
    "@types/underscore": "1.8.9",
    "codelyzer": "^4.4.2",
    "jasmine-core": "^3.1.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^2.0.5",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "^2.0.0",
    "karma-jasmine-html-reporter": "^1.2.0",
    "protractor": "^5.4.0",
    "rxjs-tslint": "^0.1.5",
    "ts-node": "~3.2.0",
    "tslint": "^5.11.0",
    "typescript": "^2.7.2",
    "webpack": "^4.16.1"
  }
}

My polyfills.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
 */

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

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


/**
 * Required to support Web Animations `@angular/animation`.
 * 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 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`.
/**
 * Need to import at least one locale-data with intl.
 */
 //import 'intl/locale-data/jsonp/en';

Node Version: v12.16.0 Angular Cli Version: Local -- 6.2.9 and Global -- 8.3.25

Any help will be highly appreciated. Thanks

Upvotes: 0

Views: 1066

Answers (1)

Anto Antony
Anto Antony

Reputation: 872

I think this is probably because of using the global version of cli to build the application. You should not use different version of cli for building the angular application other that the version which is used to create. Try to build the application using the following command from the project path.

cd project_folder    
npm run build

So this will use the local angular cli which is "@angular/cli": "^6.2.5" rather than the global version.

Use the following command for prod build

npm run build -- --prod --base-href=/AngularModules/

Using the ng command directly from the command promt will always use the global version rather than the locally installed one. So using the npm scripts will always make sure, we will using local version.

Upvotes: 1

Related Questions