Angular Multiple Entry Points with AOT

user_2182142 0
Viewed 1309

I have an angular app that is compiled with webpack and uses multiple entry points:

    entry: {
        'app1': helpers.root('src', 'app1', 'main.ts'),
        'app2': helpers.root('src', 'app2', 'main.ts')
    }

I use the CommonsChunkPlugin to merge vendor files between these apps, which works great. However, I would now also like to use AOT compilation.

Using @ngtools/webpack I can only aotify one app. Is there a way to do this for both apps?

    new ngToolsWebpack.AngularCompilerPlugin({
        tsConfigPath: helpers.root('tsconfig.json'),
        entryModule: helpers.root('src', '[name]', 'app', 'app.module#AppModule'),
    }),

Using [name] (similar to webpack's output) does not work (see above). Is there a way to achieve the same thing another way?

angular webpack
3 Answers

Do not specify entryModule.

...
            plugins: [
            new AngularCompilerPlugin({
                tsConfigPath: ./tsconfig-aot.json,
            }),
    ]

...
user_66131710

Unfortunately, with Aot compilation, it does not allow you to build multiple apps by using multiple entryModule. If you want to perform AoT compilation then you will need to split the app1, app2 over to two webpack configurations. Each config will have the following:

app1.config.js:
     new ngToolsWebpack.AngularCompilerPlugin({
        tsConfigPath: helpers.root('tsconfig.json'),
        entryModule: helpers.root('src', '[name]', 'app', 'app1.module#AppModule'),
    }),

app2.config.js:
    new ngToolsWebpack.AngularCompilerPlugin({
        tsConfigPath: helpers.root('tsconfig.json'),
        entryModule: helpers.root('src', '[name]', 'app', 'app2.module#AppModule'),
    })
user_50348400

If you're using webpack 4, you shouldn't be using the commonsChunk plugin, you should use Optimize.splitChunks. It works fine with AOT.

user_106009910
Related