Как динамически изменять статические урлы в Angular-приложении в каждом компоненте

У меня есть приложение Angular, которое я использую вместе с приложением Django. В Django у нас есть что-то вроде этого

<img src="{% static 'folder/file.png' %}" />

где мы можем динамически изменять статические урлы в зависимости от окружения. (Например, я могу иметь статические файлы, указывающие на мою локальную машину, или я могу развернуть их в AWS S3, изменив их в одном месте приложения, они изменятся везде)

Как я могу реализовать нечто подобное в Angular, где я могу изменять static_url динамически в зависимости от окружения. Я бы хотел, чтобы это работало для всех компонентов моего приложения.

Пример:

При использовании ng serve это может быть <img src="/assets/file.png" />

Но при использовании ng build это будет <img src="https://s3_bucket_url/assets/file.png" />

Вы можете использовать файлы окружения, и у вас может быть несколько окружений, таких как prod, dev, local и т.д.

// In environment.ts
export const environment = {
  production: false,
  staticFileUrl: '/assets/'
};

// In environment.prod.ts
export const environment = {
  production: true,
  staticFileUrl: 'https://s3_bucket_url/assets/'
};

// In environment.local.ts
export const environment = {
  production: true,
  staticFileUrl: '/assets/'
};

После этого вы можете работать с этой средой в своем компоненте

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent {
  imageUrl: string;

  constructor() {
    this.imageUrl = `${environment.staticFileUrl}file.png`;
  }
}

И работайте с this.imageUrl внутри HTML

<img [src]="imageUrl" />

В файле package.json можно задать пользовательские сценарии, которые могут собираться в определенном окружении.

"build:prod": "ng build --configuration production",
"build:dev": "ng build --configuration development",
"build:local": "ng build --configuration local",

А в файле angular.json,

добавьте соответствующую конфигурацию.

"configurations": {
  "production": {},
  "development": {},
  "local": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.local.ts"
      }
    ]
  }
}

Также есть возможность иметь только один файл окружения, который после сборки и развертывания на сервере может потребоваться изменить в некоторых случаях.

В таком случае я рекомендую добавить в активы config.json, который должен иметь точно такую же структуру, как и окружение, а затем использовать сервис, например: config-service.ts

Этот метод предполагает асинхронную загрузку файла config.json и замену содержимого среды этой конфигурацией. Если вы ищете способ работы с конфигурацией таким образом, я мог бы расширить свой ответ, но он и так излишне длинный.

Вернуться на верх