Вступление
В этой статье я собираюсь объяснить, как проверить поток отложенной загрузки в приложении Angular, используя расширение Augury Google Chrome. Когда я реализовывал отложенную загрузку в своем проекте, я столкнулся с некоторыми трудностями при проверке, какой модуль загружен с отложенной загрузкой. Я узнал о расширении Augury, которое показывает ленивую загрузку всех модулей со схемой. Видя визуально, что наша работа наполовину выполнена, если какие-либо модули остались в коде, мы можем легко проверить их маршрутизацию в дереве маршрутов Авгурия.
Установка Авгурия
Вы можете установить Augury из Интернет-магазина Chrome .
Для Windows и Linux, используйте Ctrl + Shift + I .
Для Mac OS X используйте Cmd + Opt + I .
Вам также может понравиться:
Real-World Angular Series, часть 8a: отложенная загрузка, развертывание производства, SSL .
Шаги по установке угловых
Предпосылки
- Базовые знания по Angular .
- Код Visual Studio должен быть установлен.
- Угловой CLI должен быть установлен.
- Node.js должен быть установлен.
Шаг 1
Давайте создадим проект Angular, используя следующую команду npm:
Оболочка
1
ng new AuguryDemo
Сначала откройте этот проект в VS Code и установите Bootstrap с помощью следующей команды.
Оболочка
xxxxxxxxxx
1
npm install bootstrap --save
Теперь откройте файл styles.css и добавьте ссылку на файл Bootstrap. Чтобы добавить ссылку в файл styles.css , добавьте эту строку:
JavaScript
xxxxxxxxxx
1
@import '~bootstrap/dist/css/bootstrap.min.css';
Теперь создадим два модуля по имени, Companiesи Product:
Компании
Оболочка
xxxxxxxxxx
1
ng g m Companies --routing
Товар
Оболочка
xxxxxxxxxx
1
ng g m product --routing
Теперь создайте несколько демонстрационных компонентов в модуле компании с помощью следующей команды:
JavaScript
xxxxxxxxxx
1
ng g c company1
JavaScript
xxxxxxxxxx
1
ng g c company2
Теперь откройте файл companies-routing.module.ts и добавьте следующий код:
JavaScript
xxxxxxxxxx
1
import { NgModule } from '@angular/core';
2
import { Routes, RouterModule } from '@angular/router';
3
import { Compnay1Component } from './compnay1/compnay1.component';
4
import { Compnay2Component } from './compnay2/compnay2.component';
5
import { CompnayComponent } from './compnay.component';
6
const routes: Routes = [
7
{
8
path:'Compnay1',component:Compnay1Component
9
},
10
11
{
12
path:'Compnay2',component:Compnay2Component
13
},
14
15
{
16
path:'Compnay',component:CompnayComponent
17
}
18
];
19
20
@NgModule({
21
imports: [RouterModule.forChild(routes)],
22
exports: [RouterModule]
23
})
24
export class CompaniesRoutingModule { }
Теперь создайте несколько демонстрационных компонентов в модуле Product с помощью следующих команд:
Для продукта:
Оболочка
xxxxxxxxxx
1
ng g c product1
Оболочка
xxxxxxxxxx
1
ng g c product2
Теперь откройте файл Product-routing.module.ts и добавьте в него следующий код:
JavaScript
xxxxxxxxxx
1
import { NgModule } from '@angular/core';
2
import { Routes, RouterModule } from '@angular/router';
3
import { Product1Component } from './product1/product1.component';
4
import { Product2Component } from './product2/product2.component';
5
import { ProductComponent } from './product.component';
6
const routes: Routes = [
7
{path:'Product1',component:Product1Component},
8
{path:'Product2',component:Product2Component},
9
{path:'prod',component:ProductComponent},
10
];
11
12
@NgModule({
13
imports: [RouterModule.forChild(routes)],
14
exports: [RouterModule]
15
})
16
export class ProductRoutingModule { }
Теперь добавьте новый компонент Homeи откройте файл home.component.html . Добавьте следующий код в этот файл:
HTML
xxxxxxxxxx
1
<div class="container">
2
<button style="margin: 10px;" class="btn btn-info" (click)="product()" >Product</button>
3
<button style="margin: 10px;" class="btn btn-info" (click)="company()">Company</button>
4
</div>
Теперь добавьте следующий код в файл home.component.ts :
JavaScript
xxxxxxxxxx
1
import { Component, OnInit } from '@angular/core';
2
import { Router } from '@angular/router';
3
@Component({
4
selector: 'app-home',
5
templateUrl: './home.component.html',
6
styleUrls: ['./home.component.css']
7
})
8
export class HomeComponent implements OnInit {
9
10
constructor(private router:Router) { }
11
12
ngOnInit() {
13
}
14
product()
15
{
16
this.router.navigate([`/product/prod`]);
17
}
18
company()
19
{
20
this.router.navigate([`/company/Compnay`]);
21
}
22
}
После этого откройте файл app-routing.module.ts и добавьте следующий код:
JavaScript
xxxxxxxxxx
1
import { NgModule } from '@angular/core';
2
import { Routes, RouterModule } from '@angular/router';
3
4
5
const routes: Routes = [
6
{
7
path: 'product',
8
loadChildren: './product/product.module#ProductModule'
9
},
10
{
11
path: 'company',
12
loadChildren: './companies/companies.module#CompaniesModule'
13
},
14
];
15
16
@NgModule({
17
imports: [RouterModule.forRoot(routes)],
18
exports: [RouterModule]
19
})
20
export class AppRoutingModule { }
Теперь откройте файл app.module.ts и добавьте следующий код:
JavaScript
xxxxxxxxxx
1
import { BrowserModule } from '@angular/platform-browser';
2
import { NgModule } from '@angular/core';
3
4
import { AppRoutingModule } from './app-routing.module';
5
import { AppComponent } from './app.component';
6
import { HomeComponent } from './home/home.component';
7
8
@NgModule({
9
declarations: [
10
AppComponent,
11
HomeComponent
12
],
13
imports: [
14
BrowserModule,
15
AppRoutingModule
16
],
17
providers: [],
18
bootstrap: [AppComponent]
19
})
20
export class AppModule { }
Откройте файл app.component.html и добавьте следующий код:
HTML
xxxxxxxxxx
1
<app-home></app-home>
2
<router-outlet></router-outlet>
Теперь запустите проект с помощью ng serveкоманды в VS Code
Затем запустите этот проект, ng serve -o чтобы скомпилировать код, открыть браузер Chrome и протестировать отложенную загрузку.
Если вы хотите проверить, как работает отложенная загрузка и как выполняется маршрутизация отложенной загрузки, то Augury — лучший инструмент, который у нас есть.
Нажмите Ctrl + F12, чтобы включить отладчик, и нажмите на вкладку Augury.
Нажмите на дерево маршрутизатора. Здесь он покажет маршрут маршрута наших модулей. Если в вашем проекте реализована отложенная загрузка, он будет представлен в квадратных скобках.
Теперь нажмите на их дочерние компоненты, чтобы загрузить дочерний маршрут после нажатия на все дочерние компоненты. Это будет показано как на картинке ниже:
Первое видимое представление — это дерево компонентов, которое показывает загруженные компоненты, принадлежащие приложению.
Это моя маленькая статья о продлении Авгурия. Вы можете проверить мою предыдущую статью и дать мне некоторую обратную связь, которая была бы очень полезна для меня для улучшения в технологической области.
«Знание увеличивается благодаря обмену».
Заключение
В этой статье я рассмотрел, как использовать Augury Extention для проверки потока отложенной загрузки в Angular 8.
Пожалуйста, дайте ваши ценные отзывы / комментарии / вопросы по этой статье. Дайте мне знать, если вам понравилась и поняла эту статью и как я могу ее улучшить.