问(角2+)构建后如何获得部署-url？
EN

Stack Overflow用户

提问于 2019-06-18 00:30:13

回答 2查看 1.8K关注 0票数 2

我需要知道构建时信息(ng build --this_information或angular.json)，比如运行时的deploy_url或base_href。

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

有人能给我一个“角度的方式”来读取运行时的构建配置吗？

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

angular

angular-cli

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-18 01:23:26

如果构建配置存储在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"]的值可能要容易得多。

尽管如此，如果您正确地在角项目中设置了基本的href，那么文件中的所有相关路径都应该自动指向正确的位置，所以我不知道您还需要它做什么。

票数 -1

Stack Overflow用户

发布于 2021-05-19 13:39:20

我也遇到了这个问题，在构建过程中，我需要deployUrl传递给我的environment.ts (和environment.prod.ts)文件。在构建时deployUrl是动态的，我的用例略有不同。我的用例：

资产(js、json、css、html等)托管在我的cdn：https://{cdn}/my-app/{version}/{buildNumber}/...中。
应用程序部署在我的网站：https://app.example.com/
- 注意:所谓“部署”，我的意思是从CDN url - gives me中删除我的- gives文件，它很好地控制了部署哪个版本和构建号。

因为我的CDN随每次构建而改变，所以我不能使用从angular.json复制静态配置的公认答案。因此，我的解决方案需要几个步骤，但对我来说效果很好：

需要设置自定义webpack.config.js构建配置。您可以跟踪网Basal的文章关于如何做到这一点。
在package.json中设置我的构建脚本

- `"build:prod": "ng build --prod",`

在服务器上的构建脚本(在我的示例中是Jenkins)中，我确保将动态deployUrl传递给npm脚本。 npm & npm运行构建:prod

- Note that `$CDN_URL` I dynamically generate during the build process (it matches the CDN pattern I listed above)

在我的environment.ts文件中添加一个静态字符串，webpack稍后将替换该字符串：声明var __CDN_URL__：string；export环境={ production: true，deployUrl：__CDN_URL__ }；
使用我的webpack.config.js将__CDN_URL__变量添加到webpack的全局范围。使其在environment.ts中可用 /*解析从步骤#2 */ const argv ={ ...yargs(process.argv).argv }传递到我们的npm run build:prod的deployUrl选项；/*这个配置将与角配置*/ module.exports ={ plugins:新的webpack.DefinePlugin({ __CDN_URL__：argv.deployUrl(argv.deployUrl)‘) //这将添加此变量}}合并；

- Note: I used [yargs](https://www.npmjs.com/package/yargs) to parse the `process.argv` options, but you could use anything (or even do it yourself).
- Docs for [wepack.DefinePlugin](https://webpack.js.org/plugins/define-plugin/) are kind of lacking, but it essentially creates a variable that you define.

现在，您可以通过环境配置访问动态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');
}