angular6 feature module lazy loading throwing error TypeError: undefined is not a function

I have this code in app-routing.module.ts, as per the new documentation in angular I went through the method still it's not working, throwing some errors I can't understand.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule, Routes } from "@angular/router";
import { HomeComponent } from "./home/home.component";
import { AdminModule } from "./admin/admin.module";

const routes: Routes = [
  {
    path: 'admin',
    loadChildren: './admin/admin.module#AdminModule'
  },
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
];

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

It's throwing an error like this.

I have also tried the old way of loadchildren like this 'app/admin/admin.module#AdminModule'. But it's still not working.

core.js:1601 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map (<anonymous>)
    at webpackAsyncContext ($_lazy_route_resource lazy namespace object:18)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:5569)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:5561)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3294)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3282)
    at MergeMapSubscriber.project (router.js:1479)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:117)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:107)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)
    at Array.map (<anonymous>)
    at webpackAsyncContext ($_lazy_route_resource lazy namespace object:18)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.loadAndCompile (core.js:5569)
    at SystemJsNgModuleLoader.push../node_modules/@angular/core/fesm5/core.js.SystemJsNgModuleLoader.load (core.js:5561)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.loadModuleFactory (router.js:3294)
    at RouterConfigLoader.push../node_modules/@angular/router/fesm5/router.js.RouterConfigLoader.load (router.js:3282)
    at MergeMapSubscriber.project (router.js:1479)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:117)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:107)
    at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:93)
    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:4062)
    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)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)
    at invokeTask (zone.js:1540)

I had the same problem, the cause for me was that i was importing the lazy loaded module in my app module.

This error is firing after some recompilation when ng serve is running, and after that, it shows always. Restarting ng serve - solved this problem.

Important!

Using loadChildren as function - is Not lazy loading:

{path: 'admin', loadChildren:() => AdminModule } //not lazy loading

cause you need to import the lazy module in the routing module.

For Lazy loading, you must send the path to the lazy module - as String!

{path: 'admin', loadChildren:'app/admin/admin.module#AdminModule'} // This is lazy loading

sharad jain

I have also faced the same problem while using Angular-7 and Angular CLI: 7.1.3 and tried to find some solution. It is solved for me by removing import statement of lazy loaded module from app.module file.

// remove this from app.module and app-routing.module file and it will work fine
import { AdminModule } from "./admin/admin.module";

My project configuration for reference

I faced the same issue solved it like:-

run => ng serve --aot
Removed the module from import of the root module because i was already using module in the routing in loadChildren section.

By using both of the ways i was able to run the application. So, you can try any one of these.

Tri Vo

We didn't need to import AdminModule to app.module

Remove this from app.module and app-routing.module file and it will work fine.

import { AdminModule } from "./admin/admin.module";

{path: 'admin', loadChildren:() => AdminModule }

try this. this is the solution to the problem

来源：https://stackoverflow.com/questions/50243534/angular6-feature-module-lazy-loading-throwing-error-typeerror-undefined-is-not

标签

angular

angular6