我不想在运行时更改构建配置，而只想读取和打印。

Question

我需要在运行时了解构建时间信息（ng build --this_information或angular.json），例如deploy_url或base_href。

对于base_href，我可以改为读取href标签的<base>属性，但是deploy_url没有其他选择。

有人可以给我一种“角度方式”来在运行时读取构建配置吗？

我不想在运行时更改构建配置，而只想读取和打印。

Answer 1

如果您的构建配置存储在angular.json中，则可以使用nodeJS脚本将与您相关的位复制到“ src / assets /”文件夹中的json文件中：

let fs = require("fs");
let angularJson = require("../angular.json");

let buildConfig = {
  baseHref: angularJson.projects.<projectname>.architect.build.options.baseHref,
  deployUrl: angularJson.projects.<projectname>.architect.build.options.deployUrl,
};

fs.writeFile(
  "./src/assets/buildConfig.json",
  JSON.stringify(buildConfig),
  {flag: ""},
  err => {
    if (err) {
      console.log(err);
    }
  }
);

// example output=> '{"baseHref": "/app", "deployUrl": "https://example.com"}'

在这种情况下，此脚本存储在/ scripts中，如果将其存储在其他文件夹中，则可能需要更新相对路径。还请记住包括正确的项目名称。您可以通过以下方式在package.json中更新构建脚本，从而在常规构建步骤之前包含此脚本：
"build": "node ./scripts/extractBuildConfig.js && ng build"

尽管仅想获取实际部署Web应用程序的实际位置，但获取document.location（或其属性之一）document.baseURI的值可能要容易得多， document.domain和document.getElementsByTagName("base")[0].attributes["href"]。

所有这些，如果您在Angular项目中正确设置了基本href，则文件中的所有相对路径都应自动指向正确的位置，因此我不确定您需要的是什么。< / p>

Answer 2

我也遇到了这个问题，我需要在构建期间将 deployUrl 传递到我的 environment.ts（和 environment.prod.ts）文件中。我的用例略有不同，其中 deployUrl 是动态的构建时间。我的用例：

资产（js、json、css、html 等）从我的 CDN 托管：https://{cdn}/my-app/{version}/{buildNumber}/...
应用已部署在我的网站上：https://app.example.com/
- 注意：“已部署”是指我从 CDN 网址中提取我的 index.html 文件 - 让我可以很好地控制部署的版本和内部版本号。

由于我的 CDN url 随每次构建而变化，因此我无法使用从 angular.json 复制静态配置的公认答案。所以我的解决方案需要几个步骤，但对我很有用：

需要设置自定义 webpack.config.js 构建配置。您可以按照 Net Basal's article 了解如何操作。
在 package.json 中设置我的构建脚本：
- "build:prod": "ng build --prod",
在我在服务器上的构建脚本（在我的例子中是 Jenkins）中，我确保将动态 deployUrl 传递给 npm 脚本。
```
npm ci && npm run build:prod -- --deployUrl=$CDN_URL && npm test
```
- 请注意，$CDN_URL 我在构建过程中动态生成（它与我上面列出的 CDN 模式匹配）

在我的 environment.ts 文件中添加一个 webpack 稍后将替换的静态字符串：

declare var __CDN_URL__: string;

export const environment = {
  production: true,
  deployUrl: __CDN_URL__
};

使用我的 webpack.config.js 将 __CDN_URL__ 变量添加到 webpack 的全局范围。在 environment.ts

中提供

const yargs = require('yargs/yargs')
const webpack = require('webpack');

/* parse out the `deployUrl` option passed into our `npm run build:prod` from step #2 */
const argv = { ...yargs(process.argv).argv };

/* this config gets merged with Angular's webpack config */
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      __CDN_URL__: JSON.stringify(argv.deployUrl || '') // this will add this variable
    })
  ]
};

注意：我使用 yargs 来解析 process.argv 选项，但您可以使用任何东西（甚至可以自己做）。
wepack.DefinePlugin 的文档有点缺乏，但它本质上创建了一个您定义的变量。

现在您可以通过您的环境配置访问您的动态 deployUrl。这对我的用例非常有用。

我将它用于我们所有的资产，但最值得注意的是加载我的翻译 .json 文件。示例：

// app.module.ts
import { NgModule } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

import { AppComponent } from './app.component';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // other imports
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

export function HttpLoaderFactory (http: HttpClient) {
  // this ensures I load my translation files from my cdn url
  return new TranslateHttpLoader(http, `${environment.deployUrl}i18n/`, '.json');
}

希望这对某人有所帮助。干杯！

（Angular 2+）构建后如何获取deploy-url？

我不想在运行时更改构建配置，而只想读取和打印。

2 个答案: