angular2 TypeError: Cannot set property 'name' of undefined

Question 1

angular2 TypeError: Cannot set property 'name' of undefined

angular typescript router

Shmily Lin · Dec 20, 2016 · Viewed 10k times · Source

Answer

Answer

Did you use zone.js 0.7.3 in package.json? if so please change to 0.7.2 to try:

"zone.js": "0.7.2"

run npm install to try.

Question 2

I have an Angular2 project, created at Mac OS and it running. But when I git it at Windows, it can not run. In Chrome, i get this error:

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

In Firefox, I get this error:

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 }

Why? These is my code:

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

app-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");
    }
}

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

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

angular2 TypeError: Cannot set property 'name' of undefined

Answer

Related questions