5.01. Справочник по Angular

В РАЗРАБОТКЕНЕ ДЛЯ НОВИЧКОВНЕ ОБЯЗАТЕЛЬНО

Разработчику Архитектору

Справочник по Angular

1. Архитектурные блоки Angular

1.1. Компоненты (Components)

Компонент — основная строительная единица пользовательского интерфейса в Angular. Он объединяет шаблон (HTML), логику (TypeScript) и стили (CSS/SCSS).

Декоратор @Component принимает следующие свойства:

selector — строка, определяющая имя тега, по которому компонент используется в шаблонах других компонентов. Пример: 'app-header'.
template — строка с HTML-разметкой компонента. Используется вместо templateUrl, если шаблон короткий.
templateUrl — путь к внешнему файлу шаблона. Пример: './header.component.html'.
styles — массив строк с CSS-правилами, применяемыми только к этому компоненту.
styleUrls — массив путей к файлам стилей. Пример: ['./header.component.css'].
encapsulation — стратегия инкапсуляции стилей. Возможные значения:
- ViewEncapsulation.Emulated — эмуляция изоляции через уникальные атрибуты (по умолчанию).
- ViewEncapsulation.None — глобальное применение стилей без изоляции.
- ViewEncapsulation.ShadowDom — использование Shadow DOM (если поддерживается браузером).
changeDetection — стратегия обнаружения изменений:
- ChangeDetectionStrategy.Default — проверка всех компонентов при любом событии.
- ChangeDetectionStrategy.OnPush — проверка только при изменении входных данных или событиях.
providers — массив провайдеров зависимостей, доступных в этом компоненте и его дочерних элементах.
viewProviders — провайдеры, доступные только в представлении компонента (не в содержимом, переданном через <ng-content>).
animations — массив триггеров анимаций, определённых через trigger().
standalone — логическое значение (true/false), указывающее, является ли компонент автономным (не требует объявления в NgModule).
imports — массив импортируемых автономных компонентов, директив или pipes, используемых в шаблоне.
host — объект с привязками к хост-элементу (устаревшее, рекомендуется использовать hostDirectives).
hostDirectives — массив директив, применяемых к хост-элементу компонента.
schemas — массив схем для разрешения неизвестных элементов (например, CUSTOM_ELEMENTS_SCHEMA).

1.2. Директивы (Directives)

Директивы расширяют поведение элементов DOM.

Типы директив:

Компоненты — директивы с шаблоном.
Атрибутивные директивы — изменяют внешний вид или поведение элемента, компонента или другого элемента.
Структурные директивы — изменяют DOM-структуру (добавляют/удаляют элементы).

Встроенные атрибутивные директивы:

ngClass — динамическое управление CSS-классами.
ngStyle — динамическое применение стилей.
ngModel — двусторонняя привязка данных (требует FormsModule).

Встроенные структурные директивы:

*ngIf — условный рендеринг.
*ngFor — повторение элемента по коллекции.
*ngSwitch / *ngSwitchCase / *ngSwitchDefault — множественный условный рендеринг.

Создание кастомной директивы: Используется декоратор @Directive({ selector: '[appHighlight]' }).

Свойства декоратора @Directive:

selector — CSS-селектор для применения директивы.
standalone — автономность директивы.
inputs — список входных свойств.
outputs — список выходных событий.
providers — провайдеры зависимостей.
host — устаревший способ привязки к хост-элементу.
hostDirectives — современный способ применения других директив к хосту.

1.3. Pipes (Трубопроводы)

Pipes преобразуют данные для отображения в шаблонах.

Встроенные pipes:

date — форматирование дат.
currency — форматирование денежных значений.
percent — отображение процентов.
uppercase / lowercase — изменение регистра.
slice — извлечение части массива или строки.
json — сериализация объекта в JSON.
async — подписка на Observable или Promise и автоматическая отписка.
titlecase — преобразование в заголовочный регистр.
number — форматирование чисел.

Параметры использования:

{{ value | pipeName:param1:param2 }}

Создание кастомного pipe: Используется декоратор @Pipe({ name: 'customPipe' }). Pipe должен реализовывать интерфейс PipeTransform с методом transform().

Свойства декоратора @Pipe:

name — имя, используемое в шаблоне.
pure — логическое значение. Если true (по умолчанию), pipe вызывается только при изменении входных данных. Если false, вызывается при каждом цикле обнаружения изменений.

2. Модули (NgModules)

Модуль объединяет связанные компоненты, директивы, pipes и сервисы в функциональную единицу.

2.1. Декоратор `@NgModule`

Свойства:

declarations — массив компонентов, директив и pipes, принадлежащих модулю.
imports — массив импортируемых модулей (например, CommonModule, RouterModule, HttpClientModule).
exports — массив элементов, доступных другим модулям, импортирующим данный.
providers — массив сервисов, регистрируемых на уровне модуля (обычно используется для singleton-сервисов).
bootstrap — корневой компонент приложения (только в AppModule).

2.2. Типы модулей

Корневой модуль (AppModule) — точка входа приложения.
Фича-модули — группируют функциональность (например, UserModule, ProductModule).
Общие модули (SharedModule) — содержат переиспользуемые компоненты, директивы, pipes.
Основные модули (CoreModule) — предоставляют singleton-сервисы и глобальные зависимости.
Автономные компоненты — начиная с Angular 14+, компоненты могут быть standalone и не требовать NgModule.

3. Сервисы и внедрение зависимостей (DI)

3.1. Создание сервиса

Используется декоратор @Injectable().

Свойства @Injectable:

providedIn — определяет область предоставления сервиса:
- 'root' — singleton на уровне всего приложения.
- имя модуля — сервис доступен только в этом модуле.
- 'any' — создаётся отдельный экземпляр для каждого инжектора (редко используется).

3.2. Внедрение зависимостей

Angular использует иерархическую систему инжекторов. Сервис может быть внедрён в:

компонент,
директиву,
другой сервис,
модуль (через providers).

Конструктор класса автоматически получает зависимости через параметры с типами.

Пример:

constructor(private http: HttpClient, private logger: LoggerService) {}

4. Маршрутизация (RouterModule)

4.1. Конфигурация маршрутов

Массив объектов Routes:

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'user/:id', component: UserComponent },
  { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) },
  { path: '**', component: NotFoundComponent }
];

4.2. Свойства маршрута

path — строка пути.
component — компонент для отображения.
redirectTo — перенаправление на другой путь.
pathMatch — стратегия совпадения ('full' или 'prefix').
children — дочерние маршруты.
loadChildren — ленивая загрузка модуля.
canActivate, canDeactivate, canLoad — guards для контроля доступа.
resolve — предварительная загрузка данных перед активацией маршрута.
data — статические данные, передаваемые в маршрут.

4.3. Активный маршрут (ActivatedRoute)

Содержит:

params — Observable параметров маршрута (/user/:id → { id: '123' }).
queryParams — Observable query-параметров (?lang=en).
data — Observable статических данных из конфигурации.
url — Observable сегментов URL.

5. Формы

Angular поддерживает два подхода к работе с формами.

5.1. Шаблонные формы (Template-driven)

Используются директивы:

ngModel — двусторонняя привязка.
ngForm — обёртка над всей формой.
required, minlength, pattern — встроенные валидаторы.

Пример:

<form #f="ngForm">
  <input name="email" ngModel required email>
</form>

5.2. Реактивные формы (Reactive Forms)

Создаются программно через классы:

FormControl — управляет одним полем.
FormGroup — группа полей.
FormArray — динамический массив контролов.

Валидаторы:

Validators.required
Validators.minLength(5)
Validators.pattern(/.../)
кастомные функции.

Пример:

profileForm = new FormGroup({
  name: new FormControl('', [Validators.required]),
  email: new FormControl('', [Validators.email])
});

Шаблон:

<form [formGroup]="profileForm">
  <input formControlName="name">
</form>

6. HttpClient

Модуль HttpClientModule предоставляет сервис HttpClient.

6.1. Основные методы

get<T>(url, options?)
post<T>(url, body, options?)
put<T>(url, body, options?)
delete<T>(url, options?)
patch<T>(url, body, options?)

6.2. Параметры запроса (`HttpParams`)

const params = new HttpParams().set('page', '1').set('size', '10');
this.http.get('/api/users', { params });

6.3. Заголовки (`HttpHeaders`)

const headers = new HttpHeaders().set('Authorization', 'Bearer token');
this.http.get('/api/data', { headers });

6.4. Интерцепторы

Реализуются через HttpInterceptor. Регистрируются в providers с токеном HTTP_INTERCEPTORS.

Используются для:

добавления токенов,
логирования,
обработки ошибок,
кэширования.

7. RxJS и реактивное программирование

Angular глубоко интегрирован с RxJS.

7.1. Основные операторы

map — преобразование значения.
filter — фильтрация потока.
switchMap — отмена предыдущего Observable при новом событии.
mergeMap — параллельное выполнение.
catchError — обработка ошибок.
debounceTime — задержка после последнего события.
distinctUntilChanged — игнорирование повторяющихся значений.

7.2. Жизненный цикл подписок

Подписки на Observable должны отменяться во избежание утечек памяти. Рекомендуется:

использовать async pipe в шаблонах (автоматическая отписка),
или отписываться в ngOnDestroy.

8. Жизненный цикл компонентов и директив

Angular вызывает специальные методы в определённой последовательности при создании, обновлении и уничтожении компонентов.

8.1. Хуки жизненного цикла

ngOnChanges — вызывается при изменении входных свойств (@Input). Получает объект SimpleChanges.
ngOnInit — вызывается один раз после инициализации входных свойств. Используется для начальной загрузки данных.
ngDoCheck — вызывается при каждом цикле обнаружения изменений. Позволяет реализовать кастомную логику проверки.
ngAfterContentInit — вызывается после проецирования внешнего содержимого (<ng-content>) в представление.
ngAfterContentChecked — вызывается после проверки спроецированного содержимого.
ngAfterViewInit — вызывается после инициализации дочерних компонентов и представления.
ngAfterViewChecked — вызывается после проверки представления и дочерних компонентов.
ngOnDestroy — вызывается перед уничтожением компонента. Используется для отмены подписок, таймеров и других ресурсов.

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

9. Анимации

Angular предоставляет мощную систему анимаций через @angular/animations.

9.1. Основные функции

trigger(name, statesAndTransitions) — определяет триггер анимации.
state(name, style) — задаёт статическое состояние.
transition(stateChangeExpr, steps) — описывает переход между состояниями.
animate(timing, styles?) — определяет продолжительность и стиль анимации.
style() — задаёт CSS-стили.
keyframes() — позволяет задавать сложные анимации с несколькими шагами.
query(), group(), sequence() — управляют анимацией нескольких элементов.

9.2. Пример

animations: [
  trigger('fadeInOut', [
    state('in', style({ opacity: 1 })),
    transition(':enter', [style({ opacity: 0 }), animate(300)]),
    transition(':leave', [animate(300, style({ opacity: 0 }))])
  ])
]

Шаблон:

<div [@fadeInOut]="'in'"></div>

Анимации требуют импорта BrowserAnimationsModule в корневом модуле.

10. Интернационализация (i18n)

Angular поддерживает многоязычность через инструменты i18n.

10.1. Маркировка текста

Используется атрибут i18n:

<h1 i18n="Приветствие@@welcomeHeader">Добро пожаловать!</h1>

@@id — уникальный идентификатор перевода.
"описание" — комментарий для переводчиков.

10.2. Генерация файлов перевода

Команда:

ng extract-i18n

Создаёт файл messages.xlf (или .xliff, .xlf2, .json в зависимости от настроек).

10.3. Сборка с локалью

В angular.json указываются локали:

"i18n": {
  "sourceLocale": "ru",
  "locales": {
    "en": "src/locale/messages.en.xlf"
  }
}

Сборка:

ng build --localize

Генерирует отдельные папки для каждой локали (/en/, /ru/ и т.д.).

11. Производительность и оптимизация

11.1. Ленивая загрузка модулей

Уменьшает размер начального бандла. Конфигурируется через loadChildren в маршрутах.

11.2. OnPush Change Detection

Уменьшает количество проверок изменений. Активируется через changeDetection: ChangeDetectionStrategy.OnPush.

11.3. TrackBy в *ngFor

Повышает эффективность повторного рендеринга списков:

<li *ngFor="let item of items; trackBy: trackById">{{ item.name }}</li>

trackById(index: number, item: any): any {
  return item.id;
}

11.4. Pure Pipes

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

11.5. AOT-компиляция

По умолчанию включена в production-сборке. Преобразует шаблоны в JavaScript на этапе сборки.

11.6. Code Splitting и Tree Shaking

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

12. Конфигурация проекта

12.1. Файл `angular.json`

Основной конфигурационный файл проекта.

Ключевые секции:

projects.<name>.architect.build — настройки сборки:
- options.outputPath — директория вывода.
- options.index — HTML-файл.
- options.main — точка входа.
- options.polyfills — полифиллы.
- options.assets — статические ресурсы.
- options.styles — глобальные стили.
- options.scripts — глобальные скрипты.
- options.optimization — минификация, объединение.
- options.sourceMap — генерация source maps.
- options.localize — включение локализации.
projects.<name>.architect.serve — настройки dev-сервера:
- options.port
- options.ssl
- options.proxyConfig
projects.<name>.architect.test — настройки тестирования.

12.2. Файл `tsconfig.json`

Конфигурация TypeScript. Важные опции:

strict — строгая типизация.
target — версия JavaScript.
moduleResolution — стратегия разрешения модулей.
paths — псевдонимы путей.

12.3. Файл `package.json`

Содержит зависимости:

@angular/core, @angular/common — основные пакеты.
rxjs, zone.js — обязательные зависимости.
@angular/cli — в devDependencies.

13. Тестирование

13.1. Unit-тесты (Jasmine + Karma)

Файлы с суффиксом .spec.ts.

Основные функции:

describe() — группа тестов.
it() — отдельный тест.
beforeEach() — подготовка перед каждым тестом.
TestBed — утилита для настройки тестовой среды.

Пример:

TestBed.configureTestingModule({
  declarations: [ MyComponent ],
  imports: [ CommonModule ]
});

13.2. E2E-тесты (ранее Protractor, сейчас Cypress или Playwright)

CLI по умолчанию не включает E2E-фреймворк, но поддерживает интеграцию.

14. Best Practices

Используйте автономные компоненты (standalone) для новых проектов.
Избегайте логики в шаблонах — выносите в компонент.
Применяйте реактивные формы для сложной валидации.
Используйте async pipe вместо ручных подписок.
Разделяйте логику на сервисы.
Минимизируйте использование any.
Следуйте соглашениям об именовании (например, user.service.ts, user-list.component.ts).
Используйте OnPush для компонентов с иммутабельными входными данными.
Пишите unit-тесты для всех сервисов и компонентов с логикой.

15. Сигналы (Signals) — Angular 16+

Сигналы — реактивная примитивная система, введённая как альтернатива Observable для управления состоянием на уровне компонентов и сервисов.

15.1. Основные функции

signal(initialValue) — создаёт мутабельный сигнал.
computed(() => ...) — вычисляемый (read-only) сигнал, зависящий от других сигналов.
effect(() => ...) — побочный эффект, автоматически запускаемый при изменении зависимых сигналов.
untracked(() => ...) — блок кода, игнорирующий зависимости сигналов.

15.2. Пример использования

count = signal(0);
doubleCount = computed(() => this.count() * 2);

increment() {
  this.count.update(v => v + 1);
}

Шаблон:

<p>Значение: {{ count() }}</p>
<p>Удвоенное: {{ doubleCount() }}</p>

Сигналы интегрированы с механизмом обнаружения изменений и не требуют async pipe.

15.3. Преимущества

Простота синтаксиса.
Автоматическое отслеживание зависимостей.
Лучшая производительность по сравнению с OnPush + async в некоторых сценариях.
Поддержка в шаблонах без дополнительных настроек.

16. Автономные компоненты, директивы и pipes (Standalone API)

Начиная с Angular 14, фреймворк поддерживает разработку без NgModule.

16.1. Объявление автономного компонента

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  standalone: true,
  imports: [CommonModule, RouterLink]
})
export class HeaderComponent {}

16.2. Запуск приложения без AppModule

bootstrapApplication(AppComponent, {
  providers: [
    provideRouter(routes),
    provideHttpClient()
  ]
});

16.3. Преимущества

Упрощённая архитектура.
Меньше boilerplate-кода.
Лучшая поддержка ленивой загрузки на уровне компонентов.
Повышение модульности и переиспользуемости.

17. Обнаружение изменений (Change Detection)

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

17.1. Режимы

Default — проверяет всё дерево компонентов.
OnPush — проверяет компонент только если:
- изменились входные данные (@Input),
- произошло событие DOM внутри компонента,
- вызван markForCheck().

17.2. Управление вручную

ChangeDetectorRef.detectChanges() — запускает проверку немедленно.
ChangeDetectorRef.markForCheck() — помечает компонент для проверки в следующем цикле (при OnPush).
ChangeDetectorRef.detach() / reattach() — отключает/подключает компонент от системы обнаружения изменений.

18. Работа с DOM и безопасность

18.1. Renderer2

Безопасный способ взаимодействия с DOM, совместимый с серверным рендерингом и Web Workers.

Методы:

createElement, createText
setAttribute, removeAttribute
addClass, removeClass
setProperty
listen — подписка на события

Пример:

constructor(private renderer: Renderer2, private el: ElementRef) {}

ngOnInit() {
  this.renderer.setStyle(this.el.nativeElement, 'color', 'blue');
}

18.2. Безопасность (Security)

Angular автоматически экранирует значения в интерполяции ({{ }}) и привязках свойств.

Для вставки HTML используется innerHTML с DomSanitizer:

safeHtml = this.sanitizer.bypassSecurityTrustHtml('<b>Опасный HTML</b>');

Методы DomSanitizer:

bypassSecurityTrustHtml
bypassSecurityTrustStyle
bypassSecurityTrustScript
bypassSecurityTrustUrl
bypassSecurityTrustResourceUrl

Использование этих методов требует осторожности — только для доверенного контента.

19. Кастомные элементы (Angular Elements)

Позволяют упаковать Angular-компоненты как нативные Web Components.

19.1. Настройка

Установка:

ng add @angular/elements

Регистрация:

const customElement = createCustomElement(MyComponent, { injector });
customElements.define('my-component', customElement);

19.2. Использование

В любом HTML-файле:

<my-component></my-component>

Поддерживает входные свойства и выходные события через стандартные DOM-атрибуты и CustomEvent.

20. PWA (Progressive Web App)

CLI поддерживает генерацию PWA одной командой:

ng add @angular/pwa

Добавляет:

manifest.webmanifest
ngsw-config.json — конфигурация Service Worker
service-worker.js
иконки в /assets/icons/

Функции:

Оффлайн-работа
Push-уведомления (требует доп. настройки)
Установка на устройство

21. Серверный рендеринг (SSR) и Hydration

21.1. Установка

ng add @angular/ssr

Генерирует:

server.ts — Express-сервер
app.config.server.ts — конфигурация для SSR
main.server.ts — точка входа сервера

21.2. Гидратация

Автоматически включена. Синхронизирует состояние между сервером и клиентом, избегая полной перерисовки.

21.3. Ограничения

Некоторые API браузера (window, localStorage) недоступны на сервере.
Требуется условная проверка: if (typeof window !== 'undefined').

22. Миграция и совместимость

22.1. Стратегия обновления

Angular следует семантическому версионированию. Каждые 6 месяцев выпускается новая мажорная версия.

Рекомендуется:

Обновляться минорными версиями регулярно.
Переходить на мажорные версии сразу после выхода.
Использовать ng update для автоматической миграции.

22.2. Совместимость с AngularJS (v1.x)

Поддержка гибридных приложений через @angular/upgrade. Позволяет постепенно переносить компоненты с AngularJS на Angular.

23. Angular CLI: Полный список команд и флагов

23.1. Основные команды

Команда	Назначение
`ng new <name>`	Создание нового проекта
`ng generate <schematic> [name]`	Генерация артефактов (компонентов, сервисов и т.д.)
`ng serve`	Запуск dev-сервера
`ng build`	Сборка проекта
`ng test`	Запуск unit-тестов
`ng e2e`	Запуск end-to-end тестов (устаревшее, заменено интеграцией с Cypress/Playwright)
`ng lint`	Проверка кода на соответствие правилам
`ng update`	Обновление зависимостей и миграция кода
`ng add`	Добавление библиотек с автоматической настройкой
`ng version`	Отображение версий Angular и CLI

23.2. Подробные флаги для `ng new`

ng new my-app \
  --directory=my-app \
  --prefix=app \
  --style=scss \
  --routing=true \
  --standalone=false \
  --skip-tests=false \
  --skip-install=false \
  --package-manager=npm \
  --strict=true

--directory — имя папки проекта.
--prefix — префикс для селекторов компонентов (по умолчанию app).
--style — формат стилей: css, scss, sass, less, stylus.
--routing — добавить AppRoutingModule.
--standalone — использовать автономные компоненты вместо NgModule.
--skip-tests — не генерировать .spec.ts файлы.
--skip-install — пропустить установку зависимостей.
--package-manager — npm, yarn, pnpm.
--strict — включить строгие правила TypeScript и линтера.

23.3. Флаги для `ng generate`

Поддерживаемые схематики:

component
directive
pipe
service
guard
interceptor
module
class
interface
enum

Общие флаги:

--flat — не создавать папку.
--spec — явно включить/отключить генерацию тестов.
--inline-template / -it — использовать template вместо templateUrl.
--inline-style / -is — использовать styles вместо styleUrls.
--change-detection=OnPush — установить стратегию обнаружения изменений.
--skip-selector — не добавлять selector (для директив).
--project — указать проект в мультипроектном workspace.

Пример:

ng g c user/profile --inline-template --inline-style --change-detection=OnPush

23.4. Флаги для `ng build`

--configuration=production — использовать конфигурацию из angular.json.
--output-path — переопределить директорию вывода.
--base-href — задать <base href="...">.
--optimization — включить минификацию, объединение, дедупликацию.
--source-map — генерировать source maps.
--stats-json — создать stats.json для анализа бандла.
--localize — собрать все локали или конкретную (--localize=fr).

24. Структура проекта Angular

Типичная структура (на основе ng new):

my-app/
├── src/
│   ├── app/
│   │   ├── app.component.ts|html|css|spec.ts
│   │   └── app.module.ts (или app.config.ts для standalone)
│   ├── assets/          # Статические ресурсы
│   ├── environments/    # Переменные окружения
│   ├── index.html       # Корневой HTML
│   ├── main.ts          # Точка входа
│   ├── styles.scss      # Глобальные стили
│   └── favicon.ico
├── angular.json         # Конфигурация CLI
├── package.json         # Зависимости и скрипты
├── tsconfig.json        # Конфигурация TypeScript
├── tsconfig.app.json    # Конфигурация для приложения
├── tsconfig.spec.json   # Конфигурация для тестов
├── .editorconfig        # Настройки редактора
├── .gitignore
└── README.md

Для standalone-проектов:

app.module.ts отсутствует.
Появляется app.config.ts — содержит провайдеры и маршруты.
main.ts вызывает bootstrapApplication.

25. Конфигурационные файлы: полное описание параметров

25.1. `angular.json` — ключевые поля

`projects.<name>.root`

Корневая папка проекта (обычно "" для основного проекта).

`projects.<name>.sourceRoot`

Папка исходного кода (src).

`projects.<name>.prefix`

Префикс для генерируемых селекторов.

`projects.<name>.architect.build.options`

outputPath — выходная директория.
index — путь к index.html.
main — точка входа (main.ts).
polyfills — файл полифиллов.
tsConfig — путь к tsconfig.app.json.
assets — массив путей или объектов { glob, input, output }.
styles — массив путей к CSS/SCSS файлам.
scripts — массив путей к JS-файлам (глобальные скрипты).
allowedCommonJsDependencies — разрешённые CommonJS-библиотеки.
fileReplacements — замена файлов по конфигурации (например, environment.prod.ts → environment.ts).
optimization — объект или boolean:
- scripts, styles, fonts — минификация и объединение.
buildOptimizer — удаляет Angular-specific код для production.
vendorChunk — выносит зависимости в отдельный чанк.
extractLicenses — извлекает лицензии в отдельный файл.
sourceMap — boolean или объект с детализацией (scripts, styles, hidden).
namedChunks — сохраняет читаемые имена чанков (только в dev).
aot — включить AOT-компиляцию.
extractCss — выносит CSS в отдельные файлы.
deployUrl — URL для загрузки ресурсов.
baseHref — значение <base href>.

`projects.<name>.architect.serve.options`

browserTarget — ссылка на конфигурацию сборки.
port — порт dev-сервера.
host — хост (localhost по умолчанию).
ssl — использовать HTTPS.
proxyConfig — путь к файлу прокси (например, proxy.conf.json).
liveReload — перезагрузка при изменении.
hmr — горячая замена модулей.

26. Практические шаблоны

26.1. Шаблон компонента (standalone, OnPush)

import { Component, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `<p>Пример компонента</p>`,
  styles: [`:host { display: block; }`],
  changeDetection: ChangeDetectionStrategy.OnPush,
  standalone: true,
  imports: []
})
export class ExampleComponent {}

26.2. Шаблон сервиса с HttpClient

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

export interface User { id: number; name: string; }

@Injectable({ providedIn: 'root' })
export class UserService {
  private apiUrl = '/api/users';

  constructor(private http: HttpClient) {}

  getAll(): Observable<User[]> {
    return this.http.get<User[]>(this.apiUrl);
  }

  getById(id: number): Observable<User> {
    return this.http.get<User>(`${this.apiUrl}/${id}`);
  }
}

26.3. Шаблон guard

import { Injectable } from '@angular/core';
import { CanActivateFn } from '@angular/router';
import { map } from 'rxjs';
import { AuthService } from './auth.service';

export const authGuard: CanActivateFn = () => {
  const authService = inject(AuthService);
  return authService.isAuthenticated$.pipe(map(isAuth => isAuth || redirectToLogin()));
};

function redirectToLogin(): boolean {
  // перенаправление через Router
  inject(Router).navigate(['/login']);
  return false;
}

26.4. Шаблон interceptor

import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem('token');
  const authReq = token
    ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
    : req;
  return next(authReq);
};

Регистрация в app.config.ts:

provideHttpClient(withInterceptors([authInterceptor]))

`angular.json`

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

Структура файла

Файл angular.json состоит из двух основных разделов:

$schema — ссылка на JSON-схему, обеспечивающую валидацию и автодополнение в редакторах.
cli — глобальные настройки CLI.
projects — объект, содержащий конфигурации отдельных проектов.
defaultProject — имя проекта, используемого по умолчанию при запуске команд без указания имени.

Пример минимальной структуры:

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

1. Глобальные настройки CLI

Раздел cli задаёт поведение Angular CLI для всей рабочей области.

1.1. `analytics`

Идентификатор для отправки анонимной телеметрии в Google. Может быть строкой (UUID) или false.

1.2. `cache`

Настройки кэширования операций CLI:

enabled — включает кэш (true/false).
path — путь к директории кэша (по умолчанию .angular/cache).
environment — стратегия кэширования (local, ci).

1.3. `packageManager`

Менеджер пакетов, используемый по умолчанию: npm, yarn, pnpm.

1.4. `schematicCollections`

Массив коллекций схематиков, используемых по умолчанию при генерации (ng generate). Например:

"schematicCollections": ["@angular-eslint/schematics", "@schematics/angular"]

1.5. `warnings`

Управление предупреждениями:

versionMismatch — предупреждение о несоответствии версий.
typescriptMismatch — предупреждение о несовместимости TypeScript.

2. Проекты (`projects`)

Каждый проект описывается объектом с уникальным ключом (например, "my-app"). Проект может быть приложением, библиотекой или другим типом.

2.1. Общие свойства проекта

projectType — тип проекта: "application" или "library".
root — корневая директория проекта относительно workspace (обычно "" для основного приложения).
sourceRoot — директория с исходным кодом (обычно "src").
prefix — префикс, используемый в селекторах компонентов (например, "app" → <app-header>).
cli — переопределение глобальных настроек CLI для этого проекта.

2.2. Архитектор (`architect`)

Содержит конфигурации для задач: build, serve, test, lint, extract-i18n и других.

2.2.1. `build`

Конфигурация сборки приложения.

Основные параметры:

builder — путь к билдеру (обычно "@angular-devkit/build-angular:browser").
options — настройки по умолчанию.
configurations — именованные наборы настроек (например, production, staging).

Параметры options:

Параметр	Описание
`outputPath`	Директория для собранных файлов (например, `"dist/my-app"`).
`index`	Путь к HTML-файлу (например, `"src/index.html"`).
`main`	Точка входа приложения (`"src/main.ts"`).
`polyfills`	Файл полифиллов (`"src/polyfills.ts"`).
`tsConfig`	Путь к `tsconfig.app.json`.
`assets`	Массив путей или объектов `{ glob, input, output }` для копирования ресурсов.
`styles`	Массив путей к CSS/SCSS файлам. Каждый элемент может быть строкой или объектом с `inject: false`.
`scripts`	Массив путей к JS-файлам (глобальные скрипты).
`allowedCommonJsDependencies`	Массив имён CommonJS-библиотек, разрешённых к использованию.
`aot`	Включает AOT-компиляцию (`true` по умолчанию в production).
`optimization`	Объект или boolean: минификация, объединение, дедупликация.
`buildOptimizer`	Удаляет Angular-specific код для уменьшения размера бандла.
`vendorChunk`	Выносит зависимости в отдельный чанк.
`extractLicenses`	Извлекает лицензии в отдельный файл.
`sourceMap`	Генерация source maps (boolean или объект с детализацией).
`namedChunks`	Сохраняет читаемые имена чанков (только в dev).
`extractCss`	Выносит CSS в отдельные файлы.
`deployUrl`	URL для загрузки ресурсов (например, CDN).
`baseHref`	Значение `<base href="...">` в `index.html`.
`fileReplacements`	Массив замен файлов (например, `environment.prod.ts` → `environment.ts`).

Пример configurations.production:

"production": {
  "budgets": [
    { "type": "initial", "maximumWarning": "500kb", "maximumError": "1mb" }
  ],
  "outputHashing": "all",
  "optimization": true,
  "buildOptimizer": true,
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ]
}

2.2.2. `serve`

Конфигурация dev-сервера.

Параметры:

builder — "@angular-devkit/build-angular:dev-server".
options.browserTarget — ссылка на конфигурацию сборки (например, "my-app:build").
options.port — порт сервера (по умолчанию 4200).
options.host — хост (localhost).
options.ssl — использовать HTTPS.
options.proxyConfig — путь к файлу прокси (например, "proxy.conf.json").
options.liveReload — автоматическая перезагрузка при изменении.
options.hmr — горячая замена модулей.

2.2.3. `test`

Конфигурация unit-тестов.

builder — "@angular-devkit/build-angular:karma".
options.main — точка входа тестов ("src/test.ts").
options.polyfills — полифиллы для тестов.
options.tsConfig — "tsconfig.spec.json".
options.karmaConfig — путь к karma.conf.js.
options.styles, scripts, assets — аналогично build.

2.2.4. `lint`

Конфигурация линтера.

builder — "@angular-eslint/builder:lint" или "@angular-devkit/build-angular:tslint" (устаревшее).
options.lintFilePatterns — массив путей для проверки (например, ["src/**/*.ts", "src/**/*.html"]).

2.2.5. `extract-i18n`

Извлечение текстов для интернационализации.

builder — "@angular-devkit/build-angular:extract-i18n".
options.browserTarget — ссылка на сборку.
options.format — формат файла (xlf, xlf2, xliff, xliff2, json, arb).

3. Мультипроектные рабочие области

Если в projects указано несколько проектов, каждый может быть:

приложением (projectType: "application"),
библиотекой (projectType: "library").

Библиотеки используют билдер "@angular-devkit/build-angular:ng-packagr" и имеют свои особенности:

lib.entryFile — точка входа библиотеки.
lib.styleIncludePaths — пути для импорта стилей.

4. Практические рекомендации

Используйте fileReplacements для управления переменными окружения.
Настройте budgets для контроля размера бандла.
Разделяйте styles и scripts на глобальные и компонентные.
Для SSR добавьте проект с server-билдером.
Для PWA убедитесь, что assets включают manifest.webmanifest и иконки.

Справочник по Angular
1. Архитектурные блоки Angular
- 1.1. Компоненты (Components)
- 1.2. Директивы (Directives)
- 1.3. Pipes (Трубопроводы)
2. Модули (NgModules)
- 2.1. Декоратор @NgModule
- 2.2. Типы модулей
3. Сервисы и внедрение зависимостей (DI)
- 3.1. Создание сервиса
- 3.2. Внедрение зависимостей
4. Маршрутизация (RouterModule)
- 4.1. Конфигурация маршрутов
- 4.2. Свойства маршрута
- 4.3. Активный маршрут (ActivatedRoute)
5. Формы
- 5.1. Шаблонные формы (Template-driven)
- 5.2. Реактивные формы (Reactive Forms)
6. HttpClient
- 6.1. Основные методы
- 6.2. Параметры запроса (HttpParams)
- 6.3. Заголовки (HttpHeaders)
- 6.4. Интерцепторы
7. RxJS и реактивное программирование
- 7.1. Основные операторы
- 7.2. Жизненный цикл подписок
8. Жизненный цикл компонентов и директив
- 8.1. Хуки жизненного цикла
9. Анимации
- 9.1. Основные функции
- 9.2. Пример
10. Интернационализация (i18n)
- 10.1. Маркировка текста
- 10.2. Генерация файлов перевода
- 10.3. Сборка с локалью
11. Производительность и оптимизация
- 11.1. Ленивая загрузка модулей
- 11.2. OnPush Change Detection
- 11.3. TrackBy в *ngFor
- 11.4. Pure Pipes
- 11.5. AOT-компиляция
- 11.6. Code Splitting и Tree Shaking
12. Конфигурация проекта
- 12.1. Файл angular.json
- 12.2. Файл tsconfig.json
- 12.3. Файл package.json
13. Тестирование
- 13.1. Unit-тесты (Jasmine + Karma)
- 13.2. E2E-тесты (ранее Protractor, сейчас Cypress или Playwright)
14. Best Practices
15. Сигналы (Signals) — Angular 16+
- 15.1. Основные функции
- 15.2. Пример использования
- 15.3. Преимущества
16. Автономные компоненты, директивы и pipes (Standalone API)
- 16.1. Объявление автономного компонента
- 16.2. Запуск приложения без AppModule
- 16.3. Преимущества
17. Обнаружение изменений (Change Detection)
- 17.1. Режимы
- 17.2. Управление вручную
18. Работа с DOM и безопасность
- 18.1. Renderer2
- 18.2. Безопасность (Security)
19. Кастомные элементы (Angular Elements)
- 19.1. Настройка
- 19.2. Использование
20. PWA (Progressive Web App)
21. Серверный рендеринг (SSR) и Hydration
- 21.1. Установка
- 21.2. Гидратация
- 21.3. Ограничения
22. Миграция и совместимость
- 22.1. Стратегия обновления
- 22.2. Совместимость с AngularJS (v1.x)
23. Angular CLI: Полный список команд и флагов
- 23.1. Основные команды
- 23.2. Подробные флаги для ng new
- 23.3. Флаги для ng generate
- 23.4. Флаги для ng build
24. Структура проекта Angular
25. Конфигурационные файлы: полное описание параметров
- 25.1. angular.json — ключевые поля
26. Практические шаблоны
- 26.1. Шаблон компонента (standalone, OnPush)
- 26.2. Шаблон сервиса с HttpClient
- 26.3. Шаблон guard
- 26.4. Шаблон interceptor
Структура файла
1. Глобальные настройки CLI
- 1.1. analytics
- 1.2. cache
- 1.3. packageManager
- 1.4. schematicCollections
- 1.5. warnings
2. Проекты (projects)
- 2.1. Общие свойства проекта
- 2.2. Архитектор (architect)
3. Мультипроектные рабочие области
4. Практические рекомендации

Справочник по Angular​

1. Архитектурные блоки Angular​

1.1. Компоненты (Components)​

1.2. Директивы (Directives)​

Типы директив:​

1.3. Pipes (Трубопроводы)​

2. Модули (NgModules)​

2.1. Декоратор @NgModule​

2.2. Типы модулей​

3. Сервисы и внедрение зависимостей (DI)​

3.1. Создание сервиса​

3.2. Внедрение зависимостей​

4. Маршрутизация (RouterModule)​

4.1. Конфигурация маршрутов​

4.2. Свойства маршрута​

4.3. Активный маршрут (ActivatedRoute)​

5. Формы​

5.1. Шаблонные формы (Template-driven)​

5.2. Реактивные формы (Reactive Forms)​

6. HttpClient​

6.1. Основные методы​

6.2. Параметры запроса (HttpParams)​

6.3. Заголовки (HttpHeaders)​

6.4. Интерцепторы​

7. RxJS и реактивное программирование​

7.1. Основные операторы​

7.2. Жизненный цикл подписок​

8. Жизненный цикл компонентов и директив​

8.1. Хуки жизненного цикла​

9. Анимации​

9.1. Основные функции​

9.2. Пример​

10. Интернационализация (i18n)​

10.1. Маркировка текста​

10.2. Генерация файлов перевода​

10.3. Сборка с локалью​

11. Производительность и оптимизация​

11.1. Ленивая загрузка модулей​

11.2. OnPush Change Detection​

11.3. TrackBy в *ngFor​

11.4. Pure Pipes​

11.5. AOT-компиляция​

11.6. Code Splitting и Tree Shaking​

12. Конфигурация проекта​

12.1. Файл angular.json​

12.2. Файл tsconfig.json​

12.3. Файл package.json​

13. Тестирование​

13.1. Unit-тесты (Jasmine + Karma)​

13.2. E2E-тесты (ранее Protractor, сейчас Cypress или Playwright)​

14. Best Practices​

15. Сигналы (Signals) — Angular 16+​

15.1. Основные функции​

15.2. Пример использования​

15.3. Преимущества​

16. Автономные компоненты, директивы и pipes (Standalone API)​

16.1. Объявление автономного компонента​

16.2. Запуск приложения без AppModule​

16.3. Преимущества​

17. Обнаружение изменений (Change Detection)​

17.1. Режимы​

17.2. Управление вручную​

18. Работа с DOM и безопасность​

18.1. Renderer2​

18.2. Безопасность (Security)​

19. Кастомные элементы (Angular Elements)​

19.1. Настройка​

19.2. Использование​

20. PWA (Progressive Web App)​

21. Серверный рендеринг (SSR) и Hydration​

21.1. Установка​

21.2. Гидратация​

21.3. Ограничения​

22. Миграция и совместимость​

22.1. Стратегия обновления​

22.2. Совместимость с AngularJS (v1.x)​

23. Angular CLI: Полный список команд и флагов​

23.1. Основные команды​

23.2. Подробные флаги для ng new​

23.3. Флаги для ng generate​

Справочник по Angular

1. Архитектурные блоки Angular

1.1. Компоненты (Components)

1.2. Директивы (Directives)

Типы директив:

1.3. Pipes (Трубопроводы)

2. Модули (NgModules)

2.1. Декоратор `@NgModule`

2.2. Типы модулей

3. Сервисы и внедрение зависимостей (DI)

3.1. Создание сервиса

3.2. Внедрение зависимостей

4. Маршрутизация (RouterModule)

4.1. Конфигурация маршрутов

4.2. Свойства маршрута

4.3. Активный маршрут (ActivatedRoute)

5. Формы

5.1. Шаблонные формы (Template-driven)

5.2. Реактивные формы (Reactive Forms)

6. HttpClient

6.1. Основные методы

6.2. Параметры запроса (`HttpParams`)

6.3. Заголовки (`HttpHeaders`)

6.4. Интерцепторы

7. RxJS и реактивное программирование

7.1. Основные операторы

7.2. Жизненный цикл подписок

8. Жизненный цикл компонентов и директив

8.1. Хуки жизненного цикла

9. Анимации

9.1. Основные функции

9.2. Пример

10. Интернационализация (i18n)

10.1. Маркировка текста

10.2. Генерация файлов перевода

10.3. Сборка с локалью

11. Производительность и оптимизация

11.1. Ленивая загрузка модулей

11.2. OnPush Change Detection

11.3. TrackBy в *ngFor

11.4. Pure Pipes

11.5. AOT-компиляция

11.6. Code Splitting и Tree Shaking

12. Конфигурация проекта

12.1. Файл `angular.json`

12.2. Файл `tsconfig.json`

12.3. Файл `package.json`

13. Тестирование

13.1. Unit-тесты (Jasmine + Karma)

13.2. E2E-тесты (ранее Protractor, сейчас Cypress или Playwright)

14. Best Practices

15. Сигналы (Signals) — Angular 16+

15.1. Основные функции

15.2. Пример использования

15.3. Преимущества

16. Автономные компоненты, директивы и pipes (Standalone API)

16.1. Объявление автономного компонента

16.2. Запуск приложения без AppModule

16.3. Преимущества

17. Обнаружение изменений (Change Detection)

17.1. Режимы

17.2. Управление вручную

18. Работа с DOM и безопасность

18.1. Renderer2

18.2. Безопасность (Security)

19. Кастомные элементы (Angular Elements)

19.1. Настройка

19.2. Использование

20. PWA (Progressive Web App)

21. Серверный рендеринг (SSR) и Hydration

21.1. Установка

21.2. Гидратация

21.3. Ограничения

22. Миграция и совместимость

22.1. Стратегия обновления

22.2. Совместимость с AngularJS (v1.x)

23. Angular CLI: Полный список команд и флагов

23.1. Основные команды

23.2. Подробные флаги для `ng new`

23.3. Флаги для `ng generate`