Angular2 application does not work on Microsoft side

Question

The angular2 application does not work on the verge of Microsoft, while it works fine on chrome and firefox.

I looked through this question, but it did not help me.

I get the following error on the Edge console:

The following is the 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

 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 greatly appreciated.

Thanks in advance.

Answer 1

Finally it turned out that the problem was related to LocalStorage .

Something is wrong with Microsoft Edge, I ran the following command in PowerShell, and the problem was resolved:

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

Answer 2

The polyfills.ts file will appear in your application, just uncomment the policies 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 3

Your login browser should use some Libraray Javascript or Brower that your Microsoft Edge does not support (LocalStorage, Sessions, etc.), can you leave your login login here.