Перейти к содержанию

Компиляция

Поскольку разработка ведется на TypeScript, то для запуска в браузере приложение должно быть предварительно обработано компилятором Angular, который конвертирует код исходных файлов в исполняемый JavaScript.

Механизм Angular compile реализован в двух режимах:

  • JIT-компиляция (Just-in-TIme);
  • AOT-компиляция (Ahead-of-Time).

В режиме JIT (используется по умолчанию) приложение компилируется в момент его запуска в браузере.

В режиме AOT компиляция происходит в момент сборки приложения. Для этого при выполнении некоторых CLI-команд необходимо указать флаг --aot.

ng serve --aot
ng build --aot

При сборке приложения с флагом --prod AOT-компиляция используется по умолчанию.

Преимущества Angular AOT:

  • Быстрая загрузка в браузере. Меньше времени тратится за счет того, что:
  • Приложение компилируется до загрузки в браузер;
  • В сборку не включается компилятор Angular и, как следствие, конечные файлы имеют меньший размер;
  • Выполняется меньше AJAX-запросов на получение исходных HTML- и CSS-файлов, поскольку они включаются в строковом виде в файлы JavaScript.
  • Обнаружение ошибок при сборке. Имеется возможность исправить все ошибки до запуска приложения в режиме эксплуатации.
  • Повышенная безопасность.Поскольку HTML- и CSS-файлы включаются в процессе Angular compile в файлы JavaScript, то нет возможности просмотреть шаблоны, что снижает риск осуществления атак.

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

Компиляцию Angular AOT можно разделить на три стадии:

  • Анализ. В процессе анализа формируются данные, необходимые для генерации кода. Это файлы определения типов (*.d.ts) и файлы, содержащие информацию о метаданных, указанных в декораторах (*.metadata.json). Также процесс анализа включает в себя некоторую оптимизацию кода.
  • Генерация кода. На этой стадии интерпретируются все файлы, сгенерированные на стадии анализа. Отдельно стоит упомянуть проверку модификаторов доступа свойств классов. Например, если свойство определено как private и используется в шаблоне, то будет сгенерирована соответствующая ошибка.
  • Валидация. На стадии валидации компилятор шаблонов использует компилятор TypeScript для проверки правильности использования свойств и методов компонентов и сервисов в шаблонах.

Как видно, AOT-компиляция имеет гораздо больше преимуществ перед JIT-компиляцией. Но сборка Angular AOT занимает гораздо больше времени. Поэтому рекомендуется при разработке использовать режим JIT, а для сборки версии и последующего ее развертывания - AOT.