Angular-cli: @ngtools/webpack - Limited number of AotPlugin instances

[dbettini]

Hello there. I might be wrong, but it seems that, at the moment, @ngtools/webpack doesn' support multiple entry points. The way it was possible to have multiple Angular client apps built by the same webpack instance was, e.g. using awesome-webpack-loader, something like this:

const tsClientNames = ["studio", "learn"];
tsClientNames.forEach(name => webpackConfig.module.rules.push({
    test: /\.tsx?$/,
    include: path.join(require.resolve(`${name}-client`), ".."),
    use: [
        {
            loader: "awesome-typescript-loader",
            options: {
                configFileName: path.join(require.resolve(`${name}-client`), "../tsconfig.json")
            }
        },
        "angular-router-loader",
        "angular2-template-loader"
    ]
}));

As you can see, this config enables it to build two different angular apps (that are package dependencies of the main one that runs webpack), each containing its own tsconfig, typings etc., by scoping each loader instance using 'include' to its own directory.
However, @ngtools/webpack provides the AOT functionality through the AotPlugin, which throws the An @ngtools/webpack plugin already exist for this compilation. exception if you try creating more than one instance.

So my question is, why is the number of AotPlugin instances restricted? Is there another way to support multiple entry points? If not, are there to plans to support it, or an issue where it can be tracked (since all issues concerning the webpack loader are in the angular-cli repository, which makes it really hard to track)?

[ytkj]

In my opinion, webpack's multi-entries is essential feature; In typical large-scale enterprise system, Application must be devided into multiple SPA to supress memory usage in web-browser.

( Another solution, using single-SPA with lazy loading, is effective only in first-time loading, but in total memory usage.)

But this issue is labeled 'nice to have', not 'required'.
Is there alternative way to AOT-compile multiple SPA with webpack ?

( Using ngc cli directly before webpacking ? But we no longer use @ngtools/webpack in that case...)

Any idea ?

[tavelli]

@ytkj @filipesilva yea i agree. we went ahead with an adoption of ng2+ at our company with assumption this bug would be resolved by the time we got close to moving to production, now i'm getting a bit nervous! Are there any hacks or workarounds we can use until official support lands?

[ytkj]

@tavelli workaround I can come up with is quite primitive:

1. run ngc command as many times as the number of spa.
2. Then webpacking to the generated *.ngFactory intermediate codes.

To automate build process, step 1 should be done by a task-runner such as npm-script or Gulp.

[nathanmarks]

@tavelli have you found a hack or workaround?

[tavelli]

Nope :(
I've been using JIT compiler. With tree shaking and minification bundle isn't quite as huge as I thought it would be but I believe execution time still suffers vs AOT so its far from ideal.

On Jul 5, 2017, at 9:37 AM, Nathan [e-mail] wrote:

@tavelli have you found a hack or workaround?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[snewell92]

For a while I did this:

package.json snippet

    ...
    "prebuild:client-aot": "ngc -p public/src/prep-tsconfig.aot.json",
    "build:client-aot": "ngc -p public/src/tsconfig.aot.json && rollup -c rollup-config.js",
    ...

My prep-tsconfig.aot.json points to a prepare-ngc.main.ts, which imports all my main modules, just so the compiler can generate the right files, while my tsconfig.aot.json matches all my main page files with a regex in the include option of the tsconfig (pattern is "*-aot.ts").

In this way Webpack can be used in development with JIT, while pure ngc+rollup can be used for AOT building. Not the most ideal imo, since I'd rather just use one tool (webpack) and not have to jump into ngc directly - but it is a valid approach.

I'm investigating migrating to webpack, but perhaps I'll still need to do this if I have multiple entry point :
Are y'all getting this by using the angular cli? Or using webpack directly akin to what this guy is doing?

[ytkj]

related to #7954

[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"]