Angular5.x lazyLoad problem, undefined is not a function

when I update the angular version form 4.x to 5.x, tell me the error:

core.js:1449 ERROR Error: Uncaught (in promise): TypeError: undefined is not a function
TypeError: undefined is not a function
    at Array.map ()
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:formatted:17), :657:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6570)
    at SystemJsNgModuleLoader.load (core.js:6554)
    at RouterConfigLoader.loadModuleFactory (router.js:4595)
    at RouterConfigLoader.load (router.js:4575)
    at MergeMapSubscriber.eval [as project] (router.js:2061)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:95)
    at Array.map ()
    at webpackAsyncContext (eval at ./src/$$_lazy_route_resource lazy recursive (main.bundle.js:formatted:17), :657:34)
    at SystemJsNgModuleLoader.loadAndCompile (core.js:6570)
    at SystemJsNgModuleLoader.load (core.js:6554)
    at RouterConfigLoader.loadModuleFactory (router.js:4595)
    at RouterConfigLoader.load (router.js:4575)
    at MergeMapSubscriber.eval [as project] (router.js:2061)
    at MergeMapSubscriber._tryNext (mergeMap.js:128)
    at MergeMapSubscriber._next (mergeMap.js:118)
    at MergeMapSubscriber.Subscriber.next (Subscriber.js:95)
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at eval (zone.js:873)
    at ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:4751)
    at ZoneDelegate.invokeTask (zone.js:420)
    at Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at

my code:

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import {RbacService} from './rbac/rbac.service';
const routes: Routes = [
  {
    path: '',
    redirectTo: '/page/index/main',
    pathMatch: 'full'
  },
  {
    path: 'page',
    component: MitLayoutComponent,
    canActivate: [RbacService],
    children: [
      {path: 'index', 
      loadChildren: 'app/modules/index/index.module#IndexModule', 
     canActivate: [RbacService]}, 
    ];
   export const AppRoutes: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true});

Angular CLI: 1.7.4
Node: 8.9.4
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

@angular/cli: 1.7.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.4.9
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.4.2
webpack: 3.11.0

angular/angular-cli#9825

Duplicate of angular/angular-cli#9825

I fixed my issue with ng serve --aot

Built up Authorized SubModule

For others that find this issue via Google as i did: I had the same problem when trying to lazy load modules and no other answers helped. I realized that i had imported my lazy-loaded module into my app-module by mistake:

NgModule({
  ....
  imports: [
    .....
    MyCustomModule,    //<--- This needs to be removed if you lazy load!
    AppRoutingModule,
  ],
  bootstrap: [AppComponent],

})

Hope it helps someone....

@ThomasEg

@ThomasEg Thanks a lot, this really saved my bacon! Seems like the docs need to put a "heads up" about this, and be very clear about this. Man... spent so much time.

@ThomasEg

@ThomasEg solution worked out perfectly for me, thanks man!

@ThomasEg

@ThomasEg you straight away saved my another 3-4 hours. Thanks.

@ThomasEg

@ThomasEg Perfect solution. Thanx a lot!

thnxs .. i was having trouble with this

thanks

It is usually Angular CLI that added the lazy-loaded Angular module to AppModule's imports option when it was generated.

@Injectable

Hi I've solved the problem with Lazy Loading and it looks to work fine without any errors
For each lazy loaded child you add a dummy guard with canLoad return true

{ path: 'pet-insurance', canLoad: [PetGuard], loadChildren: './_modules/Insurance/Pet-Insurance/pet-insurance.module#PetInsuranceModule'},

import { Injectable } from '@angular/core';
import { Router, CanLoad, Route } from '@angular/router';

@Injectable({
providedIn: 'root'
})
export class PetGuard implements CanLoad {

constructor(private router: Router) { }

// checks if we can load the route concerning LifeInsurance
canLoad(route: Route): boolean {
    return this.petInsurance(route.path);
}

petInsurance(url: string): boolean {
    return true;
}

}

From Gordon Cumming
dynaphoneimages@hotmail.com

For others that find this issue via Google as i did: I had the same problem when trying to lazy load modules and no other answers helped. I realized that i had imported my lazy-loaded module into my app-module by mistake:
NgModule({
  ....
  imports: [
    .....
    MyCustomModule,    //<--- This needs to be removed if you lazy load!
    AppRoutingModule,
  ],
  bootstrap: [AppComponent],

})
Hope it helps someone....

Thanks! Note, this also applies to child modules as well as the root. Rule of thumb, if lazing loading a module, do not include it in any modules. This can be a hard habit to break if you are used to adding child modules to parent modules, or have not worked with lazy loading modules in the past!

@ThomasEg

@ThomasEg Thank YOU!!!

In my case also it works with ng serve --aot. Following description is about not using --aot flag:
I cross checked to ensure that the lazy-loaded modules are not imported in the app module. What I noticed is that the pages load when using directly the path declared in the lazy-loaded modules (without the context declared in the app-routing module). The error comes only when I try to put the full path, and of course that's not what I need.

@ThomasEg

@ThomasEg Great! Thank you

@ThomasEg

@ThomasEg It works. Thanks!!!

@ThomasEg

@ThomasEg Thanks a lot, you saved my day.

If 'app-fixed-topbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
suppose include the CUSTOM_ELEMENTS_SCHEMA in my module.error is resolved but
app-fixed-topbar it is not showen in my page

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

Navigation Menu

Repository navigation

Angular5.x lazyLoad problem, undefined is not a function #23412

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Angular5.x lazyLoad problem, undefined is not a function #23412

Description

Activity

splincode commented on Apr 17, 2018

jasonaden commented on Apr 17, 2018

vspatil678 commented on Sep 4, 2018

ThomasEg commented on Sep 19, 2018

mrcleanandfresh commented on Oct 11, 2018

nico-val commented on Oct 19, 2018

Abdullah8006 commented on Oct 26, 2018

devfcr commented on Nov 1, 2018

Twechy commented on Nov 13, 2018

Herwt-liyj commented on Nov 20, 2018

LayZeeDK commented on Dec 11, 2018

DynamiteTom commented on Jan 13, 2019

AdonousTech commented on Jan 20, 2019

sheikhziadahmed commented on Jan 29, 2019

sijucm commented on Feb 3, 2019

elwyncrestha commented on Apr 8, 2019

RodrigoPauletti commented on Apr 8, 2019

dlmvikas commented on May 6, 2019

gayathribindela commented on May 8, 2019

angular-automatic-lock-bot commented on Sep 15, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions