Angular: How to let user go directly to lazy loaded URL?

Question

I have an Angular-4 app with several modules, some of which are lazy-loaded, and it all works fine when the user starts at the "home" page.

Before I added lazy-loading, the user could also cold/directly load any legal app URL (say, localhost:4200/foo), and that worked fine too (aka deep-linking).

But, after changing the module associated with /foo to lazy-loading, you now get a blank page, no errors, and displaying a URL of localhost:4200 when you cold load localhost:4200/foo. (Again, lazy-loaded /foo works fine if the user navigates to it via the router.)

So, is there a trick to allow the user to directly launch a URL that is handled by a lazy-loaded module? Or, do you give up that ability if you use lazy-loading?

no, as usual it is a big code base hence the simplified question. I am hoping someone posts a link to an official page saying "you can't do that", or a link to an existence proof (i.e. an example showing that you can do it) — user292701

user292701 user292701 · Accepted Answer · 2017-12-21T17:13:45

Well, I bit the bullet and implemented a toy example, based on this tutorial:

https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

and, it was possible to directly load localhost:4200/lazy.

So, it is not forbidden per se, and there must be something nastily complicated in my real code that is the culprit.

Angular: How to let user go directly to lazy loaded URL?

1 Answers