无法通过Angular中的路由加载模块

Question

我试图从应用程序模块加载另一个模块...但它给了我一个错误。

当我尝试加载组件时，它工作正常

这就是我的app-routing.module.ts文件的样子

import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import {SignupComponent} from './auth/signup/signup.component'
import { AppComponent } from './app.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { AuthGuard } from './shared';


const routes: Routes = [
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'signup'
    },
    {path: 'signup', component: SignupComponent},
    {path: 'login', component: SignupComponent},
    {
        path: 'dashboard',
        loadChildren: './dashboard/dashboard.module#DashboardModule',
        canActivate: [AuthGuard]},

];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { } 

如果我加载仪表板或任何模块的组件然后完全加载....但是当我使用loadChildren（对于模块）然后它给我错误

这是我的app.module.ts文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {HttpModule} from '@angular/http'
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthProviders, HttpService, UserAuthService} from './shared';
import { DashboardModule } from './dashboard/dashboard.module';
import { AuthModule } from './auth/auth.module';


@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    DashboardModule,
    AuthModule
  ],
  providers: [
    AuthProviders,
    HttpService,
    UserAuthService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我的dashboard.module.ts文件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard.component';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule,Routes } from '@angular/router';
import { UpperNavComponent } from './header_components/upper-nav/upper-nav.component';
import { TabsComponent } from './header_components/tabs/tabs.component';
import { SearchBarComponent } from './header_components/search-bar/search-bar.component';
import { DocumentsComponent } from './sections/documents/documents.component';
import { TransactionsComponent } from './sections/transactions/transactions.component';
import { AlertsComponent } from './sections/alerts/alerts.component';

export const appRoutes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    children: [
      { path: '', redirectTo: 'documents', pathMatch: 'full' },
      { path: 'transactions', component: TransactionsComponent },
      { path: 'alerts', component: AlertsComponent },
      { path: 'documents', component: DocumentsComponent }
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    BrowserModule,
    RouterModule.forChild(appRoutes),
  ],
  declarations: [
    DashboardComponent,
    UpperNavComponent,
    TabsComponent,
    DocumentsComponent,
    SearchBarComponent,
    TransactionsComponent,
    AlertsComponent]
})
export class DashboardModule { }

这就是Error的样子

ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:10:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at Array.map (<anonymous>)
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:13), <anonymous>:10:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6558)
    at SystemJsNgModuleLoader.load (core.js:6542)
    at RouterConfigLoader.loadModuleFactory (router.js:4543)
    at RouterConfigLoader.load (router.js:4523)
    at MergeMapSubscriber.eval [as project] (router.js:2015)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:92)
    at resolvePromise (zone.js:809)
    at resolvePromise (zone.js:775)
    at eval (zone.js:858)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4740)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at <anonymous>

Answer 1

什么是你的Angular cli版本？在我的角度cli在执行npm安装后更新为1.7.1时出现了同样的问题（我在package.json中将其指定为@ angular / cli“：”^ 1.4.4“）。必须将其更改为使用1.4 .x（@ angular / cli“：”~1.4.4“），错误消失了。