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

Question

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)

please include the AdminModule, AFAIK lazy loading and router hasn't change a lot in Angular 6 — Joshua Chan
– Joshua Chan, Commented May 8, 2018 at 23:58
As one note, don't import the AdminModule module in your AppRoutingModule module. Do you see the new chunk being downloaded in your network tab in Chrome? Are you exporting your module in AdminModule? What do the routes look like for that module? — Daniel W Strimpel
– Daniel W Strimpel, Commented May 9, 2018 at 0:41
{path: 'admin', loadChildren:() => AdminModule } this is the solution to the problem — Abinash Mohapatra
– Abinash Mohapatra, Commented Jul 9, 2018 at 9:54

yoerids · Accepted Answer · 2018-07-30 07:53:20Z

45

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

answered Jul 30, 2018 at 7:53

yoerids

9181 gold badge8 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kirby Over a year ago

Same here. I had initially imported a feature module into my app module, then read about lazy loading and edited the routes but forgot to remove the import statements. The error message "undefined is not a function" was not helpful in the least.

crucifery Over a year ago

Yes, lazy loaded modules should NOT be imported directly to the root module by their nature, haha.

Joshua Over a year ago

I had the same issue, I imported directly to AppModule and also lazy-loaded the module, removing it from the AppModule imports fixed it.

Ester Kaufman · Accepted Answer · 2018-08-01 10:28:01Z

9

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

answered Aug 1, 2018 at 10:28

Ester Kaufman

88813 silver badges20 bronze badges

4 Comments

crucifery Over a year ago

Don't forget to NOT important AdminModule to the AppModule since it should be loaded lazily.

Ester Kaufman Over a year ago

@hastrb Your comment is not necessary because I already wrote it in the answer itself. read it again.

crucifery Over a year ago

you're not right. There is no words about NOT importing it eagerly to the root module. It is not enough just to configure routing since the most part of developers add lazy modules to an array of important to the root module at first attempt before googling it.

Ester Kaufman Over a year ago

@hastrb As I said, please read the answer again! see in line number 3 - 5: Important! Using loadChildren as a function - is Not lazy loading cause you need to import the lazy module in the routing module.

Stephan T. · Accepted Answer · 2018-12-27 08:33:33Z

8

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

edited Dec 27, 2018 at 8:33

Stephan T.

6,1243 gold badges26 silver badges44 bronze badges

answered Dec 27, 2018 at 6:38

sharad jain

1,62116 silver badges10 bronze badges

1 Comment

mrClean Over a year ago

+1 This was exactly what I needed! I was importing the Modules — that I was lazy loading in app-routing.module — inside my app.module file! It seems unintuitive to remove these imports in app.module but it solved this issue immediately. I even had a previous code example to draw from and didn't catch this subtlety.

Arjun Sunil Kumar · Accepted Answer · 2020-02-22 18:28:51Z

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.

Shashikant Pandit · Accepted Answer · 2018-09-30 06:00:45Z

1

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.

answered Sep 30, 2018 at 6:00

Shashikant Pandit

2,87425 silver badges29 bronze badges

1 Comment

crucifery Over a year ago

The first step is unnecessary. The most important thing to know is to NOT import lazy modules in your root module such as AppRoot. It should be loaded lazily, sometimes even never for some user cases.

BinaryGuy · Accepted Answer · 2019-09-05 06:08:59Z

1

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

edited Sep 5, 2019 at 6:08

BinaryGuy

1,2861 gold badge15 silver badges30 bronze badges

answered Sep 5, 2019 at 3:10

Tri Vo

111 bronze badge

Comments

Abinash Mohapatra · Accepted Answer · 2018-07-09 09:56:23Z

-6

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

try this. this is the solution to the problem

answered Jul 9, 2018 at 9:56

Abinash Mohapatra

3291 gold badge3 silver badges6 bronze badges

3 Comments

Ronnyek Over a year ago

While this does work, I am pretty certain this actually is no longer lazy loading, as getting this code to compile, you'd have to import AdminModule up front and have a hard reference to the module

yoerids Over a year ago

This works, but this also disables lazy loading. In my opinion, not a valid answer to this question.

kris_IV Over a year ago

This solution doesn't have any sense. If you use this idea you lose lazy loading for this module...

Collectives™ on Stack Overflow

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

7 Answers 7

3 Comments

4 Comments

1 Comment

Comments

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

4 Comments

1 Comment

Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related