Что делает файл angular.json?

Файл angular.json — это основной конфигурационный файл Angular CLI, который управляет структурой проекта, настройками сборки, запуска, тестирования и деплоя. Он создается автоматически при инициализации Angular-проекта с помощью ng new и используется Angular CLI для определения параметров команд, таких как ng serve, ng build, ng test, ng lint и других.

1. Общая структура angular.json

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-app": {
...
}
},
"defaultProject": "my-app"
}

2. Ключевые поля верхнего уровня

  • $schema — путь к JSON-схеме, помогающей валидации и автодополнению.

  • version — версия схемы. Обычно 1.

  • newProjectRoot — папка по умолчанию, в которую Angular CLI будет помещать новые проекты или библиотеки (projects/).

  • projects — объект, содержащий описание всех проектов (приложений и библиотек), входящих в монорепозиторий.

  • defaultProject — имя проекта, который используется по умолчанию при выполнении CLI-команд без указания имени.

3. Раздел projects

Каждый проект (основное приложение или библиотека) описывается как объект:

"projects": {
"my-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": { ... }
}
}

Поля внутри проекта:

  • root — корень проекта (обычно "" для основного приложения).

  • sourceRoot — путь к исходным файлам (обычно src/).

  • projectType — application или library.

  • prefix — префикс для генерации селекторов компонентов (например, app).

  • architect — набор конфигураций для задач CLI: сборка, запуск, тестирование, линтинг и т.д.

4. Раздел architect

В этом разделе задаются параметры для разных задач Angular CLI. Основные задачи:

  • build — сборка приложения

  • serve — локальный сервер (ng serve)

  • test — юнит-тестирование (ng test)

  • lint — линтинг кода (ng lint)

  • e2e — E2E-тесты (если используется)

  • extract-i18n — извлечение i18n

Пример раздела build:

"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/my-app",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"assets": \["src/favicon.ico", "src/assets"\],
"styles": \["src/styles.css"\],
"scripts": \[\]
},
"configurations": {
"production": {
"fileReplacements": \[{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}\],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
}
},
"defaultConfiguration": "production"
}

5. Важные параметры внутри build > options

  • outputPath — куда помещать собранный проект.

  • index — HTML-файл, используемый как шаблон.

  • main — основной файл TypeScript (точка входа).

  • polyfills — файл с полифилами.

  • tsConfig — путь к TypeScript конфигурации.

  • assets — массив файлов и папок, копируемых как есть.

  • styles — массив глобальных CSS-файлов.

  • scripts — массив JS-файлов, подключаемых глобально.

6. Конфигурации (configurations)

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

  • production — используется при ng build --configuration production

  • development — может использоваться по умолчанию при ng serve

Здесь можно менять environment, активировать оптимизацию, отключать sourcemaps и т.д.

7. Раздел serve

"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-app:build"
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production"
}
}
}

Поле browserTarget указывает, какую сборку использовать. Можно запускать сервер с конфигурацией:

ng serve --configuration production

8. Раздел test

"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": \["src/favicon.ico", "src/assets"\],
"styles": \["src/styles.css"\],
"scripts": \[\]
}
}

Этот блок управляет настройкой юнит-тестирования через Karma.

9. Раздел lint (устаревший в новых версиях)

До Angular 12 использовался tslint. В Angular 13+ lint может быть реализован через @angular-eslint.

Пример:

"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": \["tsconfig.app.json", "tsconfig.spec.json"\],
"exclude": \["\*\*/node_modules/\*\*"\]
}
}

В новых версиях Angular рекомендуется настраивать ESLint через отдельные конфиги.

10. Поддержка нескольких проектов

Если в одном репозитории находятся несколько приложений или библиотек:

"projects": {
"app-one": { ... },
"app-two": { ... },
"shared-lib": { ... }
}

Каждое приложение/библиотека имеет свой sourceRoot, architect, tsconfig, и может запускаться отдельно.

11. Кастомные скрипты и билдеры

Можно использовать кастомные билд-сценарии и внешние билд-системы:

  • Кастомный builder

  • Интеграция с Webpack

  • Использование внешних schematics

12. Использование CLI-команд с angular.json

CLI команды используют данные из angular.json:

ng build --configuration production
ng serve --project app-two
ng test --watch

13. Поддержка i18n

Раздел extract-i18n позволяет извлекать переводимые строки:

"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-app:build"
}
}

14. Расширяемость

Можно вручную добавлять дополнительные конфигурации, например:

"configurations": {
"staging": {
"fileReplacements": \[
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
\],
"optimization": true,
"sourceMap": false
}
}

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

26-07-2025
Easy 17 просмотров