angular2 TypeError: Cannot set property 'name' of undefined

Question

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

If this is an example of minimal reproducible example, I'll quit ... — Teemu
– Teemu, Commented Dec 20, 2016 at 11:42
To be fair, it's not really minimal, all the auths and all that isnt required. Even the simplest use of routes will fail when using zone.js 0.7.3. But yeah, and frankly its becoming more and more important to be explicit about everything. Guess it's my own fault for just installing zone.js like a moron, instead of checking what version angular2 actually used themselves in their plunkers. — Svend
– Svend, Commented Dec 21, 2016 at 15:13

eko · Accepted Answer · 2016-12-20 12:44:48Z

23

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.

edited Dec 20, 2016 at 12:44

eko

40.8k11 gold badges79 silver badges104 bronze badges

answered Dec 20, 2016 at 12:42

Blockchain Nerd

4375 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Alex Kalmikov Over a year ago

WTF is happened ? Same issue for me and 0.7.2 solved the issue. Is 0.7.3 their dev-master ?!

Fabien Sa Over a year ago

The related issue is here: github.com/angular/zone.js/issues/554

cgatian Over a year ago

Jesus why... I feel like breaking changes like this are getting incredibly unwielding to manage.

Namone Over a year ago

Yep, struggled with this problem for a couple hours... couldn't find any problem in my code. This fixed it. EDIT: this also works... "zone.js": "0.7.4"

Blockchain Nerd Over a year ago

Yes, zone.js has upgraded to 0.7.4 fixed this bug.

|

mizdler · Accepted Answer · 2017-01-13 13:12:44Z

3

Currently best way is to downgrade/upgrade zone.js to 0.7.4

npm install --save [email protected]

answered Jan 13, 2017 at 13:12

mizdler

6314 silver badges8 bronze badges

Comments

Mikeumus · Accepted Answer · 2017-06-16 18:03:35Z

1

Zone 0.8.x is out now and has much better stack traces and also has this bug fixed:

"zone.js": ">=0.8.12"

answered Jun 16, 2017 at 18:03

Mikeumus

3,97410 gold badges44 silver badges71 bronze badges

Collectives™ on Stack Overflow

angular2 TypeError: Cannot set property 'name' of undefined

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related