如何在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

让我们知道是否可行！

P.S.如果不想使angular.json配置复杂化，则可以创建.js节点脚本，并在进行构建之前运行它，将语言作为参数进行传递，并在之前替换相关的.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屋！