@ngtools/webpack AoTPlugin multi app feature.

[mcgri]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x ] feature request

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 :)

[hansl]

Hi @mcgri,

A few questions:

1. Do you have an example we could look at?
2. Do you have a single webpack config for all entry points, or one webpack config for each?
3. How's your tsconfig configured?
4. Could you share your webpack config?

Thanks!

[mcgri]

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)?

[pglazkov]

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:
  1. Ability to switch between apps quickly when testing changes in shared code;
  2. Integration - build should fail if the change in shared code breaks one of the apps;
  3. 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 AngularCompilerPlugin support such scenario?

[miiihi]

I 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

[sqwk]

@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 entryModule in tsconfig.json)

I also opened a stack overflow question about this here:
https://stackoverflow.com/questions/47440300/angular-multiple-entry-points-with-aot

One 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?

[miiihi]

@sqwk can you show your complete webpack config?

If you're constructing AngularCompilerPlugin and passing an entryModule option, you need to pass all modules there, as an array. This option has a precedence over entryModules specified in tsconfig.

[johnbendi]

@miiihi how do I use your fork for example? I mean how to add it as a dependency.

[sqwk]

@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

[miiihi]

@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...

[sqwk]

@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?

[linavigora]

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.

[matt-duch]

@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)

[artonge]

Hi, any news on implementing a solution ? @hansl ?
It seems like a working solution have been done by @miiihi, could it be merged ?

[artonge]

While this get fixed, I published a npm package with some modifications to handle multiple entry modules: @artonge/webpack feel free to use it.
You only have to replace @ngtools/webpack by @artonge/webpack in your webpack config and change entryModule: "your module" by entryModules: ["your module A", "your module B"]

[johnbendi]

@artonge I looked at your codebase and couldn't see any pointers to the changes you made. Do you mind pointing to it?

[artonge]

It's on the feature/multiple_entryModule_support branch. It should be the default one now.

[pshurygin]

I need this functionality for my project too. Is there any plans to implement this or merge proposed changes?

[artonge]

@pshurygin
Short answer: they won't merge changes, but the feature will come with a future release
See: angular/devkit#875

[Rush]

@artonge Could you update your repo/npm package to the latest upstream version?

[artonge]

@Rush I won't do it for now has it is not a necessity for us. But feel free to make a pull request.
I will probably consider upgrading the repo when we will upgrade our version of angular. But I think my workaround is not necessary with angular 7...

[Rush]

@artonge Interesting, could you point me in the right direction on how to make multi entryModule to work with Angular 7? I am pretty sure I tried upgrading to all latest packages and multi entryModule was not working for me.

[artonge]

I didn't get my hands on the latest angular version so I cannot guide you, sorry.

[Rush]

@artonge I rebased your patch on top of angular/angular-cli@master

Package published to:
@rush/webpack - https://www.npmjs.com/package/@rush/webpack

To use:

"@rush/webpack": "7.1.0-rc.0",

Available on Github
https://github.com/Rush/angular-cli

Thanks for your original work!

[mgechev]

Looks like #12107 captures this card. If I'm missing something, please open a new issue and link to this one. Thanks!

[dalopezarco]

Hello,

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!!

[angular-automatic-lock-bot]

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.}