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