(角2+)构建后如何获得部署-url？
我需要知道构建时信息(ng build --this_information或angular.json)，比如运行时的deploy_url或base_href。
对于base_href，我可以读取<base>标记的href属性，但是对于deploy_url没有其他选择。
有人能给我一个“角度的方式”来读取运行时的构建配置吗？
我不想在运行时更改构建配置，而只想阅读和打印。
回答 2
Stack Overflow用户
发布于 2019-06-18 09: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，那么文件中的所有相关路径都应该自动指向正确的位置，所以我不知道您还需要它做什么。
Stack Overflow用户
发布于 2021-05-19 21: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');
}希望这能帮上忙。干杯!
https://stackoverflow.com/questions/56644859
复制相似问题
腾讯云开发者
