Repository navigation
angular does not allow lazy load with AOT and different pipelines #19264
Description
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
After using webpack lazy load plugin with AOT, I have realized that I can not have different pipelines, having different deployments with different javascript files.
The idea it's to work in separated teams, developing different sections of the site, in order to do it , we want to have different pipelines, having different javascript files, loading by lazy load. We can do it in JIT, but after trying with AOT, we don't know how to do it and we don't want to loose this performance improvement.
Expected behavior
We want to have different javascript files with different pipelines, having different deployments to production, keeping AOT for all modules.
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Because of we have more than 40 developers working in the same application at the same time, we want to have separated deployments in order to don't deploy the whole app each time that a change it's coming.
Environment
Angular version: X.Y.Z
Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
Activity
Toxicable commentedon Sep 19, 2017
I don't follow what you want exactly.
For AOT to work all module must be statically analyzable, meaning that all modules must be present and known at build time.
If you cannot provide that then AOT cannot be run, there is no exception to this rule here
trotyl commentedon Sep 19, 2017
Technically it's fully possible when mapping all angular packages to global variable and use the same mapping when bundling each module.
But that's not covered by Angular CLI, you'll need to customize your own build process. (Could be easily done by Rollup, should also work for Webpack).
And a
NgModuleFactoryLoaderwithout SystemJS dependency would be helpful.Toxicable commentedon Sep 19, 2017
@trotyl Yeah for sure, I've actually made a POC which does exactly that, but it has a lot of drawbacks for being being you miss out on all globaly optimizations so very large bundle sizes so I for one would not recommend it.
trotyl commentedon Sep 19, 2017
@Toxicable Yep, tree-shaking would not be available in that case, but still much better than JIT for execution performance.
And it's OK for local admin platforms which does not worry about network speed.
antoniojim commentedon Sep 19, 2017
@Toxicable, could you share this POC? but the lazy load dynamic modules are in JIT, right?
antoniojim commentedon Sep 19, 2017
Hi @trotyl , I am doing this with global variables, but the javascript file that I am loading by lazy load should be in JIT, I want to have it in AOT, but I couldn't do it.
trotyl commentedon Sep 19, 2017
Just use
ngcinstead oftscand then bundle it. The router will delegate toNgModuleFactoryLoaderwhen passed string values, load it as you want.Toxicable commentedon Sep 19, 2017
@antoniojim Im not 100% sure it'll work out of the box but this is what I made
https://github.com/Toxicable/module-loading
Also remember that I don't recommend this approach
antoniojim commentedon Sep 19, 2017
@Toxicable Thanks, I will try it. So, this means that we can build the packages in AOT in isolated way, but taking into account that we have to export everything that it's shared in global variables, right?
rliuyi commentedon Sep 21, 2017
Thanks for your comment.
sizenineelm commentedon Oct 2, 2017
Interested in this solution as well. Abstracting the requirement, it would be to have a top-level AppComponent, which lazy loads N other modules. Each of the top-level app, and the N modules, would have their own build and deploy pipelines, and the app would pick up the deployed lazy loaded modules at 'run time'. (Similar to an exe being deployed and picking up separately deployed DLLs at runtime.)
(Will have a look at the prototype solution...)
jelbourn commentedon Oct 9, 2020
Tracking the main underlying concern here in #18093
angular-automatic-lock-bot commentedon Nov 9, 2020
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.