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

[alvipeo]

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 {}

[alvipeo]

Another variant of the error:

Uncaught (in promise): Error: Cannot find 'IlgCollaborationModule' in './collaboration/collaboration.module'
Error: Cannot find 'IlgCollaborationModule' in './collaboration/collaboration.module'
at checkNotEmpty (core.js:5588) [angular]
at vendor.js:33707:47 [angular]
at Object.onInvoke (core.js:4062) [angular]
at polyfills.js:3194:34 [angular]
at Object.onInvokeTask (core.js:4053) [angular]
at drainMicroTaskQueue (zone.js:595) []

[TomDemulierChevret]

Same issue here, having to restart the serve every time is quitte cumbersome.

[krilllind]

Facing the same issue as @alvipeo, I feel like this need an urgent fix.
This is my configuration:

Angular CLI: 6.0.3
Node: 8.11.1
OS: win32 x64
Angular: 6.0.2
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.3
@angular/cli                      6.0.3
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.3
@schematics/update                0.6.3
rxjs                              6.1.0
typescript                        2.7.2
webpack                           4.8.3

[alvipeo]

Yes, 6.0.3 doesn't work either..

[kritisoft]

Same issue here, Please find a fix for this or a workaround.

[kernwig]

Workaround please. I tried disabling AOT, but that results in dependency injection failing. I don't see an easy to disable router lazy loading.

[kernwig]

Found my temporary workaround. For dev, I disabled AOT and, as a result, had to uncomment
import 'core-js/es7/reflect'; in polyfills.ts, per the comment stating that it is needed for JIT.

[krilllind]

Tried updating today and see if the new changes would make a difference, but I still face the same problems. My new versions look like this:

Angular CLI: 6.0.5
Node: 8.11.1
OS: win32 x64
Angular: 6.0.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.6.3
@angular-devkit/build-angular     0.6.3
@angular-devkit/build-optimizer   0.6.3
@angular-devkit/core              0.6.3
@angular-devkit/schematics        0.6.5
@angular/cli                      6.0.5
@ngtools/webpack                  6.0.3
@schematics/angular               0.6.5
@schematics/update                0.6.5
rxjs                              6.2.0
typescript                        2.7.2
webpack                           4.8.3

[manojvignesh]

I too have the same issue. I tried debugging and found that some module is trying to load "./node_modules/rxjs/internal/Observable.js" But i've checked my code and no where i'm using such import statement.

[TomDemulierChevret]

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

[alexfung888]

Seems fixed in @angular/cli@6.0.7

[TomDemulierChevret]

Not for me.

[alexfung888]

@TomDemulierChevret then aot plus lazy loading is not the only criteria. I have two repositories both with aot and lazy loading. They shows this error (crash when I change source to trigger a recompile). After my upgrade to cli607, neither repository show this problem any more.

[TomDemulierChevret]

Can you do an ng -v of both projects to see if we have the same version for other packages ?

And I don't know the exact source of this issue, but it definitly appeared after upgrading to Angular 6.