Блог

У меня есть проект angular9, мне нужно развернуть его на сервере, у него есть URL-адрес rest api, который в настоящее время я сохраняю в constant.ts файле, но после того, как ng build --prod все файлы будут преобразованы в другой формат.

 export const address = 'http://10.164.64.93:5200/api/';
  

Я хочу знать, как лучше всего настроить этот путь rest api даже после его развертывания на сервере? Я не хочу снова создавать свое решение, но я должен иметь возможность изменить свой URL-адрес rest или любого пользователя URL-адреса изображения в моем приложении.

В настоящее время я создаю свой проект каждый раз, если происходит какое-либо изменение пути для изображения, используемого в приложении или rest api. Я хочу избежать этого, и мне нужен какой-нибудь конфигурационный файл, в котором я могу указать этот путь. Любой ввод будет полезен.

Angular CLI предлагает функцию среды, которая позволяет запускать сборки, предназначенные для определенных сред. Когда приложение создается для производственного режима, файл environments / environment.ts заменяется файлом environments / environment.prod.ts. Следовательно, если вы ссылаетесь на настройки из файла environment.ts в своем коде, вам не нужно указывать какое-либо условие if или URL-адрес для создания жесткого кода.

 // environment.ts
  export const environment = {
    production: false;
    address : 'http://10.164.64.93:5200/api/';// local url
};
 ----------------------------
 // environment.prod.ts
export const environment = {
  production: true,
  address : 'http://10.164.64.93:5200/api/';// prod url here
};
  

и использовать его в компоненте следующим образом

 import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';import { Component } 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'multiple-env-demo';
  environmentUrl = 'Debug api';
  constructor() {
    this.environmentUrl = environment.address;
  }
}
  

ПРИМЕЧАНИЕ: После сборки мы можем найти файл сценария main.bundle, в котором вы найдете и измените переменные среды.
в main.bundle.js файле :

 var environment = {
 address : 'http://10.164.64.93:5200/api/',
};
  

Похоже, вы ищете RunTime конфигурацию, в которой Angular CLI (build) поддерживается настройка времени сборки.

Это часть "Build Once and Deploy Anywhere" парадигмы, которую Angular не поддерживает из коробки. Но этого легко достичь с помощью простого трюка.

Вот шаги для достижения этого:

1. Используйте папку assets, которая не изменится после сборки, и создайте в ней папку конфигурации.

  assets
    / config
         / env.json
         / config.dit.json
         / config.prod.json
  

env.json

 {
  "env": "dit"
}
  

config.local.json

 {
  "apiUrl": "http://10.164.64.93:5200/api/"
}
  

2. Таким образом, вы можете изменять значения, когда захотите.
   Например: если вы хотите запустить приложение на основе другого env, измените значение в env.json.
   Или, если вы хотите изменить API на лету, измените его соответствующим образом в config.XXX.json.

3. Создайте службу для использования вышеуказанных значений.

 await this._http.get('./assets/config/env.json').toPromise().then(res => {
   env = res.env;
});