Skip to content

/ angular

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

String-based Lazy Loading is not working anymore #35652

Open
maxschwarzmueller opened this issue Feb 23, 2020 · 3 comments · May be fixed by #35956
Open

String-based Lazy Loading is not working anymore #35652

maxschwarzmueller opened this issue Feb 23, 2020 · 3 comments · May be fixed by #35956
Assignees
@aikidave
Labels
comp: docs docsarea: cli and config freq1: low severity1: confusing state: has PR type: bug/fix
Projects
docs
Milestone
Backlog

Comments

@maxschwarzmueller
Copy link

@maxschwarzmueller maxschwarzmueller commented Feb 23, 2020

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
Copy link
Contributor

@alan-agius4 alan-agius4 commented Feb 24, 2020

@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
Copy link
Author

@maxschwarzmueller maxschwarzmueller commented Feb 24, 2020

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

Is this documented somewhere? Just asking because others might experience the same "issue".
@alan-agius4
Copy link
Contributor

@alan-agius4 alan-agius4 commented Feb 24, 2020

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.
@alan-agius4 alan-agius4 transferred this issue from angular/angular-cli Feb 24, 2020
@ngbot ngbot bot modified the milestone: needsTriage Feb 24, 2020
ajitsinghkaler added a commit to ajitsinghkaler/angular that referenced this issue Mar 9, 2020
@ajitsinghkaler
docs: add note that sting based lazy loading is opt-in
868ea06 
after angular version 8 string based lazy loading is not activated by default it is an opt in behaviour in which you have to add the lazy loaded routes in the tsconfig file for compilation. Aded a note too that it will be removed in version 11.

Fixes angular#35652
@ajitsinghkaler ajitsinghkaler linked a pull request that will close this issue Mar 9, 2020
Open
3 of 14 tasks complete
@ngbot ngbot bot modified the milestones: needsTriage, Backlog Apr 6, 2020
@kapunahelewong kapunahelewong added this to Committed - Selected for development in docs Apr 6, 2020
ajitsinghkaler added a commit to ajitsinghkaler/angular that referenced this issue Apr 7, 2020
@ajitsinghkaler
docs: add note that sting based lazy loading is opt-in
5f343e0 
after angular version 8 string based lazy loading is not activated by default it is an opt in behaviour in which you have to add the lazy loaded routes in the tsconfig file for compilation. Aded a note too that it will be removed in version 11.

Fixes angular#35652
ajitsinghkaler added a commit to ajitsinghkaler/angular that referenced this issue Jun 14, 2020
@ajitsinghkaler
docs: add note that sting based lazy loading is opt-in
e914678 
after angular version 8 string based lazy loading is not activated by default it is an opt in behaviour in which you have to add the lazy loaded routes in the tsconfig file for compilation. Aded a note too that it will be removed in version 11.

Fixes angular#35652
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@aikidave aikidave

Labels
comp: docs docsarea: cli and config freq1: low severity1: confusing state: has PR type: bug/fix
Projects
docs
Committed - Selected for development
Milestone
  Backlog
Linked pull requests

Successfully merging a pull request may close this issue.

docs: add note that sting based lazy loading is opt-in
4 participants
@kapunahelewong @alan-agius4 @maxschwarzmueller @aikidave
You can’t perform that action at this time.