Angular: Angular5.x lazyLoad problem, undefined is not a function

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

Duplicate of angular/angular-cli#9825

I fixed my issue with ng serve --aot

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 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 solution worked out perfectly for me, thanks man!

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

@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.

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
[email protected]

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 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 Great! Thank you

@ThomasEg It works. Thanks!!!

@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._}