javascript - 如何在 Angular 6 构建期间有条件地导入不同的文件？

Question

概览

我有 Angular CLI 构建的 Angular 6 应用程序。应用程序以多种语言编写。每种语言都有 JSON 文件，其中包含所有应用程序文本的翻译。文件名为 ${language}.json，例如en.json, es.json, pl.json.

我想在构建期间设置应用程序的语言 - 仅使用一种语言构建应用程序。为此，我需要导入一个翻译文件，该文件的选择取决于我要构建的语言。

问题

如何有条件地只为构建期间选择的语言导入单个翻译文件？

此外，我希望将翻译文件与应用程序的其余 JavaScript 捆绑在一起，而不是在运行时按需加载。

解决方案草图

const translations = import(`./translations/${lang}.json`);

实际上上面的代码在 Angular 6/Webpack 中工作(唯一需要做的是在 tsconfig.app.json 中设置 compilerOptions.module: 'ESNext')，但是不是我想要的方式。它不是在构建时解析导入并将翻译文件与其余代码捆绑在一起，而是为所有翻译创建一个单独的文件( block )，然后在运行时根据需要加载其中一个文件JavaScript lang 变量。

那么如何让导入在构建时而不是运行时解析呢？还有我在构建期间在哪里以及如何设置 lang 变量，因为我无权访问 Webpack 配置(它隐藏在 Angular CLI 中)

单独的 Webpack

当单独使用 Webpack 时，可以通过使用 NormalModuleReplacementPlugin 来实现。 .但是由于 Angular CLI 隐藏了所有 Webpack 配置，我不知道如何将它集成到 Angular 项目中。从 Angular CLI 中弹出 Webpack 配置是我最后的选择。

Answer 1

作为 CLI 6.1 版本的一部分，添加了一项功能，允许在构建期间替换 .ts 文件以外的文件。以前这用于 environment 和 environment.prod 文件

现在可以使用 angular.json configurations 的 fileReplacements 键设置其他文件。据我所知，它应该与 Assets 文件一起使用，所以 .json 应该可以工作。它是最近才添加的，但您可以找到问题/功能详细信息 look up

如果成功了请告诉我们!

附言如果您不想使 angular.json 配置复杂化，您可以创建一个 .js 节点脚本，并在构建之前运行它，将语言作为一个参数，并在构建 Angular 包之前替换相关的 .json 文件