Конфигурация рабочего пространства Angular¶

28.02.2022

Файл angular.json на корневом уровне рабочего пространства Angular workspace предоставляет настройки по умолчанию для всего рабочего пространства и конкретного проекта. Они используются для инструментов сборки и разработки, предоставляемых Angular CLI. Значения путей, указанные в конфигурации, относятся к корневому каталогу рабочего пространства.

Общая структура JSON¶

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

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

Следующие свойства, расположенные на верхнем уровне файла, настраивают рабочее пространство.

Первоначальное приложение, которое вы создаете с помощью команды ng new app_name, находится в списке "projects":

1
2
3
4
5
6

"projects": {
  "app_name": {
    // …
  }
  // …
}

Когда вы создаете проект библиотеки с помощью ng generate library, проект библиотеки также добавляется в раздел projects.

Параметры конфигурации Angular CLI¶

Следующие свойства конфигурации представляют собой набор опций, которые настраивают Angular CLI.

Опции кэша¶

Параметры предупреждений¶

Параметры конфигурации проекта¶

Следующие свойства конфигурации верхнего уровня доступны для каждого проекта в разделе projects:<имя_проекта>.

1
2
3
4
5
6
7
8

"my-app": {
  "root": "",
  "sourceRoot": "src",
  "projectType": "application",
  "prefix": "app",
  "schematics": {},
  "architect": {}
}

Схемы генерации¶

Angular generation schematics — это инструкции по модификации проекта путем добавления файлов или изменения существующих файлов. Отдельные схемы для стандартных подкоманд Angular CLI ng generate собраны в пакете @schematics/angular.

Укажите имя схемы для подкоманды в формате schematic-package:schematic-name; например, схема для генерации компонента — @schematics/angular:component.

JSON-схемы для схем по умолчанию, используемых Angular CLI для создания проектов и частей проектов, собраны в пакете @schematics/angular. Схема описывает опции, доступные Angular CLI для каждой из подкоманд ng generate, как показано в выводе --help.

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

Параметры конфигурации инструмента проекта¶

Architect — это инструмент, который используется в Angular CLI для выполнения сложных задач, таких как компиляция и запуск тестов. Architect — это оболочка, которая запускает указанный builder для выполнения заданной задачи в соответствии с конфигурацией target.

Вы можете определить и настроить новые конструкторы и цели для расширения Angular CLI.

Смотрите Angular CLI Builders.

Строители и цели архитекторов по умолчанию¶

Angular определяет конструкторы по умолчанию для использования с определенными командами или с общей командой ng run. JSON-схемы, определяющие опции и значения по умолчанию для каждого из этих дефолтных конструкторов, собраны в пакете @angular-devkit/build-angular.

Схемы определяют опции для следующих конструкторов.

• app-shell
• browser
• dev-server
• extract-i18n
• karma
• сервер

Настройка целей конструктора¶

Раздел architect в файле angular.json содержит набор целей Architect. Многие из целей соответствуют командам Angular CLI, которые их запускают.

Некоторые дополнительные предопределенные цели могут быть запущены с помощью команды ng run, и вы можете определить свои собственные цели.

Каждый объект цели определяет builder для этой цели, который является пакетом npm для инструмента, запускаемого Architect. Каждая цель также имеет раздел options, в котором настраиваются параметры по умолчанию для цели, и раздел configurations, в котором называются и указываются альтернативные конфигурации для цели.

Смотрите пример в Build target ниже.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

"architect": {
  "build": {},
  "serve": {},
  "e2e" : {},
  "test": {},
  "lint": {},
  "extract-i18n": {},
  "server": {},
  "app-shell": {}
}

В целом, параметры, для которых можно настроить значения по умолчанию, соответствуют параметрам команд, перечисленным в Angular CLI reference page для каждой команды.

Цель сборки¶

Раздел architect/build задает значения по умолчанию для опций команды ng build. Он имеет следующие свойства верхнего уровня.

Альтернативные конфигурации сборки¶

Angular CLI поставляется с двумя конфигурациями сборки: production и development. По умолчанию команда ng build использует конфигурацию production, которая применяет несколько оптимизаций сборки, включая:

• Пакетирование файлов
• Минимизация лишних пробельных символов
• Удаление комментариев и мертвого кода
• Переписывание кода для использования коротких, искаженных имен, также известное как минификация.

Вы можете определить и назвать дополнительные альтернативные конфигурации (такие как stage, для instance), соответствующие вашему процессу разработки. Примерами различных конфигураций сборки являются stable, archive и next, используемые самим Angular.io, а также отдельные конфигурации, специфичные для локализации, необходимые для создания локализованных версий приложения.

Подробнее см. в Интернационализация (i18n).

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

Вы также можете передать более одного имени конфигурации в виде списка, разделенного запятыми. Например, чтобы применить конфигурации сборки stage и fr, используйте команду ng build --configuration stage,fr.

В этом случае команда анализирует именованные конфигурации слева направо.

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

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

Дополнительные опции сборки и тестирования¶

Настраиваемые опции для сборки по умолчанию или целевой сборки в целом соответствуют опциям, доступным для команд ng build, ng serve и ng test. Подробнее об этих опциях и их возможных значениях смотрите в Angular CLI Reference.

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

Значения сложной конфигурации¶

Опции assets, index, styles и scripts могут иметь либо простые строковые значения пути, либо объектные значения с определенными полями. Опции sourceMap и optimization могут быть установлены в простое булево значение с командным флагом. Им также можно придать сложное значение с помощью конфигурационного файла.

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

Конфигурация активов¶

Каждая конфигурация цели build может включать массив assets, в котором перечислены файлы или папки, которые вы хотите скопировать как есть при сборке проекта. По умолчанию копируются директория src/assets/ и src/favicon.ico.

1
2
3
4

"assets": [
  "src/assets",
  "src/favicon.ico"
]

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

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

Например, пути активов по умолчанию могут быть представлены более подробно с помощью следующих объектов.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "output": "/assets/"
  },
  {
    "glob": "favicon.ico",
    "input": "src/",
    "output": "/"
  }
]

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

1
2
3
4
5
6
7

"assets": [
  {
    "glob": "**/*",
    "input": "./node_modules/some-package/images",
    "output": "/some-package/"
  }
]

Содержимое node_modules/some-package/images/ будет доступно в dist/some-package/.

В следующем примере поле ignore используется для исключения копирования в сборку определенных файлов из каталога assets:

1
2
3
4
5
6
7
8

"assets": [
  {
    "glob": "**/*",
    "input": "src/assets/",
    "ignore": ["**/*.svg"],
    "output": "/assets/"
  }
]

Конфигурация стилей и скриптов¶

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

С помощью объекта конфигурации вы можете задать имя пакета для точки входа, используя поле bundleName.

По умолчанию пакет инжектируется, но вы можете установить inject в false, чтобы исключить инжектирование пакета. Например, следующие значения объектов создают и называют пакет, содержащий стили и скрипты, и исключают его из инъекции:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

"styles": [
  {
    "input": "src/external-module/styles.scss",
    "inject": false,
    "bundleName": "external-module"
  }
],
"scripts": [
  {
    "input": "src/external-module/main.js",
    "inject": false,
    "bundleName": "external-module"
  }
]

Вы можете смешивать простые и сложные ссылки на файлы для стилей и скриптов.

1
2
3
4
5
6

"styles": [
  "src/styles.css",
  "src/more-styles.css",
  { "input": "src/lazy-style.scss", "inject": false },
  { "input": "src/pre-rename-style.scss", "bundleName": "renamed-style" },
]

Опции препроцессора стилей¶

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

Чтобы добавить пути, используйте опцию stylePreprocessorOptions:

1
2
3
4
5

"stylePreprocessorOptions": {
  "includePaths": [
    "src/style-paths"
  ]
}

Файлы в этом каталоге, такие как src/style-paths/_variables.scss, могут быть импортированы из любой точки вашего проекта без необходимости указания относительного пути:

1
2
3
4
5

// src/app/app.component.scss
// A relative path works
@import '../style-paths/variables';
// But now this works as well
@import 'variables';

Конфигурация оптимизации¶

Опция optimization сборщика браузеров может быть как булевым значением, так и объектом для более тонкой настройки. Эта опция включает различные оптимизации вывода сборки, в том числе:

• Минификация скриптов и стилей
• Смена деревьев
• Устранение "мертвого кода
• Инкрустация критических CSS
• Инкрустация шрифтов

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

Параметры оптимизации стилей¶

Опции оптимизации шрифтов¶

Вы можете задать значение, подобное следующему, чтобы применить оптимизацию к одному или другому параметру:

1
2
3
4
5
6
7
8

"optimization": {
  "scripts": true,
  "styles": {
    "minify": true,
    "inlineCritical": true
  },
  "fonts": true
}

Конфигурация карты источников¶

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

В примере ниже показано, как переключать одно или несколько значений для настройки вывода карт источников:

1
2
3
4
5
6

"sourceMap": {
  "scripts": true,
  "styles": false,
  "hidden": true,
  "vendor": true
}

Конфигурация индекса¶

Настраивает генерацию HTML-индекса приложения.

Параметр index может быть как строкой, так и объектом для более тонкой настройки.

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

Параметры индекса¶

Ссылки¶

• Angular workspace configuration

Комментарии