使用AOT实现Angular多入口点

Question

我有一个使用webpack编译且具有多个入口点的angular应用程序:

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

我使用CommonsChunkPlugin将供应商文件在这些应用程序之间进行合并，效果很好。但是，我现在也想使用AOT编译。

使用@ngtools/webpack，我只能通知一个应用程序。是否有办法同时为两个应用程序执行此操作？

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

使用类似 webpack 的 output 的 [name] 并不起作用（见上文）。有没有其他方法可以实现同样的效果？

- sqwk

---

我现在选择忽略CommonsChunksPlugin，而是选择AOT性能提升和文件大小减小。不确定是否有办法同时使用两者。 - sqwk

Answer 1

不要指定entryModule。

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

...

- lagrange-

Answer 2

很遗憾，使用Aot编译时，它不允许您通过使用多个entryModule来构建多个应用程序。如果您想执行AoT编译，则需要将app1、app2拆分为两个webpack配置。每个配置将具有以下内容：

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'),
    })

- Khoa Nguyen

Answer 3

如果您正在使用 webpack 4，则不应使用 commonsChunk 插件，而应该使用 Optimize.splitChunks。它可与 AOT 很好地配合使用。

- Tzannetos Philippakos