Angular 8 配置文件
<p>给Angular 8 client 添加 json 配置文件，用来存储：版本号，WebApi 地址等等。要求 json 文件必须在页面访问 webapi 前获得到，不然数据服务中无法获得配置的 WebApi 地址。</p><p> </p>
<p><strong>1. 创建配置文件</strong></p>
<p style="margin-left: 60px">你可以在 assets 目录下创建配置文件，也可以自己创建一个目录。这里我在 src 目录下创建了一个 config 目录，用来存放 开发和 发布两个环境下的配置文件</p>
<p style="margin-left: 60px"><img src="https://img2018.cnblogs.com/blog/392690/201912/392690-20191226143529064-866515999.png" alt=""></p>
<p> </p>
<p>文件内容如下：</p>
<p style="margin-left: 90px"><img src="https://img2018.cnblogs.com/blog/392690/201912/392690-20191226143559322-161963775.png" alt=""> <img src="https://img2018.cnblogs.com/blog/392690/201912/392690-20191226143643507-625083550.png" alt=""></p>
<p> </p>
<p> </p>
<p style="margin-left: 60px">development.json, 用来配置开发环境变量， production.json 用来配置发布环境变量</p>
<p> </p>
<p><strong>2. 创建一个config.service.ts 文件， 用来定义个config 模块 </strong></p>
<p>模块作用：</p>
<ul>
<li>根据当前运行环境，自动加载 developement.json 或者product.json 下的内容到一个 json 对象</li>
<li>将 config 配置成程序启动需要初始化的对象</li>
<li>提供 get 方法，访问配置文件对象的值 </li>
</ul>
<table style="height: 735px; width: 1449px" border="0">
<tbody>
<tr>
<td>
<div>
<div>import { Injectable, APP_INITIALIZER } from '@angular/core';</div>
<div>import { HttpClient } from '@angular/common/http';</div>
<div>import { Observable } from 'rxjs';</div>
<div>import { environment } from '../../environments/environment';</div>
<br><br>
<div>@Injectable()</div>
<div>export class ConfigService {</div>
<br>
<div> private _config: Object</div>
<div> private _env: string;</div>
<br>
<div> constructor(private http: HttpClient) { }</div>
<br>
<div> load() {</div>
<div> return new Promise((resolve, reject) => {</div>
<div> this._env = 'development';</div>
<div> if (environment.production)</div>
<div> this._env = 'production';</div>
<div> console.log(this._env)</div>
<div> this.http.get('./config/' + this._env + '.json')</div>
<div> .subscribe((data) => {</div>
<div> this._config = data;</div>
<div> resolve(true);</div>
<div> },</div>
<div> (error: any) => {</div>
<div> console.error(error);</div>
<div> return Observable.throw(error || 'Server error');</div>
<div> });</div>
<div> });</div>
<div> } </div>
<br>
<div> // Gets a value of specified property in the configuration file</div>
<div> get(key: any) {</div>
<div> return this._config;</div>
<div> }</div>
<div>}</div>
<br>
<div>export function ConfigFactory(config: ConfigService) {</div>
<div> return () => config.load();</div>
<div>}</div>
<br>
<div>export function init() {</div>
<div> return {</div>
<div> provide: APP_INITIALIZER,</div>
<div> useFactory: ConfigFactory,</div>
<div> deps: ,</div>
<div> multi: true</div>
<div> }</div>
<div>}</div>
<br>
<div>const ConfigModule = {</div>
<div> init: init</div>
<div>}</div>
<br>
<div>export { ConfigModule };</div>
</div>
</td>
</tr>
</tbody>
</table>
<p> </p>
<p> </p>
<p><strong>3. 在 app.module.ts 中，引用配置 config 模块</strong></p>
<div style="margin-left: 60px">import { ConfigModule, ConfigService } from './services/config.service';</div>
<p style="margin-left: 90px"> <img src="https://img2018.cnblogs.com/blog/392690/201912/392690-20191226144623046-2033285035.png" alt=""></p>
<p> </p>
<p><strong> 4. 在 数据服务中，获取配置</strong></p>
<p style="margin-left: 90px"><img src="https://img2018.cnblogs.com/blog/392690/201912/392690-20191226144803724-22687118.png" alt=""></p>
<p> </p>
<p> </p>
<p> </p>
<p><strong>注意：</strong></p>
<p>如果你跟我一样是在 assets 目录外创建的 配置文件或者目录，那么在运行时，你可能遇到找不到配置文件的问题。那是因为Angular 会自动把 assets 当做资源目录，而我们新创建的目录、文件并不会作为资源目录。</p>
<p>你需要在 angular.json 中将你自己创建的资源目录或文件指定一下：</p>
<p style="margin-left: 90px"><img src="https://img2018.cnblogs.com/blog/392690/201912/392690-20191226145216682-26573784.png" alt=""></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/crdanding/p/12097543.html
頁:
[1]