Angular 5中使用一些配置文件的完全外部常量 [英] Completely external constants in Angular 5 using some configuration file

问题描述

我有一个带有服务器 URL 的 app-const.ts:

导出类 AppConst {公共静态服务器路径 = 'http://10.0.0.126:3031';}

这是 Spring Boot REST 服务器的 URL 路径.在这种情况下，我将这个常量保存在一个地方并在所有模块中使用它.但是 在构建之后，如果服务器 URL 发生变化，我无法在不重新构建整个项目的情况下更改此常量.

有没有办法将这个常量保存在主机上的某个外部配置文件中(在 index.html 旁边)，这样我就可以在不重建项目的情况下更改它(例如 application.Spring Boot 中的 properties 文件，谁知道)?

或者如何通过更改服务器 URL 轻松管理这种情况?

加法.澄清情况:我将我的 Angular 网络客户端放在主机上.然后这个客户端开始与可以放置在某个地方(例如在云中)的 Spring Boot REST 服务器进行通信.此 Spring Boot 服务器有一个服务器 URL (serverPath)，有时可能会更改.现在，如果服务器 URL 发生更改，我需要更改此 serverPath 常量并仅由于此常量而重建整个 Angular 项目.

解决方案

我有以下解决方案.它使用外部 JSON 配置文件.

所以首先在 assets/data 文件夹中创建一个 JSON.

config.json:

<块引用>

{"serverPath": "http://10.0.0.126:3031"}

然后读取并解析它.

config.service.ts:

import { Injectable } from '@angular/core';从@angular/common/http"导入 { HttpClient }；从 'rxjs/Observable' 导入 { Observable }；@Injectable()导出类 ConfigService {私有 configUrl = "assets/data/config.json";构造函数(私有http:HttpClient){}public getJSON(): Observable<any>{返回 this.http.get(this.configUrl)}公共 getSavedServerPath(){return localStorage.getItem('serverPath');}}

<块引用>

在 app.module.ts 中你需要导入 HttpClientModule 以便这个有效.

然后你可以在登录组件中将 serverPath 保存在 LocalStorage 中.

login.component.ts:

 构造函数(public loginService:LoginService, public configService:ConfigService, private router: Router) {}ngOnInit() {this.configService.getJSON().subscribe(data => {localStorage.setItem("serverPath", data["serverPath"]);});...}

之后，您可以在所有其他服务中访问 serverPath.

server.service.ts:

从'@angular/core'导入{Injectable}；从'@angular/http'导入{Headers, Http, Response}；导入'rxjs/Rx'；从 'rxjs/Observable' 导入 {Observable}；从'../services/config.service'导入{ConfigService}；@Injectable()导出类 ServerService {私人服务器路径:字符串；构造函数(公共 configService:ConfigService，私有 http:Http){this.serverPath = this.configService.getSavedServerPath();}...}

构建后，您将在 dist 文件夹中看到 assets/data/config.json 文件.将您的所有 dist 文件夹复制到您的主机和所有工作.

I have an app-const.ts with a server URL:

export class AppConst {
  public static serverPath = 'http://10.0.0.126:3031';
}

This is an URL path to Spring Boot REST server. At this case I hold this constant in one place and use it in all modules. However after a build I don't have a way to change this constant without re-building the whole project again if the server URL is changed.

Is there any way to hold this constant in some external configuration file on a hosting (next to index.html) so that I can change it without rebuilding the project (like application.properties file in Spring Boot, who knows)?

Or how I can easily manage the situation with changing server URL?

Addition. To clear situation: I place my Angular web-client on a hosting. Then this client starts communicate with a Spring Boot REST server that can be placed somewhere (in a cloud for example). This Spring Boot server has a server URL (serverPath) that might be changed sometimes. Now if server URL change I need to change this serverPath constant and rebuild the whole Angular project only due to this constant.

解决方案

I have got a following solution. It uses external JSON configuration file.

So first create a JSON in assets/data folder.

config.json:

{ "serverPath": "http://10.0.0.126:3031" }

Then read and parse it.

config.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs/Observable';

@Injectable()
export class ConfigService {

  private configUrl = "assets/data/config.json";

  constructor(private http: HttpClient) {
  }

  public getJSON(): Observable<any> {
    return this.http.get(this.configUrl)
  }

  public getSavedServerPath(){
    return localStorage.getItem('serverPath');
  }
}

In app.module.ts you need to import HttpClientModule so that this works.

Then you can save serverPath in LocalStorage in login component for example.

login.component.ts:

  constructor(public loginService:LoginService, public configService:ConfigService, private router: Router) {
  }

  ngOnInit() {

    this.configService.getJSON().subscribe(data => {
      localStorage.setItem("serverPath", data["serverPath"]);
    });

    ...
  }

After that you can access serverPath in all your other services.

server.service.ts:

import {Injectable } from '@angular/core';
import {Headers, Http, Response} from '@angular/http';
import 'rxjs/Rx';
import {Observable} from 'rxjs/Observable';
import {ConfigService} from '../services/config.service';

@Injectable()
export class ServerService {

  private serverPath:string;

  constructor(public configService: ConfigService, private http:Http) {
    this.serverPath = this.configService.getSavedServerPath();
  }
  ...
}

After a build you will see assets/data/config.json file in your dist folder. Copy all your dist folder to your hosting and all works.

这篇关于Angular 5中使用一些配置文件的完全外部常量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！