8

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;
        }
    }
}
2
  • 3
    If this is an example of minimal reproducible example, I'll quit ...
    – Teemu
    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
    Dec 21, 2016 at 15:13

3 Answers 3

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.

6
  • 1
    WTF is happened ? Same issue for me and 0.7.2 solved the issue. Is 0.7.3 their dev-master ?! Dec 20, 2016 at 15:51
  • 1
    The related issue is here: github.com/angular/zone.js/issues/554
    – Fabien Sa
    Dec 20, 2016 at 18:00
  • 1
    Jesus why... I feel like breaking changes like this are getting incredibly unwielding to manage.
    – cgatian
    Dec 20, 2016 at 18:10
  • 1
    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"
    – Namone
    Dec 20, 2016 at 19:26
  • Yes, zone.js has upgraded to 0.7.4 fixed this bug. Dec 20, 2016 at 23:21
3

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

npm install --save [email protected]
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"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.