在Dockerized环境中应用Angular运行时配置( 二 ) _angular

| Promise | boolean | UrlTree {return this .config.loadAppConfig().pipe(map( () => true ),catchError( () => EMPTY));}}
..ts
import { Injectable } from '@angular/core' ;import { HttpClient, HttpHeaders } from '@angular/common/http' ;import { map } from 'rxjs/operators' ;import { Observable } from 'rxjs' ;@Injectable({ providedIn : 'root' })export class ConfigService{private _config: any = {};constructor (private http: HttpClient) {}get data(): any {return this ._config ? { ...this._config } : {};}loadAppConfig(): Observable {const headers = new HttpHeaders().set( 'Content-Type' , 'application/json; charset=utf-8' );return this .http.get( `/_ngx-rtconfig.json?cb= ${ new Date ().getTime()} ` , { headers }).pipe(map( data => { for ( const key in data) {if (data.hasOwnProperty(key)) {this ._config[key.replace( 'NGX_' , '' ).toLowerCase().split( '_' ).map( ( el, i ) => (i > 0 ? el.charAt( 0 ).toUpperCase() + el.slice( 1 ) : el)).join( '' )] = data[key];}}return this .data;}));}}
如果您仔细观察一下，我们将在方法上更进一步，也将要获取的json键的结构形式化。这是有充分理由的，这将是非常关键的一步。
通过为json键添加一个唯一的前缀，我们以后可以利用此键为来自各个环境的键动态分配值。对于本地开发，此设置非常简单，因为我们可以简单地将这些值直接放入.json文件中。
更进一步，将有角度的应用程序包装在容器中，我们需要根据容器环境调整.json 。因此，我们将shell脚本添加为-，在此期间，将（重新）生成具有当前环境值的.json 。
-.sh
#!/usr/bin/env shset -eujq -n env | grep -E '\{|\}|NGX_' | sed ':begin;$!N;s/,\n}/\n}/g;tbegin;P;D' > /usr/ share/nginx/html/_ngx-rtconfig.jsonexec "$@"
文件
FROM node: 12.6 .0 -buster-slim AS builderARG NODE_ENVENV NODE_ENV ${NODE_ENV}RUN mkdir -p /appWORKDIR /appCOPY package.json yarn.lock ./RUN yarn install --frozen-lockfileCOPY . .RUN yarn buildFROM nginx: 1.15 -alpineRUN apk update && apk add jqCOPY -- from =builder build/ /usr/ share/nginx/htmlCOPY ./ops/config/nginx-custom.conf /etc/nginx/conf.d/ default .confEXPOSE 80# generate dynamic json from envCOPY ./ops/config/docker-entrypoint.sh /ENTRYPOINT [ "/docker-entrypoint.sh" ]CMD [ "nginx" , "-g" , "daemon off;" ]
我们在这里使用了jq和一些基本的脚本，但是当然有很多方法可以实现相同的目的。这种方法确实允许我们在-和部署清单中将角度配置值指定为env变量。
-.yml
version: "3.5"services:ngx-app:container_name: ngx-appbuild:context: .dockerfile: Dockerfileenvironment:NGX_API_ENDPOINT: http: //localhost:3000ports:- '4200:80'
.yml
---apiVersion: extensions/v1beta1kind: Deploymentmetadata:name: {{ CI_PROJECT_NAME }}spec:replicas: 3revisionHistoryLimit: 3template:spec:containers:- name: {{ CI_PROJECT_NAME }}image: {{ CI_REGISTRY_IMAGE }}:{{ CI_COMMIT_SHA }}imagePullPolicy: Alwaysenv:- name: NGX_API_ENDPOINTvalue: https: //foo.com/api/ports:- name: httpcontainerPort: 80
最后，我们已经完成了建立一个灵活而一致的机制来动态管理不同情况下的角度配置/环境的工作。到目前为止，我们还没有意识到这种方法的任何缺点！
参考文献：
【在Dockerized环境中应用Angular运行时配置】From: