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?

基本上，我们想在资产文件夹中创建一个auth/settings.js"文件，其中包含每个环境唯一的客户端 ID 和 apiUrl.这些将在 index.html 中使用(因此在 angular 应用程序引导程序之外)

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 )

例如将 environment.ts 中的值导出到 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'

};

我读到您可以使用多应用程序:

I have read that you can use mulitapps:

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

这可能可行，但看起来像很多复制和粘贴，我们将有很多版本的构建 - 我不确定您是否可以声明一次通用设置并只扩展额外的应用程序设置(继承)?

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].项目资产.使用浏览器 Fetch 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);
    });
});

更新:如果您需要将一些基于您的环境的值粘贴到 index.html 中，您可能需要考虑在构建服务器上执行此操作.您可以使用 string replace 值，或者您可以使用 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屋！