lazy loaded module is not found when using ng serve until recompile is triggered #8162

Rialgar · 2017-10-24T09:06:47Z

Bug Report or Feature Request (mark with an `x`)

- [X ] bug report -> please search issues before submitting
- [ ] feature request

Versions.

@angular/cli: 1.4.9
node: 6.11.0
os: linux x64
@angular/animations: 4.4.6
@angular/common: 4.4.6
@angular/compiler: 4.4.6
@angular/core: 4.4.6
@angular/forms: 4.4.6
@angular/http: 4.4.6
@angular/platform-browser: 4.4.6
@angular/platform-browser-dynamic: 4.4.6
@angular/router: 4.4.6
@angular/cli: 1.4.9
@angular/compiler-cli: 4.4.6
@angular/language-service: 4.4.6
typescript: 2.3.4

Ubuntu 16.04
Checked in Chrome

Repro steps.

Clone this repo: https://github.com/Rialgar/ngServeIssue
Run ng serve
Open http://localhost:4200/#/sometimes
Observe error
Add or remove an empty line in app.component.ts (other files may work, too) and save
Open http://localhost:4200/#/sometimes again
Observe no error

The relevant part here is that the route using the sometimes module is only added if environment.production is falsy. This seems to cause the difference between the initial build in ng serve and later rebuilds.

The log given by the failure.

core.es5.js:1020 ERROR Error: Uncaught (in promise): Error: Cannot find module './sometimes/sometimes.module'.
Error: Cannot find module './sometimes/sometimes.module'.
    at webpackAsyncContext (src async:10)
    at SystemJsNgModuleLoader.webpackJsonp.../../../core/@angular/core.es5.js.SystemJsNgModuleLoader.loadAndCompile (core.es5.js:5659)
    at SystemJsNgModuleLoader.webpackJsonp.../../../core/@angular/core.es5.js.SystemJsNgModuleLoader.load (core.es5.js:5647)
    at RouterConfigLoader.webpackJsonp.../../../router/@angular/router.es5.js.RouterConfigLoader.loadModuleFactory (router.es5.js:3531)
    at RouterConfigLoader.webpackJsonp.../../../router/@angular/router.es5.js.RouterConfigLoader.load (router.es5.js:3515)
    at MergeMapSubscriber.project (router.es5.js:1679)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:122)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:112)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at ScalarObservable.webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe (ScalarObservable.js:49)
    at webpackAsyncContext (src async:10)
    at SystemJsNgModuleLoader.webpackJsonp.../../../core/@angular/core.es5.js.SystemJsNgModuleLoader.loadAndCompile (core.es5.js:5659)
    at SystemJsNgModuleLoader.webpackJsonp.../../../core/@angular/core.es5.js.SystemJsNgModuleLoader.load (core.es5.js:5647)
    at RouterConfigLoader.webpackJsonp.../../../router/@angular/router.es5.js.RouterConfigLoader.loadModuleFactory (router.es5.js:3531)
    at RouterConfigLoader.webpackJsonp.../../../router/@angular/router.es5.js.RouterConfigLoader.load (router.es5.js:3515)
    at MergeMapSubscriber.project (router.es5.js:1679)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:122)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:112)
    at MergeMapSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at ScalarObservable.webpackJsonp.../../../../rxjs/observable/ScalarObservable.js.ScalarObservable._subscribe (ScalarObservable.js:49)
    at resolvePromise (zone.js:824)
    at resolvePromise (zone.js:795)
    at zone.js:873
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
    at drainMicroTaskQueue (zone.js:602)
    at <anonymous>

Desired functionality.

ng serve should produce the same result for the same code, regardless if it is the first compile or a recompile later.

Mention any other details that might be useful.

I will try and see if the error happens if I deploy the result of ng build to a simple webserver.

The text was updated successfully, but these errors were encountered:

Rialgar · 2017-10-24T09:22:37Z

When I build the application with ng build, this setup shows the error. So the bug here seems to be that ng serve removes it when rebuilding. (Or that the error is there in the first place, I am not quite sure about the expected behaviour here, if the later we should probably move this issue)

Rialgar · 2017-10-24T10:22:36Z

Turns out this approach to handling routing does not work at all, for reasons I don't quite understand. So I am no longer affected by this issue (I use canLoad now).

Regardless, ng serve should behave consistently, that is consistently show the error.

filipesilva · 2017-10-25T11:09:16Z

I think what you were experiencing is related to #7305 actually. It seems that environments aren't persisted correctly across rebuilds: #7305 (comment)

If you don't think that's the same thing let me know and I will reopen this one.

EnricoMazzu · 2017-11-20T09:07:57Z

I've the same issue. I don't think that's the same in #7305.
ng build have the same behavior (but in this case i have to use --watch , save file with a fake change and after that i see my lazy.module.chunk.js in dist folder).
my ng --version output:

Angular CLI: 1.5.2
Node: 6.10.3
OS: darwin x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@ angular/cli: 1.5.2
@ angular-devkit/build-optimizer: 0.0.33
@ angular-devkit/core: 0.0.20
@ angular-devkit/schematics: 0.0.36
@ ngtools/json-schema: 1.1.0
@ ngtools/webpack: 1.8.2
@ schematics/angular: 0.1.5
typescript: 2.3.4
webpack: 3.8.1

zbuhler · 2018-02-13T17:17:36Z

Interestingly, if you remove the if block around the route definition in the sample repo it works. i.e.

// if ( !environment.production ) {
  ChildRoutes = ChildRoutes.concat( [ {
    path: 'sometimes',
    loadChildren: './sometimes/sometimes.module#SometimesModule'
  } ] );
// }

It appears to me that there must be something buggy about whatever analyzes your code for use of loadChildren. It doesn't seem to catch it in the initial build but during the watching phase it does.

I stumbled on this problem when trying to make use of routing modules within my app. It is a somewhat larger app and, curiously, if I don't make use of routing modules and define my routes within the respective module itself it works fine on startup. If I don't and use routing modules and get the error and I add a change to a file then let it compile via the watcher it works fine.

I can't seem to find it (if I'll do I'll post it here) but I found another github issue a few days ago while trying to troubleshoot this where people were reporting something along the same lines.

Searching the repo @ngtools/webpack seems like it might be a candidate as it-

[Recognizes] the use of loadChildren in the router, and bundling those modules separately so that any dependencies of those modules are not going to be loaded as part of your main bundle.

However, it also appears to be part of AoT which I am currently not using.

In any case, I strongly recommend that this issue be reopened as @EnricoMazzu has had the issue and simply doing-

if ( true ) {
  ChildRoutes = ChildRoutes.concat( [ {
    path: 'sometimes',
    loadChildren: './sometimes/sometimes.module#SometimesModule'
  } ] );
}

also exposes the problem. I will continue investigating and if I find the source of the problem I will look into submitting a pull request.

I should also mention that I am using, at the time of this writing, the most current angular-cli version.

luchusnet · 2018-06-15T18:51:20Z

Same problem here

Angular CLI: 6.0.8
Node: 8.9.3
OS: win32 x64
Angular: 5.2.10
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cdk 5.2.5
@angular/cli 6.0.8
@angular/flex-layout 2.0.0-beta.12
@angular/material 5.2.5
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
rxjs 5.5.10
typescript 2.6.2
webpack 4.8.3

angular-automatic-lock-bot · 2019-09-08T07:41:37Z

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

filipesilva self-assigned this Oct 25, 2017

filipesilva added needs: investigation Requires some digging to determine if action is needed P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Oct 25, 2017

filipesilva closed this as completed Oct 25, 2017

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

lazy loaded module is not found when using ng serve until recompile is triggered #8162

lazy loaded module is not found when using ng serve until recompile is triggered #8162

Rialgar commented Oct 24, 2017 •

edited

Loading

Rialgar commented Oct 24, 2017 •

edited

Loading

Rialgar commented Oct 24, 2017 •

edited

Loading

filipesilva commented Oct 25, 2017

EnricoMazzu commented Nov 20, 2017 •

edited

Loading

zbuhler commented Feb 13, 2018 •

edited

Loading

luchusnet commented Jun 15, 2018

angular-automatic-lock-bot bot commented Sep 8, 2019

lazy loaded module is not found when using ng serve until recompile is triggered #8162

lazy loaded module is not found when using ng serve until recompile is triggered #8162

Comments

Rialgar commented Oct 24, 2017 • edited Loading

Bug Report or Feature Request (mark with an x)

Versions.

Repro steps.

The log given by the failure.

Desired functionality.

Mention any other details that might be useful.

Rialgar commented Oct 24, 2017 • edited Loading

Rialgar commented Oct 24, 2017 • edited Loading

filipesilva commented Oct 25, 2017

EnricoMazzu commented Nov 20, 2017 • edited Loading

zbuhler commented Feb 13, 2018 • edited Loading

luchusnet commented Jun 15, 2018

Package Version

angular-automatic-lock-bot bot commented Sep 8, 2019

Rialgar commented Oct 24, 2017 •

edited

Loading

Bug Report or Feature Request (mark with an `x`)

Rialgar commented Oct 24, 2017 •

edited

Loading

Rialgar commented Oct 24, 2017 •

edited

Loading

EnricoMazzu commented Nov 20, 2017 •

edited

Loading

zbuhler commented Feb 13, 2018 •

edited

Loading