Компилятор Ahead-of-Time (AOT)

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

Компилятор Angular Ahead-of-Time (AOT) преобразует ваш код Angular HTML и TypeScript в эффективный код JavaScript на этапе сборки, прежде чем браузер загрузит и выполнит этот код. Компиляция приложения во время процесса сборки обеспечивает более быструю визуализацию в браузере.

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

Угловая компиляция

В Angular есть два способа скомпилировать ваше приложение:

1. Just-in-Time (JIT), который компилирует ваше приложение в браузере во время выполнения.
2. Ahead-of-Time (AOT), которая компилирует ваше приложение во время сборки.

JIT-компиляция используется по умолчанию при выполнении команд CLI ng build (только сборка) или ng serve (сборка и обслуживание локально):

```
ng build
ng serve
```

Для компиляции AOT включите параметр --aot в команду ng build или ng serve:

```
ng build --aot
ng serve --aot
```

Команда ng build с мета-флагом --prod (ng build --prod) компилируется с AOT по умолчанию.

Зачем компилировать с AOT?

• Более быстрый рендеринг

С помощью AOT браузер загружает предварительно скомпилированную версию приложения. Браузер загружает исполняемый код, поэтому он может визуализировать приложение немедленно, не дожидаясь его предварительной компиляции.

• Меньше асинхронных запросов

Компилятор вставляет внешние шаблоны HTML и таблицы стилей CSS в JavaScript приложения, исключая отдельные запросы Ajax для этих исходных файлов.

• Меньший угловой размер загрузки

Нет необходимости скачивать Angular-компилятор, если приложение уже скомпилировано. Компилятор составляет примерно половину самого Angular, поэтому его пропуск значительно снижает полезную нагрузку приложения.

• Обнаружить ошибки шаблона ранее

Компилятор AOT обнаруживает и сообщает об ошибках привязки шаблона на этапе сборки, прежде чем пользователи смогут их увидеть.

• Лучшая безопасность

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

Управление компиляцией приложения

Когда вы используете компилятор Angular AOT, вы можете управлять компиляцией приложения двумя способами:

• Предоставляя параметры компилятора шаблона в файле tsconfig.json.
• Указывая угловые метаданные.

Указание угловых метаданных

Метаданные Angular говорят Angular, как создавать экземпляры классов вашего приложения и взаимодействовать с ними во время выполнения. Компилятор Angular AOT извлекает метаданные для интерпретации частей приложения, которыми должен управлять Angular.

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

В следующем примере объект метаданных @Component () и конструктор класса сообщают Angular, как создавать и отображать экземпляр TypicalComponent.

@Component({
  selector: 'app-typical',
  template: '<div>A typical component for {{data.name}}</div>'
)}
export class TypicalComponent {
  @Input() data: TypicalData;
  constructor(private someService: SomeService) { }
}

Демонстрация в реальном времени:

См. Перо WBEWvV от w3resource ( @ w3resource ) в CodePen .

Компилятор Angular извлекает метаданные один раз и генерирует фабрику для TypicalComponent. Когда ему нужно создать экземпляр TypicalComponent, Angular вызывает фабрику, которая создает новый визуальный элемент, связанный с новым экземпляром класса компонента с его внедренной зависимостью.

Варианты компилятора угловых шаблонов

Параметры компилятора шаблона указываются как члены объекта angularCompilerOptions в файле tsconfig.json. Укажите параметры компилятора шаблона вместе с параметрами, предоставленными компилятору TypeScript, как показано здесь в следующем примере кода:

{
  "compilerOptions": {
    "experimentalDecorators": true,
              ...
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "preserveWhitespaces": true,
              ...
  }
}

Демонстрация в реальном времени:

Смотрите перо MdvRyy от w3resource ( @ w3resource ) на CodePen .

Предыдущая: Зависимости рабочей области от npm
Далее: поддержка браузера