Angular Ivy — это движок рендеринга и компиляции, представленный в Angular начиная с версии 9. Он полностью заменяет предыдущий движок View Engine, при этом оставаясь обратно совместимым. Ivy представляет собой архитектурное переосмысление внутренней работы Angular, которое приносит улучшения в производительности, размерах сборки, отладке, сборке библиотек и гибкости фреймворка.

1. Основные принципы работы Ivy

1.1 Локальная (независимая) компиляция компонентов

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

• повторно использовать уже скомпилированные артефакты;

• ускорить пересборку при изменении одного файла;

• упростить публикацию библиотек (Partial Compilation).

1.2 Инструкции рендеринга на низком уровне

Вместо генерации сложного JavaScript-кода, как в View Engine, Ivy использует низкоуровневые инструкции (ɵɵelementStart, ɵɵtext, ɵɵelementEnd), которые соответствуют манипуляциям с DOM напрямую.

1.3 Tree-shaking и оптимизация

Ivy компилирует компоненты в компактные функции, удаляя неиспользуемые части Angular. Это делает сборку легче и позволяет лучше работать tree-shaking'у (удалению мёртвого кода).

1.4 Переработанная модель зависимостей

Ivy поддерживает Dependency Injection на уровне фабрик компонентов без необходимости связывать всё в одном NgModule. Это способствует развитию Standalone Components.

2. Что происходит при компиляции Ivy

• Angular преобразует шаблон компонента в JavaScript-функции-инструкции рендера.

• Эти функции включаются в результат сборки как часть самого компонента.

• Например, шаблон {{title}} превращается в:

ɵɵtextInterpolate(ctx.title);

• Эти инструкции связывают данные компонента с DOM и обновляют DOM при изменении данных.

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

3.1 Меньше размер бандлов

• Благодаря Tree-shaking удаляются неиспользуемые Angular-фичи.

• Компоненты включают только нужный код.

• Особенно заметно при использовании Standalone компонентов и модулей.

3.2 Более быстрая компиляция и пересборка

• Компилируются только изменённые файлы (локально).

• Используется incremental compilation.

• ng build и ng serve работают быстрее.

3.3 Улучшенная отладка

• Скомпилированные шаблоны читаемы и похожи на исходные.

• Переменные компонента легко доступны в DevTools.

• ng.probe() и другие Angular debugging API остаются работоспособными.

3.4 Улучшения для библиотек

• Возможна публикация в частично скомпилированном виде (Partial Compilation).

• Либы не нужно компилировать для каждой версии Angular отдельно.

• Angular Package Format (APF) стал проще.

3.5 Поддержка Standalone Components

• Ivy позволяет использовать компоненты без необходимости включения в NgModule.

• Улучшает модульность и упрощает архитектуру.

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

@Component({
standalone: true,
template: \`<p>Hello</p>\`,
})
export class HelloComponent {}

3.6 Улучшенная совместимость с dynamic import()

• Ivy поддерживает import() для динамической загрузки компонентов и модулей.

• Это делает ленивую загрузку более гибкой и универсальной.

const { MyComponent } = await import('./my.component');

3.7 Быстрее SSR и меньшая нагрузка на сервер

• Компактные инструкции рендеринга ускоряют генерацию HTML.

• Более эффективный рендер в Angular Universal.

4. Сравнение с View Engine

5. Как включается Ivy

• Начиная с Angular 9 — Ivy включён по умолчанию.

• В tsconfig.app.json:

"angularCompilerOptions": {
"enableIvy": true
}

• Для библиотек можно использовать "compilationMode": "partial".

6. Влияние на ng update

Ivy предоставляет более гибкую архитектуру:

• Обновления Angular становятся менее разрушительными.

• Можно использовать компоненты и директивы вне модулей.

• Позволяет разрабатывать Angular-приложения с большей модульностью.

7. Как проверить, что проект использует Ivy

• Проверить tsconfig.app.json, enableIvy: true.

• Убедиться, что Angular версия ≥ 9.

• В сборке отсутствует ngfactory-файлы (если они есть — используется View Engine).

8. Ограничения и обратная совместимость

• Ivy обратно совместим с View Engine.

• Можно использовать библиотеки, скомпилированные под старый движок.

• Angular CLI автоматически обрабатывает это при сборке.

9. Angular Compatibility Compiler (ngcc)

Для совместимости с View Engine-библиотеками Ivy использует ngcc — инструмент, переписывающий код из View Engine в Ivy-совместимую форму. Это временная мера, пока все библиотеки не перейдут на Ivy.

10. Влияние на runtime производительность

Хотя основная цель Ivy — уменьшение бандлов и улучшение DX (Developer Experience), он также:

• ускоряет первое отображение;

• снижает нагрузку на память;

• делает рендеринг компонентов более эффективным, особенно при обновлениях данных.

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

Ivy открывает возможности для будущих улучшений, таких как:

• Микрофронтенды (Microfrontends);

• Angular with ESM / Vite / ESBuild;

• Runtime compilation плагинов;

• Meta-programming (например, декларативное создание компонентов через JSON).

Таким образом, Ivy — это не просто оптимизация, а фундаментальное изменение в архитектуре Angular, ориентированное на производительность, модульность и удобство разработки.