Angular2アプリはMicrosoftのエッジでは機能しません

Question

私のangular2アプリケーションはMicrosoftのエッジでは機能しませんが、chromeとfirefoxではうまく機能しています。

私はthis質問を見ましたが、それは私を助けませんでした。

私はエッジコンソールに次のエラーを取得しています：

以下

はpackage.jsonファイルです：

{ 
"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" 
    } 
} 

ログインガード

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; 
} 
} 

ご協力いただければ幸いです。

ありがとうございます。あなたのアプリで

Answer 1

最後に、問題がLocalStorageであることがわかりました。

何かがマイクロソフトのエッジに間違っていた、私はPowerShellで次のコマンドを実行し、問題が解決されました：

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

Answer 2

、単にIE

ログインガードは、いくつかのJavascriptのLibrarayやブラウワーこれを使用している必要があり

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

に必要なpolyfillsがコメントを外し、ファイルpolyfills.tsがあるでしょうあなたのMicrosoft Edgeはサポートしていません（LocalStorage、セッションなど）、ここにあなたのログインガードを投稿してください。