0

ng build 并上传到生产服务器后出现此错误。我在 angular4 上使用 angular cli。当我将 Route Guard 添加到功能模块时，这一切才真正开始。我恢复到没有 Guard 的时候，但错误仍然存​​在。当我在本地机器上运行 ng serve 时，我没有收到此错误。这是我的应用模块：

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

1 回答 1

0

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

于 2017-10-28T16:42:56.197 回答