Question

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

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

e.g。将环境中的值导出到js / json文件输出到assets文件夹，以便在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：

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

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

由于

Answer 1

我们在我们的案例中所做的实际上是在config.json文件夹中配置了config.[env-name].json和app/config文件。使用浏览器project assets

在角度引导之前获取config.json文件

在我们的构建服务器上，我们只是根据环境构建将config.json的内容替换为config.staging.json或config.prod.json。我们还在引导程序中创建了AppSettings类。这是它的样子：

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。

同时查看此问题 - Fetch API
- https://github.com/angular/angular-cli/issues/7506

Angular 4为每个环境创建资产/文件？

1 个答案: