Angular2应用程序不适用于Microsoft边缘 [英] Angular2 app is not working on Microsoft edge

问题描述

我的angular2应用程序不适用于Microsoft边缘，而它在chrome和firefox上工作正常。

我看了

以下是package.json文件：

  {
name：angular app，
version：1.0.0，
scripts：{
start：并发\tsc -w \\lite-server \，
lite：lite-server，
tsc ：tsc，
tsc：w：tsc -w ，
发布：gulp agnular_Production_Version
}，
许可证：[
 {
type：MIT，
 url：https：//github.com/angular/angular.io/blob/master/LICENSE
} 
]，
依赖项：{
@ 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-b​​rowser：~2.1 .1，
@ angular / platform-b​​rowser-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，
并发：^ 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
} 
} 
  

登录后卫

 从@ angular / core导入{Injectable} ;来自'@ angular / router'的
 import {Router，CanActivate，CanDeactivate，ActivatedRouteSnapshot，
 RouterStateSnapshot};来自'rxjs / Observable'的
 import {Observable}; 
 
 @Injectable（）
导出类AuthGuard实现CanActivate，CanDeactivate< any> {
 
构造函数（私有路由器：路由器）{} 
 
 canActivate（activeRoute：ActivatedRouteSnapshot，state：RouterStateSnapshot）
 {
 if（localStorage.getItem） （'jwttoken'））{
 //登录后返回true 
返回true; 
} 
 //未登录，因此重定向到登录页面
 this.router.navigate（['/ login']）; 
返回false; 
} 
 
 canDeactivate（component：any）：Observable< boolean> | boolean {
 localStorage.setItem（'previousRoute'，this.router.url）; 
 $（'。zoomContainer'）。remove（）; 
返回true; 
} 
} 
  

任何帮助都将受到高度赞赏。

提前致谢。

解决方案

最后发现问题出在 localStorage的即可。

Microsoft边缘出了点问题，我在PowerShell中运行了以下命令，问题解决了：

  Get-AppXPackage -AllUsers | Foreach {Add-AppxPackage -DisableDevelopmentMode -Register$（$ _。InstallLocation）\ AppXManifest.xml} 
  

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.

解决方案

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

这篇关于Angular2应用程序不适用于Microsoft边缘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！