如何在 Angular 6 中构建期间有条件地导入不同的文件? [英] How to conditionally import different files during build in Angular 6?

问题描述

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

I have Angular 6 app build by Angular CLI. Application is written in multiple languages. Each language has JSON file with translations of all the application texts. The filenames are ${language}.json, e.g. en.json, es.json, pl.json.

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

I'd like to set the language of the app during build - build the app only in one language. For that on build I need to import a single translation file, which is chosen depending on which language I'm building for.

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

How to conditionally import single translation file only for the language chosen during build?

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

In addition I'd like the translation file to be bundled together with the rest of my application's JavaScript, instead of being loaded on demand on run-time.

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

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

Actually the above code works in Angular 6/Webpack (the only thing needed is setting compilerOptions.module: 'ESNext' in tsconfig.app.json), but not in a way that I want. Instead of resolving the import during build time and bundling the translation file together with the rest of the code, it creates a separate files (chunks) for all translations, one of which is then loaded on demand during run-time depending on the value of JavaScript lang variable.

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

So how do I make the import to be resolved during build-time and not run-time? Also where and how do I set lang variable during build, as I don't have access to Webpack configuration (it's hidden inside Angular CLI)

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

When using Webpack alone, it's possible to implement this for example by using NormalModuleReplacementPlugin. But as Angular CLI hides all the Webpack configuration, I don't know how to integrate it into Angular project. Ejecting Webpack configuration from Angular CLI is the last resort for me.

推荐答案

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

As part of the CLI 6.1 release, a feature was added that allows files to be replaced during the build other than .ts files. Previously this was used for the environment and environment.prod files

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

Additional files can now be set with the fileReplacements key of the angular.json configurations. As far as I know, it should work with asset files, so .json should work. It's only been added recently, but there are issues/feature details that you can look up

让我们知道它是否有效！

Let us know if it works out!

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

P.S. If you don't want to complicate the angular.json configuration, you could create a .js node script, and run it before doing the build, passing in the language as a param, and replacing the relevant .json file in before building the Angular bundles

这篇关于如何在 Angular 6 中构建期间有条件地导入不同的文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！