Angular2 app is not working on Microsoft edge

Question

My angular2 application is not working on Microsoft edge, while it's working fine on chrome and firefox.

I looked at this question, but it didn't help me.

I am getting following error on the Edge console:

Below is package.json file:

{
 "name": "angular app",
 "version": "1.0.0",
 "scripts": {
  "start": "concurrently \"tsc -w\" \"lite-server\" ",
  "lite": "lite-server",
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "publish": "gulp agnular_Production_Version"
},
"licenses": [
 {
   "type": "MIT",
   "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
 }
],
"dependencies": {
  "@angular/common": "~2.1.1",
  "@angular/compiler": "~2.1.1",
  "@angular/core": "~2.1.1",
  "@angular/forms": "~2.1.1",
  "@angular/http": "~2.1.1",
  "@angular/platform-browser": "~2.1.1",
  "@angular/platform-browser-dynamic": "~2.1.1",
  "@angular/router": "~3.1.1",
  "@angular/upgrade": "~2.1.1",
  "angular-2-data-table": "0.1.0",
  "angular-2-dropdown-multiselect": "^0.3.1",
  "angular-in-memory-web-api": "~0.1.13",
  "angular2-in-memory-web-api": "0.0.20",
  "angular2-select": "^1.0.0-alpha.12",
  "angular2-ui-switch": "^1.2.0",
  "bootstrap": "^3.3.7",
  "core-js": "^2.4.1",
  "mydatepicker": "^2.0.13",
  "ng2-bs3-modal": "^0.10.4",
  "ng2-dnd": "^2.0.1",
  "ng2-toasty": "^2.1.0",
  "ng2-validation": "^2.0.0",
  "reflect-metadata": "^0.1.8",
  "rxjs": "5.0.0-beta.12",
  "systemjs": "0.19.39",
  "zone.js": "^0.6.25"
},
"devDependencies": {
   "angular-2-dropdown-multiselect": "^0.3.1",
   "concurrently": "^3.0.0",
   "gulp": "^3.9.1",
   "gulp-clean": "^0.3.2",
   "gulp-concat": "^2.6.1",
   "gulp-delete-lines": "^0.0.7",
   "gulp-html-replace": "^1.6.1",
   "gulp-insert-lines": "^0.0.4",
   "gulp-minify-css": "^1.2.4",
   "gulp-rebase-css-urls": "^0.0.2",
   "gulp-shell": "^0.5.2",
   "gulp-uglify": "^2.1.2",
   "lite-server": "^2.2.2",
   "pump": "^1.0.2",
   "run-sequence": "^1.2.2",
   "systemjs-builder": "^0.15.31",
   "typescript": "^2.0.3",
   "typings": "^1.3.2"
  }
}

Login Guard

import { Injectable } from '@angular/core';
import { Router, CanActivate, CanDeactivate, ActivatedRouteSnapshot, 
RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AuthGuard implements CanActivate, CanDeactivate<any> {

constructor(private router: Router) { }

canActivate(activeRoute: ActivatedRouteSnapshot, state: RouterStateSnapshot) 
 {
    if (localStorage.getItem('jwttoken')) {
        // logged in so return true
        return true;
    }
    // not logged in so redirect to login page
    this.router.navigate(['/login']);
    return false;
  }

canDeactivate(component: any): Observable<boolean> | boolean {
    localStorage.setItem('previousRoute', this.router.url);
    $('.zoomContainer').remove();
    return true;
 }
}

Any help would be highly appreciated.

Thanks in advance.

Answer 1

In your app, there will be file polyfills.ts, there just uncomment the polyfills required for IE

/**
 * 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.
import 'core-js/es7/reflect';


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

Answer 2

Finally figured out that the issue was with LocalStorage.

Something was wrong with the Microsoft edge, I ran following command in the PowerShell and the issue was resolved:

Get-AppXPackage -AllUsers | Foreach {Add-AppxPackage -DisableDevelopmentMode -Register “$($_.InstallLocation)\AppXManifest.xml”}

Answer 3

Your Login guard must be using some Libraray of Javascript or Brower which your Microsoft Edge wont support (LocalStorage, Sessions etc), can you please post your login guard here.