Прежде чем мы начнем изучать загрузку в Angular, давайте сначала разберемся, что означает этот термин (загрузка) в мире Angular.
В экосистеме Angular процесс загрузки index.html, модуля уровня приложения и компонента уровня приложения называется начальной загрузкой или загрузка приложения.
Приведенная ниже последовательность файлов описывает порядок, в котором работает начальная загрузка.
- Индекс.html
- Main.ts (также называется точкой входа приложения)
- Корневой модуль
- Корневой компонент
- Шаблон
Всякий раз, когда мы запускаем команду ng serve или ng build, angular cli просматривает файл angular.json, в частности для узла "build". Этот объект будет хранить всю связанную информацию о процессе выполнения.
Ниже приводится объяснение некоторых важных тегов.
- outputPath – выходной каталог, в котором будет храниться версия сборки приложения.
- index – файлы index.html, самый первый файл, который будет обслуживаться.
- main -> файл main.ts является точкой входа приложения, которое будет загружать приложение внутри браузера.
Файл index.html является первым файлом, который будет серверным, он имеет только элемент ‹app-root›внутри телатег. Во время выполнения в браузере main.ts отвечает за загрузку наших угловых приложений. Файл main.ts состоит из нескольких операторов импорта, отвечающих за обслуживание нашего приложения в браузере. Внутри файла main.ts у нас есть строка platformBrowserDynamic().bootstrapModule(AppModule). BootstrapModule принимает один параметр, и это наш корневой модуль, в данном случае это AppModule.
Внутренне bootstrapModuleсоздает экземпляр компилятора JIT Compiler, где он просматривает все компоненты, директивы и каналы, объявленные в AppModule. Декоратор @NgModule и другие функциональные модули, импортированные в AppModule
Теперь компиляция достигает AppModule,внутри AppModule у нас есть декоратор @NgModule({}), который содержит точку входа компонента внутри объект метаданных начальной загрузки, здесь мы указываем компонент, который будет отображаться первым, и шаблон этого компонента будет внедрен в файл index.html.
Примечание. Вышеприведенная информация — это всего лишь суть, объясняющая, как за кулисами работает начальная загрузка. Хотя каждый файл, с которым мы столкнулись в этой статье, может иметь отдельное обсуждение.
Для получения дополнительной справки: https://angular.io/guide/bootstrapping