时间戳

首页 > 解决方案 > 如何从 Angular 4 中的 JSON 文件访问环境变量？

angular - 如何从 Angular 4 中的 JSON 文件访问环境变量？

问题描述

我有一个文件“appsettings.json”。它具有用于其他目的的配置。我想将“environment.ts”和“environment.prod.ts”中的变量放入该文件并访问内部环境文件。

如果我尝试导入/需要“appsettings.json”并使用值，它可以在开发模式下工作，但不能在启用 aot 的“--prod”下工作。--prod --aot=false 工作正常

抛出错误：错误中的错误遇到静态解析符号值。对本地（非导出）符号“json”的引用。考虑导出符号（原始 .ts 文件中的位置 3:5），解析符号 CONFIG

 "ExtraConf" : {
    "CDNPATH": "https://share-dev-cdn.test.net/",
    "ICONPATH":"skin/icons/",
    "APPLTITLE":"Title"
  },
  "Environments" : {
    "production": false,
    "appInsights": {
        "appkey":"0908776554"
    }
  },
  "EnvironmentsProd" : {
    "production": true,
     "appInsights": {
         "appkey":"55678900"
    }
  }


environment.ts
declare var require: any;

var json:any = require("../../appsettings.json");

export const environment = json.Environments;

标签： angulartypescriptwebpack

解决方案

您可以尝试这种方法：

1：配置加载器服务：

@Injectable({
  providedIn: 'root'
})
export class ConfigLoaderService {

  private config: Config;

  constructor(private http: HttpClient) {
    this.config = new Config();
  }

  public getConfigData(): Config {
    return this.config;
  }

  load(): Promise<any> {
    console.log(`getSettings:: before http.get call`);
    const promise = this.http.get('../assets/myconfig.json', HttpOptions)
      .toPromise()
      .then((settings: Config) => {
        this.config = settings;
        return settings;
      });

    return promise;
  }
}

这ConfigLoaderService将在应用启动时从 json 加载设置。

2：配置模型：

export class Config {
    [name: string]: any;
}

这是一个通用类，它将从 json 中加载任何内容作为键值对。

3：应用模块：

... Your imports ...
export function configProviderFactory(provider: ConfigLoaderService) {
  return () => provider.load();
}
@NgModule({
.... Your all imports , declaration...
providers: [
{ provide: APP_INITIALIZER, useFactory: configProviderFactory, deps: [ConfigLoaderService], multi: true },


.... Your other providers ....
  ],

那么这里发生了什么，您向 Angular 声明，当应用程序初始化时，它将首先调用 configLoaderService 并从资产加载配置 json 文件，并在配置类中进行设置，该类可以通过应用程序访问。现在您可以通过它访问模型。

export class MyComponent implements OnInit {

  private config: Config;

  constructor(
    configLoader: ConfigLoaderService,

  ) {

    this.config = configLoader.getConfigData();

  }

  ngOnInit() {
    console.log(this.config['MY_URL']);
    console.log(this.config.MY_URL);
  }

注意：这将在 NG5+ 中工作，但对于 Ng4，您需要更改 httpClient 导入。

推荐阅读