angular6 feature module lazy loading throwing erro

问题:

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)

回答1:

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

回答2:

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

回答3:

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

回答4:

I faced the same issue solved it like:-

1. run => ng serve --aot
2. 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.

回答5:

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";

回答6:

Both the syntax

{path: 'admin', loadChildren:() => AdminModule } //(Dynamic import using lambda expression)

and

{path: 'admin', loadChildren:'app/admin/admin.module#AdminModule'} // (Dynamic import using string literal) 

should ideally work with Angular 8+ using both AOT compiler and JIT compiler for lazy loading feature modules. However, string literal way of lazy loading the modules works the best in angular-cli version 6 & 7 (JIT and AOT compiler).

You might still be stuck with the 'TypeError' thrown when using string literals with JIT compiler (ng serve), while it works perfectly fine with AOT(ng serve --aot). The error 'TypeError: undefined is not a function' is quite misleading. Please find a reference to the Github issue that was raised concerning the same problem, for more details.

https://github.com/angular/angular-cli/issues/10582

Solution:

This error is actually caused due to the circular dependency of module injection which arises when you import the lazy load intended module in your parent module as mentioned in many many articles you might have come across. This may be done by you either unintentionally or intentionally when you want to use an exported component/ service of your lazy loaded module elsewhere.

The best way to solve this is by clearly differentiating shared components and building a module of shared components and re-using them i.e. moving the export components/ services of a lazy loaded module to a shared / common module.

Hope my answer helps you.

回答7:

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

try this. this is the solution to the problem