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