Блог

Я работаю над проектом angular 7, который должен быть запущен на разных серверах. Мне нужно прочитать URL сервера из файла среды и я не могу установить в качестве статической переменной.

Я попытался прочитать файл JSON, но как только я создаю проект, он копирует содержимое JSON в виде статического значения в main.js

Возможно ли динамически читать файл JSON после сборки проекта? Например, чтение из env.json, которое я могу поместить после сборки проекта

Я создал файл setting.json в папке assets, после ng build я перехожу к настройке.json измените внутренний URL.

 export class SettingService  {

  constructor(private http: HttpClient) {

  }

  public getJSON(file): Observable<any> {
      return this.http.get("./assets/configs/"   file   ".json");
  }
  public getSetting(){
      // use setting here
  }
}
  

В папке приложения я добавляю папку configs / setting.json

Содержимое в setting.json

 {
    "baseUrl": "http://localhost:52555"
}
  

В модуле приложения добавьте APP_INITIALIZER

  {
      provide: APP_INITIALIZER,
      useFactory: (setting: SettingService) => function() {return setting.getSetting()},
      deps: [SettingService],
      multi: true
    }
  

С помощью ответа Хьена Нгьена я сделал это:

Добавлен следующий сервис:

config.service.ts

 import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { HttpService } from './http.service';
import { ConstantService } from './constant.service';

@Injectable({
   providedIn: 'root'
})
export class ConfigService {
  constructor(
   private httpService: HttpService,
   private constantService: ConstantService
) { }

/*
 *  Load configuration from env.json
 */
loadConfig(): Observable<any> {
   let url = './assets/env.json';

   let requestObject = {
     API_URL: url,
     REQUEST_METHOD: this.constantService.REQUEST_METHOD_GET
   };

   return this.httpService.sendRequest(requestObject).pipe(map(this.extractData));
}

/*
*  Extract data from response
*/
private extractData(res: Response) {
   let body = res;
    return body || {};
}
}
  

http.service.ts

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

import { ConstantService } from './constant.service';

const httpOptions = {
  withCredentials: true,
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class HttpService {
  constructor(
    private httpClient: HttpClient,
    private constantService: ConstantService
  ) { }

  sendRequest(requestData) {
    if (requestData.REQUEST_METHOD == this.constantService.REQUEST_METHOD_GET) {
      return this.httpClient.get(url, httpOptions);
    } else if (requestData.REQUEST_METHOD ==     this.constantService.REQUEST_METHOD_POST) {
      return this.httpClient.post(url, requestData.BODY, httpOptions);
    } else if (requestData.REQUEST_METHOD == this.constantService.REQUEST_METHOD_PUT) {
      return this.httpClient.put(url, requestData.BODY, httpOptions);
    } else if (requestData.REQUEST_METHOD == this.constantService.REQUEST_METHOD_DELETE) {
      return this.httpClient.delete(url, httpOptions);
    }
  }
}
  

Далее, после новой сборки я добавил assets env.json, и я смог изменять и считывать значения из env.json.

Нет, я думаю, вам нужно поддерживать файл .json в вашем коде и динамически выбирать из него на основе вашего корневого URL. Также вы можете отправлять вызов серверу, возвращая base_url каждый раз, в зависимости от ip или домена, откуда исходит запрос.

 {
    'server-one': 'abc.com',
    'server-two': 'abc1.com',
}
  

Насколько я понимаю, вы хотите имитировать внутренние запросы с файлами JSON? Для меня лучший способ — использовать перехватчик, который перехватывает URL.

 @Injectable()
export class MockResponseInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // ignore "production" and requests to other ressources
        if (environment.production || !req.url.startsWith(environment.backendBaseUrl)) {
            return next.handle(req);
        }

        const modifiedUrl: string = this.mockUrl(req.url);
        const modifiedRequest = req.clone({ url: modifiedUrl });

        return next.handle(modifiedRequest);
    }

    mockUrl(url: string): string {
      // any kind of modification or replacement etc. goes here
      // you want to return the path to the JSON file here
    }
}