angular 構建可以動態掛載的配置服務

Intro

在 angular 中可以指定 environment 來區分不同環境下的配置，然而 environment 中的配置會在打包時是固定的，想要像掛載 asp.net core 里的 appsettings.json 的配置文件一樣掛載 environment 是做不到的，想要讀取系統的環境變量也是行不通的。

有時候希望能夠動態指定一些配置，運行 docker 容器的時候掛載一個配置文件來實現動態配置

實現方案

通過一個 config.js 的配置文件，將配置信息寫入 window 對象的屬性中，配置信息從 window 對象中讀取，

這樣就可以動態掛載配置文件了。

實現細節

實現 ConfigService：

import { environment } from "../../environments/environment"; import { Injectable } from '@angular/core'; @Injectable({providedIn: 'root' }) export class ConfigService {public GetApiBaseUrl(): string {if (window["__env"] && window["__env"]["ApiBaseUrl"]) { return <string>window["__env"]["ApiBaseUrl"];}return environment.apiBaseUrl;} }

config.js 示例：

var env = {ApiBaseUrl: "https://reservation.weihanli.xyz" }; window["__env"]= env;

在 index.html 中引入 config.js 文件

<script src="assets/config.js"></script>

使用 ConfigService 示例：

import { ConfigService } from './ConfigService'; export class BaseService<TModel>{protected readonly apiBaseUrl;constructor(config: ConfigService){this.apiBaseUrl = config.GetApiBaseUrl();} }

Docker 掛載

docker run -d -p 9000:80 --name=reservation-client -v $(pwd)/assets/config.js:/usr/share/nginx/html/assets/config.js weihanli/reservation-client:latest # 掛載配置文件

sample config.js:

var env = {ApiBaseUrl: "https://reservation.weihanli.top" }; window["__env"]= env;

容器啟動成功之后，訪問 http://localhost:9000 即可，監控 HTTP 請求

可以看到實際請求的地址已經變成了掛載的配置文件里的地址了

Reference

• https://github.com/WeihanLi/ActivityReservation/tree/dev/ActivityReservation.Clients/ReservationClient

• https://reservation-client.weihanli.xyz/

總結

以上是生活随笔為你收集整理的angular 构建可以动态挂载的配置服务的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。