String-based Lazy Loading is not working anymore

[maxschwarzmueller]

Is this a regression?

Yes, it worked in Angular 8.

Description

String-based lazy loading (loadChildren: './path/to/module#Module') was deprecated as of Angular 8 and might be removed in Angular 11 (see: https://angular.io/guide/deprecations#index). Hence it should still work as of Angular 9.

When creating new Angular projects via ng new, this deprecated syntax doesn't work anymore though.

Instead, you get a "Cannot find module './module/....module'" error (see below).

The error is definitely related to changes made in the tsconfig.app.json file. (see "Minimal Reproduction").
It works as intended if the tsconfig.app.json file uses exclude: [ ... ]. It fails when using include: [ ... ] + files: [ ... ].

🔬 Minimal Reproduction

See: https://github.com/maxschwarzmueller/ng-string-lazy-loading-bug/

1) Failing Case
Clone and checkout "lazy-loading-fails" branch.

ng serve

Visit localhost:4200/demo

You get the "cannot find module" error in the browser dev tools.

2) Working Case

Checkout "lazy-loading-succeeds" branch and repeat above steps => It now works.

As described above, the only difference between the two branches is the content of the tsconfig.app.json file (comparison: https://github.com/maxschwarzmueller/ng-string-lazy-loading-bug/compare/lazy-loading-fails...lazy-loading-succeeds?expand=1#diff-5446e8397826b1757d7b7d8f63223eab).

🔥 Exception or Error

core.js:5873 ERROR Error: Uncaught (in promise): Error: Cannot find module './demo/demo.module'
Error: Cannot find module './demo/demo.module'
    at $_lazy_route_resource lazy namespace object:5
    at ZoneDelegate.invoke (zone-evergreen.js:365)
    at Object.onInvoke (core.js:40910)
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Zone.run (zone-evergreen.js:124)
    at zone-evergreen.js:851
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:40888)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at resolvePromise (zone-evergreen.js:793)
    at resolvePromise (zone-evergreen.js:752)
    at zone-evergreen.js:854
    at ZoneDelegate.invokeTask (zone-evergreen.js:400)
    at Object.onInvokeTask (core.js:40888)
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Zone.runTask (zone-evergreen.js:168)
    at drainMicroTaskQueue (zone-evergreen.js:570)

🌍 Your Environment

Angular CLI: 9.0.3
Node: 13.5.0
OS: darwin x64

Angular: 9.0.2
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.3
@angular-devkit/build-angular     0.900.3
@angular-devkit/build-optimizer   0.900.3
@angular-devkit/build-webpack     0.900.3
@angular-devkit/core              9.0.3
@angular-devkit/schematics        9.0.3
@angular/cli                      9.0.3
@ngtools/webpack                  9.0.3
@schematics/angular               9.0.3
@schematics/update                0.900.3
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[alan-agius4]

@maxschwarzmueller, that is expected that string based lazy loaded will fail unless you amend you tsconfig to include the lazy-loaded routes. This is because otherwise the lazy-loaded files will not be part of the compilation.

String-based lazy loading (loadChildren: './path/to/module#Module') was deprecated as of Angular 8 and might be removed in Angular 11 (see: https://angular.io/guide/deprecations#index). Hence it should still work as of Angular 9.

It does work, but you need to opt-in this behaviour. As by default the CLI will generate projects which stricter file inclusions intended to be used with the import() lazy syntax.

[maxschwarzmueller]

I see, thank you very much for the clarification! :)

Is this documented somewhere? Just asking because others might experience the same "issue".

[alan-agius4]

I don’t think there are docs for this. Transferring to the Fw repo so that we can add this until the string based lazy loading is supported.

[angular-automatic-lock-bot]

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