title: TypeError: undefined is not a function when importing two modules in Angular
body: <p>I'm using <code>Angular 6</code>.</p>
  
  <p>I have two layout modules (AdminLayout and AuthLayout) under LayoutModule</p>
  
  <p>Contents of <strong>AdminLayoutModule</strong> is</p>
  
  <pre><code>@NgModule({
    imports: [
      CommonModule,
      RouterModule.forChild(AdminLayoutRoutes),
      FormsModule,
      DashboardModule
    ],
    declarations: [
      AdminLayoutComponent
    ]
  })
  export class AdminLayoutModule { }
  </code></pre>
  
  <p><strong>admin-layout.routing.ts</strong></p>
  
  <pre><code>export const AdminLayoutRoutes: Routes = [
    { path: 'dashboard', loadChildren: '../../dashboard/dashboard.module#DashboardModule' }
  ];
  </code></pre>
  
  <p>and <strong>admin-layout.component.html</strong> has</p>
  
  <pre><code>&lt;h2&gt;admin-layout works!&lt;/h2&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>Similarly the contents of <strong>AuthLayoutModule</strong></p>
  
  <pre><code>@NgModule({
    imports: [
      CommonModule,
      RouterModule.forChild(AuthLayoutRoutes),
      FormsModule,
      AuthModule
    ],
    declarations: [
      AuthLayoutComponent
    ],
    exports: [
      RouterModule
    ]
  })
  export class AuthLayoutModule { }
  </code></pre>
  
  <p><strong>auth-layout.routing.ts</strong></p>
  
  <pre><code>export const AuthLayoutRoutes: Routes = [
    { path: '', redirectTo: 'login', pathMatch: 'full'},
    { path: 'login', component: LoginComponent},
    { path: 'logout', component: LogoutComponent}
  ];
  </code></pre>
  
  <p><strong>auth-layout.component.html</strong></p>
  
  <pre><code>&lt;h2&gt;auth-layout works!&lt;/h2&gt;
  
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>and both <strong>AdminLayoutModule</strong> and <strong>AuthLayoutModule</strong> are imported in <strong>LayoutModule</strong></p>
  
  <pre><code>@NgModule({
    imports: [
      CommonModule,
      AdminLayoutModule,
      AuthLayoutModule
    ],
    declarations: []
  })
  export class LayoutsModule { }
  </code></pre>
  
  <p>Which is further imported in the <strong>AppModule</strong></p>
  
  <pre><code>@NgModule({
    declarations: [
      AppComponent
    ],
    imports: [
      BrowserModule,
      FormsModule,
      AppRoutingModule,
  
      LayoutsModule,
  
      HttpClientModule,
      RouterModule,
      PagesModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>But when I run the server, it does not give any error during compile but gives an error when visiting URL in the browser.</p>
  
  <pre><code>core.js:1673 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
  TypeError: undefined is not a function
      at Array.map (&lt;anonymous&gt;)
      at webpackAsyncContext ($_lazy_route_resource lazy namespace object:21)
      at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:4982)
      at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:4974)
      at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3261)
      at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3249)
      at MergeMapSubscriber.project (router.js:1519)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
      at Array.map (&lt;anonymous&gt;)
      at webpackAsyncContext ($_lazy_route_resource lazy namespace object:21)
      at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:4982)
      at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:4974)
      at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3261)
      at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3249)
      at MergeMapSubscriber.project (router.js:1519)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:61)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:51)
      at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
      at resolvePromise (zone.js:814)
      at resolvePromise (zone.js:771)
      at zone.js:873
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
      at Object.onInvokeTask (core.js:3811)
      at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
      at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
      at drainMicroTaskQueue (zone.js:595)
  </code></pre>
  
  <p>When I comment any one layout imported in <strong>LayoutModule</strong>, another one works fine. But importing both together is giving above error.</p>
  
  <p>routes are defined in <strong>app-routing.module.ts</strong> like</p>
  
  <pre><code>const routes: Routes = [
    { path: 'auth', loadChildren: './layouts/auth-layout/auth-layout.module#AuthLayoutModule' },
    { path: 'admin', loadChildren: './layouts/admin-layout/admin-layout.module#AdminLayoutModule'},
    { path: '', redirectTo: 'admin/dashboard', pathMatch: 'full'},
    { path: '**', component: PageNotFoundComponent},
  ];
  
  @NgModule({
    imports: [
      CommonModule,
      BrowserModule,
      RouterModule.forRoot(routes)
    ],
    declarations: [],
    exports: [
      RouterModule
    ]
  })
  export class AppRoutingModule { }
  </code></pre>