Изменить путь к стилю в серверной среде

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

Этот скрипт может генерировать необходимые окружения, и вы можете запустить его в процессе сборки.

Ниже приведены шаги для достижения этой цели.

1. Создайте generate-environment.js, скрипт

const { writeFile } = require('fs');

require('dotenv').config();

const isProduction = process.env['DEPLOYMENT_ENV'] === 'prod';
const assetBaseUrl = isProduction ? '/server' : '';

const environmentFileContent = `
export const environment = {
   production: ${isProduction},
   assetBaseUrl: "${assetBaseUrl}"
};
`;

writeFile('./src/environments/environment.ts', environmentFileContent, function (err) {
    if (err) {
        console.info(err);
    } else {
        console.info('Environment file created successfully.');
    }
});

2. Обновите свой компонент Angular и убедитесь, что ваши компоненты Angular используют обновленную среду.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  backgroundImageUrl: string;

  ngOnInit() {
    this.backgroundImageUrl = `${environment.assetBaseUrl}/assets/banner.png`;
  }
}

3. Как будет выглядеть ваш html-файл

<div [ngStyle] = "{'background-image': 'url(' + backgroundImageUrl + ')'}">
  <!-- Your content here -->
</div>

4. Добавьте это в свой package.json файл.

"scripts": {
  "prebuild": "node generate-environment.js",
  "build": "ng build"
}

Выполняя эти шаги, вы гарантируете, что конфигурация среды динамически генерируется и правильно используется в вашем приложении Angular в процессе сборки.