使用 AOT 的 Angular 多入口点

Posted 2023-02-19

【中文标题】使用 AOT 的 Angular 多入口点

【英文标题】：Angular Multiple Entry Points with AOT

【发布时间】：2018-05-06 12:32:18

【问题描述】：

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

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

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

使用@ngtools/webpack我只能aotify一个应用程序。有没有办法为这两个应用程序执行此操作？

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

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

【问题讨论】：

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

【参考方案1】：

不要指定entryModule。

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

...

【参考方案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'),
    )

【参考方案3】：

如果你使用 webpack 4，你不应该使用 commonsChunk 插件，你应该使用 Optimize.splitChunks。它适用于 AOT。