未捕获的TypeError:无法在__extends读取未定义的属性'prototype'(Subscriber.js:5)

时间:2017-10-28 15:54:04

标签: javascript angular angular4-router

我在构建并上传到生产服务器后出现此错误。我在angular4上使用了角度cli。当我将Route Guard添加到功能模块时,所有这一切都真正开始了。当我没有后卫的时候,我又恢复了,但错误仍然存​​在。当我在本地机器上运行服务时,我没有收到此错误。 这是我的app模块:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';

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

/* Authentication */
import {AuthenticateService} from './authenticate.service';
import {AuthGuard} from './auth.guard';


import {DashboardModule} from './dashboard/dashboard.module';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    RegisterComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    DashboardModule,
    AppRoutingModule
  ],
    providers: [
   { provide: LocationStrategy, useClass: HashLocationStrategy},
      AuthenticateService,
        AuthGuard
      ],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

我的身份验证服务:

import { Injectable } from '@angular/core';
import {Response, Headers, Http, RequestOptionsArgs} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class AuthenticateService {

  baseUrl = 'myurl/public';
    constructor(private http: Http) { }
    register(form) {
      return this.http.post(`${this.baseUrl}/register`, form)
       .map((response: Response) => {
          const user = response.json();
          if (user.status) {
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('loggedUser', JSON.stringify(user));
          }
          return user;
       })
       .catch((error: any) => Observable.throw(error.json().error || {message: 'Server Error'}));
    }

    login(form): Observable<Response> {
      const headersObj = new Headers();
      headersObj.set('Content-Type', 'application/json');

      const requestArg: RequestOptionsArgs = { headers: headersObj, method: 'POST' };
       // const telephone = form.telephone;
       // const password = form.password;
      return this.http.post(`${this.baseUrl}/login`, form, requestArg)
        .map((response: Response) => {
          const user = response.json();
          if (user.response.status) {
            localStorage.setItem('loggedUser', JSON.stringify(user.response));
          }
          return user.response;
        })
        .catch((error: any) => Observable.throw(error.json().error || {message: 'Server Error'}));
    }

  logout() {
    // remove user from local storage to log user out
    localStorage.removeItem('loggedUser');
  }

}

我的路线卫士:

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
// import {AuthenticateService} from './authenticate.service';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router: Router) {
  }

  canActivate(route: ActivatedRouteSnapshot,
              state: RouterStateSnapshot): boolean {
    if ((!localStorage.getItem('loggedUser'))) {
      // not logged in so redirect to login page
      this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
      return false;
    } else {
      return true;
    }
  }
}

应用路由模块:

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {LoginComponent} from './login/login.component';
import {RegisterComponent} from './register/register.component';


export const routes: Routes = [
  {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
  {path: 'login', component: LoginComponent},
  {path: 'register', component: RegisterComponent},
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }

守卫模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import {FormsModule} from '@angular/forms';

import { DashboardRoutingModule } from './dashboard-routing.module';

import { DashboardComponent } from './dashboard.component';
import { DashboardHomeComponent } from './dashboard-home/dashboard-home.component';
import { UsersComponent } from './users/users.component';
import { TransactionsComponent } from './transactions/transactions.component';
import { UsersService } from './services/users.service';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RouterModule,
    DashboardRoutingModule
  ],
  exports: [ DashboardComponent ],
  declarations: [ DashboardComponent, DashboardHomeComponent, UsersComponent, TransactionsComponent],
  providers: [ UsersService ]
})
export class DashboardModule { }

功能模块组件:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import {DashboardComponent} from './dashboard.component';
import {DashboardHomeComponent} from './dashboard-home/dashboard-home.component';
import {UsersComponent} from './users/users.component';
import {TransactionsComponent} from './transactions/transactions.component';
import {AuthGuard} from '../auth.guard';


export const dashboardRoutes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [ AuthGuard ],
    children: [
    {path: '', component: DashboardHomeComponent},
    {path: 'users', component: UsersComponent},
    {path: 'transactions', component: TransactionsComponent}
  ]}
  // {path: 'dashboard', component: DashboardComponent}
];
@NgModule({
  imports: [
    RouterModule.forChild(dashboardRoutes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class DashboardRoutingModule { }

1 个答案:

答案 0 :(得分:0)

我发现错误,我在功能模块和功能路由模块中导入了路由器模块。