angular2 TypeError:无法设置undefined的属性“name”

前端之家收集整理的这篇文章主要介绍了angular2 TypeError:无法设置undefined的属性“name”前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个Angular2项目,在Mac OS上创建并运行.但是当我在 Windows上使用它时,它无法运行.
在Chrome中,我收到此错误
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

在Firefox中,我收到此错误

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 }

为什么?
这些是我的代码

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-路由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 ],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");
    }
}

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

登录路由,guards.service.ts

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

@Injectable()
export class LoginRouteGuardsService implements OnInit,CanActivate {
    constructor(private cookieService:CookieService,state: RouterStateSnapshot) {
        let tempIsLogined = this.cookieService.getObject("ArrowIMWP-IsLogined");
        if (tempIsLogined && tempIsLogined == true) {
            this.router.navigate(['/home']);
            return false;
        }else {
        return true;
        }
    }
}
你在package.json中使用了zone.js 0.7.3吗?若是,请改为0.7.2试试:
"zone.js": "0.7.2"

运行npm install来试试.

原文链接:https://www.f2er.com/angularjs/142397.html

猜你在找的Angularjs相关文章