angular2 TypeError: Không thể đặt thuộc tính 'name' của undefined

Question

Tôi có một dự án Angular2, được tạo tại Mac OS và nó đang chạy. Nhưng khi tôi git nó ở Windows, nó không thể chạy được. Trong Chrome, tôi nhận được lỗi này:

core.umd.js:3491 EXCEPTION: Uncaught (in promise): TypeError: Cannot set property 'name' of undefined 
TypeError: Cannot set property 'name' of undefined 
    at new EmptyError (http://localhost:3000/node_modules/rxjs/util/EmptyError.js:21:30) 
    at FirstSubscriber._complete (http://localhost:3000/node_modules/rxjs/operator/first.js:148:31) 
    at FirstSubscriber.Subscriber.complete (http://localhost:3000/node_modules/rxjs/Subscriber.js:114:18) 
    at MergeAllSubscriber._complete (http://localhost:3000/node_modules/rxjs/operator/mergeAll.js:94:30) 
    at MergeAllSubscriber.Subscriber.complete (http://localhost:3000/node_modules/rxjs/Subscriber.js:114:18) 
    at MapSubscriber.Subscriber._complete (http://localhost:3000/node_modules/rxjs/Subscriber.js:132:26) 
    at MapSubscriber.Subscriber.complete (http://localhost:3000/node_modules/rxjs/Subscriber.js:114:18) 
    at EmptyObservable._subscribe (http://localhost:3000/node_modules/rxjs/observable/EmptyObservable.js:69:24) 
    at EmptyObservable.Observable.subscribe (http://localhost:3000/node_modules/rxjs/Observable.js:45:27) 
    at Observable._subscribe (http://localhost:3000/node_modules/rxjs/Observable.js:103:28) 
    at MapOperator.call (http://localhost:3000/node_modules/rxjs/operator/map.js:54:23) 
    at Observable.subscribe (http://localhost:3000/node_modules/rxjs/Observable.js:42:22) 
    at Observable._subscribe (http://localhost:3000/node_modules/rxjs/Observable.js:103:28) 
    at MergeAllOperator.call (http://localhost:3000/node_modules/rxjs/operator/mergeAll.js:63:23) 
    at Observable.subscribe (http://localhost:3000/node_modules/rxjs/Observable.js:42:22) 
core.umd.js:3496 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:3496next @ core.umd.js:8449schedulerFn @ core.umd.js:4118SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:4104NgZone.triggerError @ core.umd.js:4465onHandleError @ core.umd.js:4426ZoneDelegate.handleError @ zone.js:246Zone.runGuarded @ zone.js:129_loop_1 @ zone.js:429drainMicroTaskQueue @ zone.js:438ZoneTask.invoke @ zone.js:349 
core.umd.js:3497 Error: Uncaught (in promise): TypeError: Cannot set property 'name' of undefined 
TypeError: Cannot set property 'name' of undefined 
    at new EmptyError (EmptyError.ts:14) 
    at FirstSubscriber._complete (first.ts:161) 
    at FirstSubscriber.Subscriber.complete (Subscriber.ts:122) 
    at MergeAllSubscriber._complete (mergeAll.ts:91) 
    at MergeAllSubscriber.Subscriber.complete (Subscriber.ts:122) 
    at MapSubscriber.Subscriber._complete (Subscriber.ts:144) 
    at MapSubscriber.Subscriber.complete (Subscriber.ts:122) 
    at EmptyObservable._subscribe (EmptyObservable.ts:74) 
    at EmptyObservable.Observable.subscribe (Observable.ts:98) 
    at Observable._subscribe (Observable.ts:158) 
    at MapOperator.call (map.ts:50) 
    at Observable.subscribe (Observable.ts:96) 
    at Observable._subscribe (Observable.ts:158) 
    at MergeAllOperator.call (mergeAll.ts:61) 
    at Observable.subscribe (Observable.ts:96) 
    at resolvePromise (zone.js:486) [angular] 
    at resolvePromise (zone.js:471) [angular] 
    at :3000de_modules/zone.js/dist/zone.js:520:17 [angular] 
    at Object.onInvokeTask (core.umd.js:4396) [angular] 
    at ZoneDelegate.invokeTask (zone.js:274) [angular] 
    at Zone.runTask (zone.js:151) [<root> => angular] 
    at drainMicroTaskQueue (zone.js:418) [<root>] 
    at XMLHttpRequest.ZoneTask.invoke (zone.js:349) [<root>]ErrorHandler.handleError @ core.umd.js:3497next @ core.umd.js:8449schedulerFn @ core.umd.js:4118SafeSubscriber.__tryOrUnsub @ Subscriber.ts:238SafeSubscriber.next @ Subscriber.ts:190Subscriber._next @ Subscriber.ts:135Subscriber.next @ Subscriber.ts:95Subject.next @ Subject.ts:61EventEmitter.emit @ core.umd.js:4104NgZone.triggerError @ core.umd.js:4465onHandleError @ core.umd.js:4426ZoneDelegate.handleError @ zone.js:246Zone.runGuarded @ zone.js:129_loop_1 @ zone.js:429drainMicroTaskQueue @ zone.js:438ZoneTask.invoke @ zone.js:349 
zone.js:405 Unhandled Promise rejection: TypeError: Cannot set property 'name' of undefined(…) ; Zone: angular ; Task: Promise.then ; Value: TypeError: Cannot set property 'name' of undefined(…) undefined 

Trong Firefox, tôi nhận được lỗi này:

EXCEPTION: Uncaught (in promise): TypeError: err is undefined 
EmptyError@http://localhost:3000/node_modules/rxjs/util/EmptyError.js:21:9 
    FirstSubscriber.prototype._complete@http://localhost:3000/node_modules/rxjs/operator/first.js:148:31 
    Subscriber.prototype.complete@http://localhost:3000/node_modules/rxjs/Subscriber.js:114:13 
    MergeAllSubscriber.prototype._complete@http://localhost:3000/node_modules/rxjs/operator/mergeAll.js:94:13 
    Subscriber.prototype.complete@http://localhost:3000/node_modules/rxjs/Subscriber.js:114:13 
    Subscriber.prototype._complete@http://localhost:3000/node_modules/rxjs/Subscriber.js:132:9 
    Subscriber.prototype.complete@http://localhost:3000/node_modules/rxjs/Subscriber.js:114:13 
    EmptyObservable.prototype._subscribe@http://localhost:3000/node_modules/rxjs/observable/EmptyObservable.js:69:13 
    Observable.prototype.subscribe@http://localhost:3000/node_modules/rxjs/Observable.js:45:22 
    Observable.prototype._subscribe@http://localhost:3000/node_modules/rxjs/Observable.js:10[…] 
ORIGINAL STACKTRACE: core.umd.js:3496:17 
    resolvePromise@http://localhost:3000/node_modules/zone.js/dist/zone.js:486:31 [angular] 
    resolvePromise@http://localhost:3000/node_modules/zone.js/dist/zone.js:471:17 [angular] 
    scheduleResolveOrRejecthttp://localhost:3000/node_modules/zone.js/dist/zone.js:520:17 [angular] 
    NgZone</NgZone.prototype.forkInnerZoneWithAngularBehavior/this.inner<.onInvokeTask@http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:4396:32 [angular] 
    ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:274:21 [angular] 
    Zone.prototype.runTask@http://localhost:3000/node_modules/zone.js/dist/zone.js:151:28 [<root> => angular] 
    drainMicroTaskQueue@http://localhost:3000/node_modules/zone.js/dist/zone.js:418:25 [<root>] 
    ZoneTask/this.invoke@http://localhost:3000/node_modules/zone.js/dist/zone.js:349:25 [<root>] 
core.umd.js:3497:17 
Unhandled Promise rejection: TypeError: err is undefined 
堆栈跟踪： 
    [object Object] ; Zone: angular ; Task: Promise.then ; Value: TypeError: err is undefined 
堆栈跟踪： 
    [object Object] undefined zone.js:405:13 
Object { message: "Uncaught (in promise): TypeError: err is undefined 
EmptyError@http://localhost:3000/node_modules/rxjs/util/EmptyError.js:21:9 
    FirstSubscriber.prototype._complete@http://localhost:3000/node_modules/rxjs/operator/first.js:148:31 
    Subscriber.prototype.complete@http://localhost:3000/node_modules/rxjs/Subscriber.js:114:13 
    MergeAllSubscriber.prototype._complete@http://localhost:3000/node_modules/rxjs/operator/mergeAll.js:94:13 
    Subscriber.prototype.complete@http://localhost:3000/node_modules/rxjs/Subscriber.js:114:13 
    Subscriber.prototype._complete@http://localhost:3000/node_modules/rxjs/Subscriber.js:132:9 
    Subscriber.prototype.complete@http://localhost:3000/node_modules/rxjs/Subscriber.js:114:13 
    EmptyObservable.prototype._subscribe@http://localhost:3000/node_modules/rxjs/observable/EmptyObservable.js:69:13 
    Observable.prototype.subscribe@http://localhost:3000/node_modules/rxjs/Observable.js:45:22 
    Observable.prototype._subscribe@http://localhost:3000/node_modules/rxjs/Observable.js:103:16 
    MapOpe"[…], originalStack: "ZoneAwareError@http://localhost:300…", zoneAwareStack: "resolvePromise@http://localhost:300…", stack: "resolvePromise@http://localhost:300…", rejection: TypeError, promise: Object, zone: Object, task: Object } 

Tại sao? Những là mã của tôi:

app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { CookieService } from 'angular2-cookie/core'; 
import './rxjs-operators'; 

import { LoginModule } from './login/login.module'; 
import { HomeModule } from './home/home.module'; 

import { AppComponent } from './app.component'; 
import { LoadingComponent } from './loading/loading.component'; 
import { NavigationComponent } from './navigation/navigation.component'; 

import { LoginTransferService } from './service/transfer/login-transfer.service'; 

import { AppRoutingModule } from './app-routing.module'; 

import { AppRouteGuardsService } from './app-route-guards.service'; 


@NgModule({ 
    imports:  [ 
     BrowserModule, 
     AppRoutingModule, 
     LoginModule, 
     HomeModule, 
    ], 
    declarations: [ 
     AppComponent, 
     LoadingComponent, 
     NavigationComponent, 
    ], 
    providers: [ 
     CookieService, 
     AppRouteGuardsService, 
     LoginTransferService 
    ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

app.component.ts

import { Component } from '@angular/core'; 

import './rxjs-operators'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
     <ArrowIMWP-navigation></ArrowIMWP-navigation> 
     <router-outlet></router-outlet> 
    `, 
    styleUrls: ['app/app.component.css'] 
}) 
export class AppComponent { } 

app-routing.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { LoadingComponent } from './loading/loading.component'; 
import { AppRouteGuardsService } from './app-route-guards.service'; 

const routes: Routes = [{ 
    path: '', 
    component: LoadingComponent, 
    canActivate : [ AppRouteGuardsService ] 
}]; 

@NgModule({ 
    imports: [ RouterModule.forRoot(routes) ], 
    exports: [ RouterModule ] 
}) 
export class AppRoutingModule {} 

cấp ứng dụng route-guards.service.ts

import { Injectable } from '@angular/core'; 
import { 
    Router, 
    CanActivate, 
    ActivatedRouteSnapshot, 
    RouterStateSnapshot 
} from '@angular/router'; 
import { CookieService } from 'angular2-cookie/core'; 

@Injectable() 
export class AppRouteGuardsService implements CanActivate { 
    constructor(private cookieService:CookieService, private router:Router) {}; 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     let tempIsLogined = this.cookieService.getObject("ArrowIMWP-IsLogined"); 
     if (tempIsLogined && tempIsLogined == true) { 
      if (state.url == "/") { 
       this.router.navigate(['/home']); 
       return false; 
      } 
      return true; 
     }else { 
      if (state.url == "/login") { 
       return true; 
      } 
      this.router.navigate(['/login']); 
      return false; 
     } 
    } 
} 

navigation.component.ts

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { CookieService } from 'angular2-cookie/core'; 
import { LoginTransferService } from '../service/transfer/login-transfer.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'ArrowIMWP-navigation', 
    templateUrl: 'navigation.component.html', 
    styleUrls: ['navigation.component.css'] 
}) 

export class NavigationComponent implements OnInit { 

    isShowNavigationItems = false; 

    constructor(
     private router:Router, 
     private cookieService:CookieService, 
     private loginTransferService:LoginTransferService 
    ) { 
     let tempIsLogined = cookieService.getObject("ArrowIMWP-IsLogined"); 
     if (tempIsLogined && tempIsLogined == true) { 
      this.isShowNavigationItems = true; 
     }else { 
      this.isShowNavigationItems = false; 
     } 

     loginTransferService.loginSuccessed$.subscribe(
      data => { 
       console.log(data); 
       if (data == "Logined") { 
        this.isShowNavigationItems = true; 
       } 
      } 
     ) 
    } 
} 

login.module.ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { CookieService } from 'angular2-cookie/services/cookies.service'; 
import '../rxjs-operators'; 
import { LoginComponent } from './login.component'; 
import { LoginRoutingModule } from './login-routing.module'; 
import { LoginRouteGuardsService } from './login-route-guards.service'; 

@NgModule({ 
    imports:  [ 
     BrowserModule, 
     LoginRoutingModule 
    ], 
    declarations: [ LoginComponent ], 
    providers: [ 
     CookieService, 
     LoginRouteGuardsService 
    ], 
    bootstrap: [ LoginComponent ] 
}) 

export class LoginModule {} 

login.component.ts

import { Component, OnInit } from '@angular/core'; 
import { CookieService } from 'angular2-cookie/core'; 
import { Router } from '@angular/router'; 
import '../rxjs-operators'; 
import { LoginTransferService } from '../service/transfer/login-transfer.service'; 

@Component({ 
    moduleId: module.id, 
    selector: 'ArrowIMWP-login', 
    templateUrl: 'login.component.html', 
    styleUrls : ['login.component.css'] 
}) 

export class LoginComponent implements OnInit { 

    constructor(
     private cookieService:CookieService, 
     private router:Router, 
     private loginTransferService:LoginTransferService 
    ) {} 

    loginButtonClicked() { 
     this.cookieService.putObject("ArrowIMWP-IsLogined", true); 
     this.router.navigate(['/home']); 
     this.loginTransferService.loginSuccessedNext("Logined"); 
    } 
} 

đăng nhập-routing.module.ts

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
import { LoginComponent } from './login.component'; 
import { LoginRouteGuardsService } from './login-route-guards.service'; 

@NgModule({ 
    imports: [ RouterModule.forChild([{ 
     path: 'login', 
     component: LoginComponent, 
     canActivate : [ LoginRouteGuardsService ] 
    }]) ], 
    exports: [ RouterModule ] 
}) 

export class LoginRoutingModule {} 

đăng nhập-đường-guards.service.ts

import { Injectable, OnInit } from '@angular/core'; 
import { 
    Router, 
    CanActivate, 
    ActivatedRouteSnapshot, 
    RouterStateSnapshot 
} from '@angular/router'; 
import { CookieService } from 'angular2-cookie/core'; 

@Injectable() 
export class LoginRouteGuardsService implements OnInit,CanActivate { 
    constructor(private cookieService:CookieService, private router:Router) {}; 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) { 
     let tempIsLogined = this.cookieService.getObject("ArrowIMWP-IsLogined"); 
     if (tempIsLogined && tempIsLogined == true) { 
      this.router.navigate(['/home']); 
      return false; 
     }else { 
     return true; 
     } 
    } 
} 

Answer 1

Bạn có sử dụng zone.js 0.7.3 trong package.json? nếu vậy, hãy đổi thành 0.7.2 để thử:

"zone.js": "0.7.2" 

chạy npm install để thử.

Answer 2

Hiện nay cách tốt nhất là hạ cấp/nâng cấp zone.js để 0.7.4

npm install --save zone.js@0.7.4 

Answer 3

Khu 0.8.x là ra ngay bây giờ và có đống dấu vết tốt hơn nhiều và cũng có lỗi này cố định:

"zone.js": ">=0.8.12"