Приложение Angular состоит в основном из компонентов и их HTML-шаблонов. Поскольку компоненты и шаблоны, предоставляемые Angular, не могут быть поняты браузером напрямую, приложениям Angular требуется процесс компиляции, прежде чем они смогут работать в браузере.
Компилятор Angular Ahead-of-Time (AOT) преобразует ваш код Angular HTML и TypeScript в эффективный код JavaScript на этапе сборки до того, как браузер загрузит и запустит этот код. Компиляция вашего приложения в процессе сборки обеспечивает более быструю визуализацию в браузере.
В этом руководстве объясняются концепции AOT, как указать метаданные и применить доступные параметры компилятора для эффективной компиляции ваших приложений с помощью компилятора AOT. .
Компиляция Angular
В Angular есть два способа скомпилировать ваше приложение:
- Just-in-Time (JIT), который компилирует ваше приложение в браузере во время выполнения.
- Ahead-of-Time (AOT), который компилирует ваше приложение во время сборки .
JIT-компиляция используется по умолчанию при запуске команд интерфейса командной строки ng build (только сборка) или ng serve (сборка и обслуживание локально):
`` ng buildng serve``
Для компиляции AOT включите параметр —aot с командой ng build или ng serve:
`` ng build --aotng serve --aot``
Команда ng build с мета-флагом —prod (ng build —prod) по умолчанию компилируется с AOT.
Зачем компилировать с AOT?
- Более быстрый рендеринг
С AOT браузер загружает предварительно скомпилированный версия приложения. Браузер загружает исполняемый код, чтобы он мог немедленно отобразить приложение, не дожидаясь предварительной компиляции приложения.
- Меньше асинхронных запросов
Компилятор встраивает внешние шаблоны HTML и таблицы стилей CSS в JavaScript приложения, устраняя отдельные запросы ajax для этих исходных файлов.
- Меньший размер загрузки фреймворка Angular
Нет необходимости загружать компилятор Angular, если приложение уже скомпилировано. Компилятор составляет примерно половину самого Angular, поэтому его отсутствие значительно снижает полезную нагрузку приложения.
- Обнаруживать ошибки шаблона раньше
Компилятор AOT обнаруживает и сообщает об ошибках привязки шаблона на этапе сборки, прежде чем пользователи смогут их увидеть.
- Повышенная безопасность
AOT компилирует HTML шаблоны и компоненты в файлы JavaScript задолго до того, как они будут переданы клиенту. Без шаблонов для чтения и без рискованной оценки HTML или JavaScript на стороне клиента меньше возможностей для атак с использованием инъекций.
Управление компиляцией приложения
При использовании компилятора Angular AOT вы можете управлять компиляцией приложения двумя способами:
- Предоставляя параметры компилятора шаблона в файле tsconfig.json.
- Указав метаданные Angular.
Указание метаданных Angular
Метаданные Angular сообщают Angular, как создавать экземпляры классов вашего приложения и взаимодействовать с ними. во время выполнения. Компилятор Angular AOT извлекает метаданные для интерпретации частей приложения, которыми должен управлять Angular.
Вы можете указать метаданные с помощью таких декораторов, как @Component () и @Input (), или неявно в объявления конструктора этих декорированных классов.
В следующем примере объект метаданных @Component () и конструктор класса сообщают Angular, как создать и отобразить экземпляр TypicalComponent.
@Component ({selector: 'app-typing', template: ' Типичный компонент для {{data.name}} ')} класса экспорта TypicalComponent {@ Входные () данные: TypicalData; конструктор (private someService: SomeService) {}}
Live Demo:
Это просто фрагмент кода объяснение конкретной концепции и может не иметь вывода
См. Pen WBEWvV от w3resource (@ w3resource) на CodePen.
Компилятор Angular извлекает метаданные один раз и генерирует фабрику для TypicalComponent. Когда ему нужно создать экземпляр TypicalComponent, Angular вызывает фабрику, которая создает новый визуальный элемент, привязанный к новому экземпляру класса компонента с его внедренной зависимостью.
Angular параметры компилятора шаблона
Параметры компилятора шаблона указываются как члены объекта «angularCompilerOptions» в файле tsconfig.json. Укажите параметры компилятора шаблона вместе с параметрами, предоставленными компилятору TypeScript, как показано здесь в этом фрагменте кода примера:
{"compilerOptions": {"experimentalDecorators": true, .. .}, "angularCompilerOptions": {"fullTemplateTypeCheck": true, "preserveWhitespaces": true, ...}}
Интерактивная демонстрация:
Это просто фрагмент кода, объясняющий конкретную концепцию, и может не иметь вывода
См. Pen MdvRyy от w3resource (@ w3resource) на CodePen.
