Repository navigation
@ngtools/webpack AoTPlugin multi app feature. #7954
Description
Activity
Hi @hansl
It took me a while to realise that I could just run "ngc" first and then bundle up the AOT files with webpack
But with @ngtools/webpack AotPlugin there is no need to have duplicate "starters" files for JIT and AoT...
Here is a sample project of my multi-app implementation with AOT
https://github.com/mcgri/NgMultiApp
(Navigation is controlled by .NET 4.6 MVC...each page has it own ng2 app)All configs are there.
So, as I already learned how to achieve AoT with webpack..only one question remains. Are there plans to allow AotPlugin to receive multiple apps(modules)?
Here is another example of a setup with multiple apps: https://github.com/Independer/ind-angular-starter.
And the use case for such setup is the following:
- Apps share a large amount of code (more than 50%);
- All apps need to be built in one go because of:
- Ability to switch between apps quickly when testing changes in shared code;
- Integration - build should fail if the change in shared code breaks one of the apps;
- Build speed - if all apps need to be build separately the build would take very long time.
To give a very specific example of the use case, we have a large website that helps customers with various insurances. For each insurance type we have a separate Angular app (e.g. travel insurance, car insurance, etc.). Those apps share a lot of code and at this moment we have 11 such apps. If we had to build each of the separately (like with Angular CLI
ng build --prod --aot --app <app_name>) it would be very difficult to work with and to build all the apps on our CI server it would take more than 30 minutes (our combined build now takes around 7 minutes).Hope this helps.
BTW, does the new
AngularCompilerPluginsupport such scenario?Reacted by mcgri, Dmitry Shnyrev, Sergey Gruntovsky and Pavel ShuryginI needed this feature too, so I made a patch for AngularCompilerPlugin to allow for multiple entry points. (specified either via tsconfig->angularcompileroptions->entrymodule array or via multiple bootstrapModule calls in main.ts). I patched AngularCompilerPlugin only, but logic can be easily applied to AoTPlugin too.
See miiihi@fb75650
Duplicate of #4624
Reacted by Vuong Nguyen, sweetyx, Maksim Popov, Orest Prystayko, Anton Rusak and Peng Xiao@miiihi I tested your code and while it compiles perfectly I seem to be having the problem that only the first app is included in the generated code. I am using multiple entry points in a webpack config like so:
entry: { 'app1': helpers.root('src', 'app1', 'main.ts'), 'app2': helpers.root('src', 'app2', 'main.ts') }The output files for the different webpack entry points are exactly the same. What logic is being used to determine this? (I am using an array for
entryModuleintsconfig.json)I also opened a stack overflow question about this here:
https://stackoverflow.com/questions/47440300/angular-multiple-entry-points-with-aotOne way to solve the problem might be to allow passing a function to
entryModule. That way something like this might be possible:new ngToolsWebpack.AngularCompilerPlugin({ tsConfigPath: helpers.root('tsconfig.json'), entryModule: function(module) { return module.context.indexOf('/somePath/') >= 0 ? 'someModule' : 'someOtherModule'; } }),Any thoughts?
Reacted by Ruslan Arkhipau@miiihi I wasn't passing any entryModule, instead defining them as part of tsconfig. Moving them to the AngularCompilerPlugin declaration does not change anything. I posted my webpack config here: https://gist.github.com/sqwk/ac04e8d0ca834347656b11206e36f7e8
@johnbendi If you just wan't to test, simply apply the patch to the
node_modules/@ngtools/webpack/... For regular use you'd probably wan't to clone my branch locally, create a package and the use that package in your project instead of regular@ngtools/webpack@sqwk Your config lgtm, mine is quite similar, so I'm not sure what's the problem. I don't think that AngularCompilerPlugin and/or entryModule are to blame... Are sure that your entry files (main.ts) are different? If they are, I have no explanation, how the output files can be exactly the same...
@miiihi I checked the two files once more and they are definitely identical, with the exception of some webpack_imports(). One of the apps fails to load with the error message
The selector "app2" did not match any elements.Could you show me your webpack config? Maybe I can work from that one, to see if both apps compile as they should?
Because I didn't have the posibility to call ngc before webpack (no package.json update allowed) I simply used a master module.
For specific sub app config I use webpack merge plugin in the global webpack config.
@sqwk I ran into the same issue. In my case, the issue was both modules had the same name (AppMod). Changing one to App1Mod and the other to App2Mod solved the problem for me.
@miiihi Any idea why that might be?
I wasn't able to apply the patch as is to v1.6.6, so there's a branch here:
https://github.com/matt-duch/angular-cli/tree/v.1.6.6-multi-entryModule
which is based off of the v1.6.6 tag. For comparison:
https://github.com/matt-duch/angular-cli/compare/1.6.x...matt-duch:v.1.6.6-multi-entryModule
(seems to work, haven't fully tested though)2 remaining items
While this get fixed, I published a npm package with some modifications to handle multiple entry modules:
@artonge/webpackfeel free to use it.
You only have to replace@ngtools/webpackby@artonge/webpackin your webpack config and changeentryModule: "your module"byentryModules: ["your module A", "your module B"]Reacted by Tarnnn and Aigars ZeizaReacted by Anton RusakIt's on the
feature/multiple_entryModule_supportbranch. It should be the default one now.I need this functionality for my project too. Is there any plans to implement this or merge proposed changes?
@pshurygin
Short answer: they won't merge changes, but the feature will come with a future release
See: angular/devkit#875I didn't get my hands on the latest angular version so I cannot guide you, sorry.
@artonge I rebased your patch on top of angular/angular-cli@master
Package published to:
@rush/webpack - https://www.npmjs.com/package/@rush/webpackTo use:
"@rush/webpack": "7.1.0-rc.0",Available on Github
https://github.com/Rush/angular-cliThanks for your original work!
Reacted by Louis, Aigars Zeiza and David EdHello,
First of all, thank you for your work!
I'm trying to use @artonge or @Rush package to have multiple entry points to have multiple angular apps but I'm not able to configure properly a global tsconfig for both projects.
If I use the global tsconfig I get:
Module not found: Error: Can't resolve './app/app.module.ngfactory' in 'C:\Repos\Personal\POC-split-dependencies\reference\src'
Do you have any example of a global tsconfig to put at tsConfigPath?
Thank you so much!!
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.
- locked and limited conversation to collaborators
on Sep 19, 2019
Bug Report or Feature Request (mark with an
x)Versions.
@angular/cli: 1.4.4
node: 6.9.2
os: win32 x64
Desired functionality.
Allow Multiple apps to pass via AoTPlugin
Mention any other details that might be useful.
Hi Guys. Thank you for all tremendous work you do.
We have a large project which we started building when ng2 was in beta 17 :) Our system is .NET 4.6 based (still dreaming to migrate it to .core) and it has 8 ng2 applications, with a hundred of shared components. The navigation between those apps needs to be controlled by backend due to strict access rules.
Right now, the project is webpack based. Each app's bundle after minification&uglification is about 2mb. I am trying to bring the loading time of each app below 4 seconds (down from 11). I added AoT plugin to the webpack and passed 1 of the main modules....The AoT reduced the bundle size for this app by ~200 KB and reduced the loading times by 4-5 sec.. It just amazing.
Now, I am looking into how to apply such magic to all apps in the system.. I have done some googling for 2 days and The only way which I see to achieve it is to create some kind of master module...but that will require huge system restructure and spending time, which we don't have. Deadlines.
Finally the questions. Is there a way to pass multiple modules/apps through AotPlugin? If no, then are there plans to add such feature?
Will completely migrating from webpack to the angular-cli help to achieve my goal of enabling AoT for all modules without unifying 8 apps under 1 master app?
Thank you for your time :)