Unable to load Module through routing in Angular

Question

I am trying to load another module from app module...but it is giving me an error.

When I try to load component it works fine

This is how my app-routing.module.ts file looks like

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

If I load a component of dashboard or any module then loads perfectly....but when I use loadChildren (for module) then it gives me error

Here is my app.module.ts file:

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

Here is my dashboard.module.ts file

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

This is how Error looks like

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

What's your Angular cli version? Had the same issue when my angular cli was updated to 1.7.1 after doing an npm install(I had specified it as @angular/cli": "^1.4.4" in package.json). Had to change it to use 1.4.x (@angular/cli": "~1.4.4") and the error disappeared.