angular-cli: ng serve --watch --aot and lazy loaded modules - doesn't work anymore

CLI 6.0.1 angular 6.0.1 Windows 10 x64

I use the following when I work on the project:

ng serve --ssl --host %NetworkIP% --port 4200 --proxy-config proxy.config.json --watch --aot

and the first time I run the project everything works. But for all subsequent changes in any file of the lazy loaded modules, the module does not load and throws the error:

Uncaught (in promise): TypeError: Cannot read property ‘call’ of undefined TypeError: Cannot read property ‘call’ of undefined at webpack_require (bootstrap:81) at Object…/src/app/collaboration/components/availableView.component.ngfactory.js (availableCollView.component.ts:20) at webpack_require (bootstrap:81) at Object…/src/app/collaboration/containers/availableColls.component.ngfactory.js (workCard.component.ts:30) at webpack_require (bootstrap:81) at Object…/src/app/collaboration/collaboration.module.ngfactory.js (collaboration-routing.module.ts:85) at webpack_require (bootstrap:81) at $_lazy_route_resource lazy namespace object:61

etc. So I have to restart ng serve every time.

Here’s the routing config:

const routes: Routes = [
    ...
   {
      path: "collaboration",
      canActivate: [RoleAuthorizationGuard],
      loadChildren: "./collaboration/collaboration.module#IlgCollaborationModule"
   },
   ...
];

@NgModule({
   imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
   exports: [RouterModule],
   providers: [CanDeactivateGuard]
})
export class AppRoutingModule {}

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 25
  • Comments: 32 (3 by maintainers)

Most upvoted comments

Long story short, use "@angular-devkit/build-angular": "0.7.0-rc.0", and problem solved!

Any news on this ? It would be good to have at least an official statement about the resolution of this issue.

TLDR: “commonChunk”: false in your angular.json config for serve command and it may help.

Have tried the upgrade, but it did not work in our case. In the end it turned out that the webpack build used under the hood is producing a common.js chunk which was never loaded (!) neither via html or dynamic import, thus the modules defined in it were missing and bootstrapping failed on first one. This resulted in the error being thrown, mentioned in the bug report (cannot invoke call of undefined) when webpack was trying to initialize a missing module.

I gave up and turned off AOT in the dev configuration. 😦

Seems fixed in @angular/cli@6.0.7