Angular 4为每个环境创建资产/文件？ [英] Angular 4 create assets / files per environment?

问题描述

我们在angular应用程序中使用环境变量来读取设置等，但有没有办法在构建时生成资源/文件？

We use environment variables within our angular app to read settings etc but is there a way to generate assets/files on build?

基本上我们想要创建assets文件夹中的'auth / settings.js'文件，包含客户端ID和apiUrl，每个环境都是唯一的。这些将在index.html中使用（因此在angular app bootstrap之外）

Basically we'd like to create an 'auth/settings.js' file in the assets folder containing client id's and apiUrl's unique to each environment. These will be used in the index.html (so outside of the angular app bootstrap )

例如。将环境中的值导出到js / json文件输出到assets文件夹，以便在index.html中读取它们

e.g. the values in the environment.ts exported into a js / json file output to the assets folder so they can be read in index.html

export const environment = {
production: false,
title: 'default',
clientId: 'xxxx-xxxx-xxxx-xxxx-xxxx',
clientUrl: 'https://localhost:4200/app',
apiUrl: 'https://localhost/api'

};

我读过你可以使用mulitapps：

I have read that you can use mulitapps:

https://github.com/angular/angular-cli / wiki / stories-multiple-apps

这可能有用，但看起来像很多复制和粘贴，我们会有很多版本的build - 我不确定你是否可以声明一次常用设置并只是扩展额外的app设置（继承）？

This may work but looks like a lot of copy and pasting and we'll have quite a few versions of the build - I'm not sure if you can declare the common settings once and just extend the extra app settings (inheritance)?

谢谢

推荐答案

我们在我们的案例中做的实际上是 config.json 和 config。[env-name] .json 在<$ href =https：// github中配置的 app / config 文件夹中的文件。 com / angular / angular-cli / blob / master / docs / documentation / stories / asset-configuration.mdrel =nofollow noreferrer>项目资产。使用浏览器 config.json 文件/ Fetch_APIrel =nofollow noreferrer>获取API

What we are doing in our case is actually having an config.json and config.[env-name].json files in app/config folder that configured in project assets. The config.json file is getting fetched before angular bootstrap using browser Fetch API

在我们的构建服务器上，我们只是替换 config的内容。 json 与 config.staging.json 或 config.prod.json 基于环境构建。我们还有在引导程序中创建的 AppSettings 类。以下是它的外观：

On our build server we are just replacing the content of config.json withconfig.staging.json or config.prod.json based on environment build. Also we have AppSettings class that gets created on bootstrap. Here is how it is looks like:

fetch(configUrl, { method: 'get' })
.then((response) => {
  response.json()
    .then((data: any) => {
      if (environment.production) {
        enableProdMode();
      };
      platformBrowserDynamic([{ provide: AppSettings, useValue: new AppSettings(data.config) }]).bootstrapModule(AppModule);
    });
});

UPDATE ：
如果您需要坚持一些基于值的在你的env进入 index.html 你可能需要考虑在你的构建服务器上这样做。您可以使用字符串替换这些值，或者您可以使用 index。[env-name] .thml 文件，这样您就可以了根据环境构建覆盖 index.html 。

UPDATE: If you need to stick some values based on your env in to index.html you might need to consider doing that on your build server. You can rather string replace the values or you can have index.[env-name].thml files so you just overwrite the index.html based on environment build.

同时查看此问题

- https://github.com/angular/angular-cli/issues/7506

- https://github.com/angular/ angular-cli / issues / 3855

这篇关于Angular 4为每个环境创建资产/文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！