Прежде чем мы начнем изучать загрузку в Angular, давайте сначала разберемся, что означает этот термин (загрузка) в мире Angular.

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

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

  1. Индекс.html
  2. Main.ts (также называется точкой входа приложения)
  3. Корневой модуль
  4. Корневой компонент
  5. Шаблон

Всякий раз, когда мы запускаем команду 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