Построение проекта

В прошлой теме был создан первый простейший проект.

Мы можем его запустить, поработать с ним, изменять его код, но как теперь получить те файлы, которые собственно представляют приложение и которые мы можем разместить на каком либо сервере? Для этого нам надо выполнить построение проекта.

В прошлой теме мы определили следующий файл angular.json:

{
  "version": 1,
  "projects": {
    "helloapp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/helloapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.json",
            "aot": true
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "helloapp:build"
          }
        }
      }
    }
  }
}

Секция build описывает конфигурацию команды построения "ng build". В частности, параметр "outputPath" задает каталог для компилируемых файлов приложения.

То есть мы можем ввести в командную строку команду ng build для компиляции проекта

После выполнения этой команды в каталоге проекта появится папка dist/helloapp, где мы сможем увидеть все файлы приложения. Мы можем расположить эти файлы на любой веб-сервер и так же обращаться к главной странице приложения.

Настройка построения

По умолчанию Angular CLI использует ряд настроек при построении. Например, файлы компилируются в режиме production, то есть в режиме, когда они уже непосредственно готовы к развертыванию. Но мы также можем все настройки построения задать явным образом. Так, изменим файл angular.json следующим образом:

{
  "version": 1,
  "projects": {
    "helloapp": {
      "projectType": "application",
      "root": "",
      "sourceRoot": "src",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/helloapp",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": ["zone.js"],
            "tsConfig": "tsconfig.json",
            "aot": true
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "vendorChunk": false,
              "buildOptimizer": true
            },
            "development": {
              "optimization": false,
              "sourceMap": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "buildTarget": "helloapp:build"
          }
        }
      }
    }
  }
}

Теперь мы добавили для команды build подсекцию "configurations", которая задает дополнительные конфигурации проекта. И здесь указаны две конфигурации - "production" и "development"- то есть набор настроек, которые применяются к построению приложения, когда оно уже готово к развертыванию и полноценному использованию. И здесь определяется следующий набор настроек:

• optimization: указывает, будет ли использоваться оптимизация

• outputHashing: указывает, будет ли в название генерируемого файла добавляться хеш-значение. Значение all говорит, что в названия всех генерируемых файлов добавляется хеш

• sourceMap: определяет, будут ли генерироваться файлы sourceMap

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

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

• buildOptimizer: подключает пакет @angular-devkit/build-optimizer для оптимизации при использовании опции aot

Стоит отметить, что эти конфигурации никак не влияют на процесс разработки и тестирования приложения. Мы также сможем запускать проект при помощи команды "ng serve". Она не будет применять никаких оптимизаций из конфигурации "production", иначе это бы увеличило процесс перекомпиляциии приложения при каждом изменении кода.

Теперь используем конфигурацию production для компиляции. Для этого команде build надо передать флаг --configuration production:

C:\angular\helloapp>ng build --configuration production

После этого мы увидим в папке dist/helloapp те же файлы, но которые были сгенерированы с помощью настроек из файла angular.json. Изменяя эти настройки, мы можем задать нужные нам в конкретной ситуации параметры построения проекта.