（Angular 2+；）构建后如何获取部署url？

我需要知道构建时信息（

ng build——此信息

或来自

angular.json

），例如运行时的

deploy\u url

或

base\u href

对于

base href

，我可以读取

标记的

href

属性，但是

部署url

没有其他选择

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

---

我不想在运行时更改生成配置，只想读取和打印。如果您的生成配置存储在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"}'

让fs=require（“fs”）；
设angularJson=require（“../angular.json”）；
让buildConfig={
baseHref:angularJson.projects..architect.build.options.baseHref，
deployUrl:angularJson.projects..architect.build.options.deployUrl，
};
fs.writeFile(
“/src/assets/buildConfig.json”，
stringify（buildConfig），
{标志：'}，
错误=>{
如果（错误）{
控制台日志（err）；
}
}
);
//示例输出=>'{“baseHref”：“/app”，“部署URL”：”https://example.com"}'

在这种情况下，此脚本存储在/scripts中，如果将其存储在其他文件夹中，则可能需要更新相对路径。还要记住包含正确的项目名称。您可以在常规构建步骤之前包含此脚本，方法是在package.json中更新构建脚本，如下所示：

“build”：“node./scripts/extractBuildConfig.js&&ng build”

尽管您只想获取web应用程序实际部署的实际位置，但获取

document.location

（或其属性之一）、

document.baseURI

、

document.domain

和

document.getElementsByTagName（“base”）[0]的值可能要容易得多

综上所述，如果您在Angular项目中正确设置了base href，那么文件中的所有相对路径都应该自动指向正确的位置，因此我不确定您需要它做什么。
我也遇到了这个问题，我需要
部署URL
传递到我的
环境中。ts
（和
environment.prod.ts
）文件。在
deployUrl
处于动态状态时，我的用例略有不同
构建时间。我的用例：


资产（json、json、css、html等）由我的cdn托管：
https://{cdn}/my-app/{version}/{buildNumber}/..
应用程序部署在我的网站：
https://app.example.com/

注意：所谓“已部署”，我的意思是从CDN url中提取我的
index.html
文件，这使我能够很好地控制部署哪个版本和版本号



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

需要设置自定义
webpack.config.js
build配置。您可以按照下面的方法进行设置


在
package.json中获取我的构建脚本设置：


“build:prod”：“ng build--prod”，


在服务器上的构建脚本（在我的例子中是Jenkins）中，我确保将动态
deployUrl
传递给npm脚本

npmci&&npm运行构建：prod--deployUrl=$CDN\u URL&&npm测试


请注意，
$CDN\uURL
我在构建过程中动态生成（它与上面列出的CDN模式匹配）


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

declare var\uuuu CDN\uu URL\uuuuu:string；
导出常量环境={
制作:对,，
部署URL:\uu CDN\u URL__
};


使用my
webpack.config.js
将
\uuuuu CDN\u URL\uuuu
变量添加到webpack的全局范围。使其在
环境.ts
中可用

const-yargs=require（'yargs/yargs'））
const webpack=require（'webpack'）；
/*解析出从步骤2传递到我们的“npm运行build:prod”中的“deployUrl”选项*/
常量argv={…yargs（process.argv.argv}；
/*此配置与Angular的网页包配置合并*/
module.exports={
插件：[
新的webpack.DefinePlugin({
__CDN_URL_;：JSON.stringify（argv.deployUrl | |“”）//这将添加此变量
})
]
};


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


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

我对我们所有的资产都使用这个，但最值得注意的是加载我的翻译
.json
文件。例如：

//app.module.ts
从“@angular/core”导入{NgModule}；
从'@angular/common/http'导入{HttpClient}；
从'@ngx translate/core'导入{TranslateModule，TranslateLoader}；
从'@ngx translate/http loader'导入{TranslateHttpLoader}；
从“./app.component”导入{AppComponent}；
从“../environments/environment”导入{environment}；
@NGD模块({
声明：[
应用组件
],
进口：[
//其他进口
TranslateModule.forRoot({
加载器：{
提供：TranslateLoader，
使用工厂：HttpLoaderFactory，
deps:[HttpClient]
}
}),
],
引导：[AppComponent]
})
导出类AppModule{}
导出函数HttpLoaderFactory（http:HttpClient）{
//这确保我从cdn url加载翻译文件
返回新的TranslateHttpLoader（http，`${environment.deployUrl}i18n/`，'.json'）；
}

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