Question

我有一个使用webpack编译并使用多个入口点的角度应用程序：

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

使用[name]（类似于webpack的output）不起作用（参见上文）。有没有办法以另一种方式实现同样的目标？

Answer 1

请勿指定entryModule。

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

...

Answer 2

如果您使用的是webpack 4，则不应使用commonsChunk插件，而应使用Optimize.splitChunks。在AOT上可以正常使用。

Answer 3

不幸的是，使用 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'),
    })

AOT角度多个入口点

3 个答案: