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

Question

概述

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

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

问题

如何仅针对构建过程中选择的语言有条件地导入单个翻译文件？

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

解决方案草图

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

实际上，上面的代码可以在 Angular 6/Webpack 中运行（唯一需要的就是compilerOptions.module: 'ESNext'在 中进行设置tsconfig.app.json），但不是我想要的方式。它不是在构建时解析导入并将翻译文件与其余代码捆绑在一起，而是为所有翻译创建一个单独的文件（块），然后在运行时根据需要加载其中一个文件，具体取决于JavaScriptlang变量。

那么如何使导入在构建时而不是运行时得到解决呢？另外，在构建期间如何设置lang变量，因为我无权访问 Webpack 配置（它隐藏在 Angular CLI 中）

单独使用 Webpack

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

Answer 1

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

现在可以使用fileReplacements. angular.json configurations据我所知，它应该与资产文件一起使用，所以.json应该可以工作。它是最近才添加的，但是您可以查找问题/功能详细信息

如果成功请告诉我们！

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