Angular 4 - Guard Causing Error无法读取undefined的属性'create'

时间:2017-10-29 15:03:31

标签: angular lazy-loading angular-router angular-router-guards

  • 我创建了一个 Guard LoggedInGuard ),我在 AuthModule 中定义了我在 AppModule中导入强>
  • 我还创建了一个 DashboardModule ,在他的路由模块中,它使用了来自AuthModule的LoggedInGuard

在DashboardModule中使用LoggedInGuard时会导致:

vendor.90461c1e81f8688ab265.bundle.js:1 Uncaught TypeError: Cannot read property 'create' of undefined
    at vendor.90461c1e81f8688ab265.bundle.js:1
    at e.invoke (polyfills.f5a89f4a86af4d9fd561.bundle.js:1)
    at Object.onInvoke (vendor.90461c1e81f8688ab265.bundle.js:1)
    at e.invoke (polyfills.f5a89f4a86af4d9fd561.bundle.js:1)
    at r.run (polyfills.f5a89f4a86af4d9fd561.bundle.js:1)
    at t.run (vendor.90461c1e81f8688ab265.bundle.js:1)
    at e._bootstrapModuleFactoryWithZone (vendor.90461c1e81f8688ab265.bundle.js:1)
    at e.bootstrapModuleFactory (vendor.90461c1e81f8688ab265.bundle.js:1)
    at Object.cDNt (main.fe03e438715300c2a840.bundle.js:1)
    at n (inline.ce435269133e3a18afdf.bundle.js:1)

注意 - 当我使用aot = false构建应用时,它可以正常工作

我的AppModule:

import { AuthModule } from './auth'
import { AppRoutingModule } from './app.routing';
import { DashboardModule } from './dashboard/dashboard.module';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    .....
    AuthModule,
    //routing order matters
    DashboardModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我的AuthModule:

import { CommonModule } from '@angular/common';
import { AuthService } from './auth.service';
import { LoggedInGuard } from './login/login.guard';
import { LoginComponent } from './login/login.component';

import { AuthRoutingModule } from './auth-routing.module';
@NgModule({
    imports: [
        CommonModule,
        AuthRoutingModule

    ],
    declarations: [
        LoginComponent
    ],
    providers: [AuthService, LoggedInGuard],
    exports: [LoginComponent]
})

export class AuthModule {


}

我的信息中心路由:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router'; //import router module
import { DashboardComponent } from './dashboard.component';
import { HomeComponent } from './home/home.component';
import { LoggedInGuard } from '../auth/index';
import { AuthModule } from '../auth/auth.module';


 const dasboardRouting = RouterModule.forChild([


  {
    path: 'dashboard',
    component: DashboardComponent,
    children:[
      {path:'',component:HomeComponent},
      { path: 'game', loadChildren: './../game/game.module#GameModule' }//when route is 'lazy' -loading the lazy module

    ]
    ,canActivate: [LoggedInGuard]
  }


]);

@NgModule({
  imports: [
    AuthModule,
    dasboardRouting
  ],
  exports: [RouterModule],
  providers: [
      LoggedInGuard
  ]
})
export class DashboardRoutingModule {}

注意 - 我正在使用角度4.2

0 个答案:

没有答案