Угловая одноразовая сборка

Привет CelSius, — так я называю своего приятеля 😆

Сегодня я расскажу о том, как однократно построить в вашем проекте Angular, в Angular-способе.

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

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

Оттуда я нахожу хитрый способ добиться этого, добавляя файлы javascript и сохраняя все настройки вашей среды в window объекте, а затем снова загружая их обратно в ваши environment.ts файлы.

Да, это не так, но опять же…

Я считаю, что мы используем Angular, почему мы делаем такие общие вещи?

Итак, исходя из этой мысли, я нашел, как это сделать в Angular-way.

Итак, основная идея заключается в том, что вы можетедобавлять столько environment, сколько хотите, ничего не делая с вашими существующими компонентами.

Во-первых, вам нужен config.json файл.

{
  "environment": "dev"
}

Вот единственный файл, в котором вы укажете используемую вами среду.

Второе, что вам нужно, это настройка среды!

В данном случае у нас есть dev и prodсреда.

Таким образом, внутри вашей папки src/environments вы можете добавить (если она не существует) или обновить (если она существует) файлы environment.dev.ts и environment.prod.ts.

// environment.dev.ts
export const environment = {
  production: false,
  api: 'https://example.com/api/dev',
  payment: 'https://example.com/payment/dev'
};

и

// environment.prod.ts
export const environment = {
  production: true,
  api: 'https://example.com/api/prod',
  payment: 'https://example.com/payment/prod'
};

Следующее — обновить файл src/environments/environment.ts :

import {environment as prod} from './environment.prod';
import {environment as dev} from './environment.dev';

let config: any;

const req = new XMLHttpRequest();
req.open('GET', 'config.json', false);
req.onload = () => {
  config = JSON.parse(req.responseText.toString());
};
req.send(null);

let environment: any = {};
if (config) {
  switch (config.environment) {
    case 'prod':
      environment = prod;
      break;
    default:
      environment = dev;
      break;
  }
}

export {environment};

После того, как все вышеперечисленные шаги были выполнены, нам нужно найти то, чего не хватает.

Когда мы попытаемся запустить ng serve, обратите внимание, что ваш environment все еще не работает даже после того, как мы его установили.

Упс~~

Это потому, что ваш Angular все еще не может прочитать ваш файл config.json!

Итак, нам нужно просто обновить ваш файл angular.json, чтобы ваш проект Angular прочитал файл config.json.

Добавьте эту строку кода под своим assets:

{
   "glob": "config.json",
   "input": "src/environments",
   "output": "."
}

Итак, структура будет такой:

{
  •••
  "projects": {
    "angular-build-once": {
      •••
      "architect": {
        "build": {
          •••
          "options": {
            •••
            "assets": [
              •••
              {
                "glob": "config.json",
                "input": "src/environments",
                "output": "."
              }
            ],
            •••
          },
          •••
        },
        •••
        "test": {
          •••
          "options": {
            •••
            "assets": [
              •••
              {
                "glob": "config.json",
                "input": "src/environments",
                "output": "."
              }
            ]
          }
        },
        •••
      }
    },
    
    •••
  },
  •••
}

Но не забудьте удалить эту строку кода:

Затем снова запустите ng serve , и тогда он работает!!!

Теперь давайте попробуем с ng build.

После завершения процесса build сгенерированная папка dist будет выглядеть следующим образом:

Таким образом, build result можно использовать непосредственно для всего вашего сервера (в данном случае мы используем dev и prod .

Нам нужно изменить только файл config.json.

После сборки на сервер dev измените значение environment на:

{
  "environment": "dev"
}

То же самое относится и к серверу prod, измените значение environment на:

{
  "environment": "prod"
}

И это все! Это действительно так просто.

Тогда вам не придется трогать все components.

Добавление другой среды?

Вы хотите иметь другую среду (скажем: среда xyz)

Это супер просто!!!!!

Просто добавьте новый файл src/environments/environment.xyz.ts , а затем добавьте все переменные вашей среды.

А затем зарегистрируйте его в src/environments/environment.ts и просто зарегистрируйте, как мы регистрируем среду dev и prod.

Тадааа~~

Резюме

Если вам не нравится длинное объяснение, просто перейдите непосредственно к Демо для Angular Build-once на Github и проверьте историю коммитов.

Итак, из объяснения всей моей идеи, на самом деле мы делаем только это:

И это все!