Angular Ivy

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

Обзор
Преимущества Angular Ivy:

Более быстрая сборка за счет того, что зависимые компоненты и директивы теперь не включаются в зависящий компонент, вместо этого в зависящем компоненте указываются ссылки на зависимости, Таким образом, при изменении одной из зависимостей нужно перекомпилировать только ее, а не весь использующий ее код;
Меньший размер файлов сборки из-за преобразования всех декораторов в статические методы класса и большей подверженности файлов процессу под названием Tree Shaking;
Усовершенствованная отладка;
Использование динамической загрузки.
Важно

Angular Ivy работает только с AoT-компиляцией и начиная с Angular 9 используется по умолчанию.

Для активации/деактивации Angular Ivy в уже созданном проекте, необходимо в файле tsconfig.app.json изменить значение параметра enableIvy в блоке angularCompilerOptions.

tsconfig.app.json


{
"angularCompilerOptions": {
"enableIvy": true
}
}
Важно

Приложения, использующие Angular Ivy, могут беспрепятственно использовать библиотеки, скомпилированные с помощью View Engine.

Отладка
Рассмотрим на примере, как в Angular Ivy изменился формат вывода ошибок.

app.component.ts


import { Component } from '@angular/core'

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
title = 'Angular ivy'
}
app.component.html


<h1>{{title}}</h1>

<select (change)="selectValueChanged($event)">
<option value="1">Faster compilation</option>
<option value="2">Small bundle size</option>
<option value="3">Informative debugging</option>
</select>
Здесь на событие изменения значения выпадающего списка вызывается несуществующий метод selectValueChanged(), что инициирует возникновение ошибки.

Вывод ошибки с View Engine.

Вывод ошибки с View Engine

Вывод ошибки c Angular Ivy.

Вывод ошибки c Angular Ivy

Динамическая загрузка
Angular Ivy поддерживает динамический импорт ES6. В View Engine все асинхронно подгружаемые модули загружаются следующим образом.


const routes: Routes = [
{
path: ':lang',
children: [
{
path: 'auth',
loadChildren: './auth/auth.module#AuthModule',
},
],
},
]
Загрузка в Angular Ivy выглядит так.


const routes: Routes = [
{
path: ':lang',
children: [
{
path: 'auth',
loadChildren: () =>
import('./auth/auth.module').then(
({ AuthModule }) => AuthModule
),
},
],
},
]
Динамический импорт также дает возможность загружать отдельные компоненты без их объявления в модуле.

app.module.ts


@NgModule({
declarations: [AppComponent],
imports: [BrowserModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
app.component.ts


import {
Component,
ɵrenderComponent,
Injector,
} from '@angular/core'

import { ChildComponent } from './child.component'

@Component({
selector: 'app-root',
template: `
<h1>Root component</h1>

<button (click)="loadChild()">
Load ChildComponent
</button>
`,
})
export class AppComponent {
constructor(private injector: Injector) {}

loadChild() {
import('./child.component').then(
({ ChildComponent }) => {
ɵrenderComponent(ChildComponent, {
host: 'app-root',
injector: this.injector,
})
}
)
}
}
child.component.ts


import { Component } from '@angular/core'

@Component({
selector: 'app-child',
template: `
<h1>Dynamically loaded "ChildComponent"</h1>
`,
})
export class ChildComponent {}
Для отображения загружаемого компонента используется функция ɵrenderComponent(), которая первым параметром принимает тип компонента, а вторым - объект конфигурации со следующими свойствами:

host - селектор компонента, в который будет загружен подгруженный компонент;
injector - экземпляр текущего объекта injector, который указывается, только если подгружаемый компонент имеет зависимости.