Issue with Lazy Loading/Modules
Closed this issue · 2 comments
Routing to a lazy loaded module in the front end seems to recursively load main-es2015.js
Please find attached repo with replication of the issue.
Please let us know if this should work, or if we're doing something wrong. Keen to start using this in anger, soon as possible :)
Steps to replicate:
Run microfront end on server
Serve platform app
Navigate to localhost:4200/quote-and-buy
Observe console window of infinite loop
Look forward to hearing from you.
Vickie & Kelvin
Hey @vickieallen-certua!
I've debugged through that issue and it looks like the load-bundle activation guard is entered over and over without additional navigations being cause by this lib.
I am not sure how lazy-loading of modules is implemented in Angular, but I would assume that it results into different files besides the main.js . However, ngx-build-plus will bundle these all together into one main.js file. So what I assume is happening here is that the lazy-loading somehow leads to the main.js being loaded again since the module to be lazy loaded is merged into this file.
Long story short: I think lazy loaded modules can not work within web-component based micro frontends due to them being defined in a single file. If you're trying to achieve more isolated modules within the micro frontend, then loadChildren: () => QuoteAndBuyModule is maybe an option? If you're trying to boost performance, I am afraid I don't think there's a solution to this with this approach right now.
Thank you this is very helpful. I have changed all our lazy loaded modules to load as you suggested above and it seems to be working now.