Угловые динамические настройки

(Вы можете найти код, показанный здесь, в https://github.com/livioribeiro/angular-dynamicic-settings-example )

При разработке углового приложения, как правило, ваши настройки приложения живут в SRC/окружение/окружающая среда. для развития и SRC/среда/окружающая среда. Prod.ts Для производства и угловых забот о том, чтобы обнять те, во время производственной сборки.

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

Чтобы преодолеть эту проблему, я подошел очень простой, но очень эффективной стратегией:

• Загрузите файл JavaScript до начала приложения, который будет определять объект настроек в окно. $ Окружающая среда Отказ Это, по сути так же, как окружающая среда Отказ В
• окружающая среда экспортировать объект, определенный в окно. $ Окружающая среда Отказ Скажите угловой, чтобы добавить каталог конфигурации в каталог вывода сборки.

Сначала нам нужно создать каталог под названием src/config и поместите файл JavaScript Exection.js там:

// src/config/environment.js
window.$environment = {
  production: false,
  api: "dev.my-backend.io",
  // and any other configuration that would go in "environment.ts"
};

А затем загрузить скрипт на index.html :

Сейчас , в окружающая среда экспортировать объект конфигурации:

// src/environments/environment.ts

// this interface is just to making things more typed
interface Environment {
  production: boolean;
  api: string;
}

export const environment = (window as any).$environment as Environment;

И, наконец, изменить angular.json Параметры сборки, добавление "src/config" Активы и удалите «FileReplacements» полностью. Я также изменил «Oddingpath» просто "dist" :

...
"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // "outputPath" is just "dist"
    "outputPath": "dist",
    "index": "src/index.html",
    "main": "src/main.ts",
    "polyfills": "src/polyfills.ts",
    "tsConfig": "tsconfig.app.json",
    "assets": [
      "src/favicon.ico",
      "src/assets",
      // add the following
      "src/config"
    ],
    "styles": [
      "src/styles.css"
    ],
    "scripts": []
  },
    "configurations": {
      "production": {
        "budgets": [
          {
            "type": "initial",
            "maximumWarning": "500kb",
            "maximumError": "1mb"
          },
          {
            "type": "anyComponentStyle",
            "maximumWarning": "2kb",
            "maximumError": "4kb"
          }
        ],
        // "fileReplacements" is removed
        "outputHashing": "all"
      },
...

Мы можем безопасно удалить SRC/среда/окружающая среда. Prod.ts Нам больше не нужна.

Теперь мы можем ввести скрипт конфигурации вместо того, чтобы сделать еще одну сборку.

Этот подход отлично работает с Docker и Kubernetes, и мы можем проверить это прямо сейчас!

Во-первых, нам нужен DockerFile:

FROM node:latest as builder
WORKDIR /app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:latest
COPY --from=builder /app/dist/ /usr/share/nginx/html/

И конфигурация для ввода (Я назвал это «enducial.js»):

// environment.js
window.$environment = {
  production: true,
  api: "prod.my-backend.io",
};

Теперь мы строим изображение и запускаем контейнер с нашей новой конфигурацией:

docker build -t my-app .
docker run --name my-app \
  -it --rm \
  -p 8080:8080 \
  -v $PWD/environment.js:/usr/share/nginx/html/config/environment.js \
  my-app

С Kubernetes вы можете использовать конфигурацию для хранения «Excents.js» и устанавливают его как объем под «/usr/calle/nginx/html/config/config].

Вот и все! Нет больше восстановления угловых для постановки и добычи!

Оригинал: «https://dev.to/livioribeiro/angular-dynamic-settings-4hae»