在开发Angular应用时，经常需要实现模块的懒加载以优化应用的加载时间。但是，如何验证哪些模块是懒加载的呢？这里，介绍了一个非常有用的工具——Augury，它是一个用于在Google Chrome浏览器中调试Angular应用的开发者工具扩展。通过Augury，可以直观地看到所有模块的懒加载流程图。如果代码中有任何模块没有实现懒加载，可以通过Augury的路由树轻松检查它们的路由。
首先，让从一个问题开始：什么是Augury？ Augury是一个开发者工具扩展，用于在Google Chrome浏览器中调试Angular应用。
可以通过Chrome网上应用店安装Augury，或者在Google搜索栏中输入"Augury"，然后按Enter键。 对于Windows和Linux，使用快捷键Ctrl + Shift + I打开开发者工具。 对于Mac OS X，使用快捷键Cmd + Opt + I。
需要具备Angular基础知识，并且需要安装Visual Studio Code、Angular CLI和Node JS。
使用以下npm命令创建一个Angular项目：
ng new AuguryDemo
首先，打开这个项目，在VS Code中使用以下命令安装Bootstrap：
npm install bootstrap --save
现在打开styles.css文件，并添加Bootstrap文件引用。在styles.css文件中添加以下行：
@import '~bootstrap/dist/css/bootstrap.min.css';
现在创建两个模块：
ng g m Companies --routing
ng g m product --routing
然后使用给定的命令在这两个模块中创建一些演示组件。
对于Companies模块：
ng g c company1
ng g c company2
现在打开companies-routing.module.ts文件，并在该文件中添加以下代码：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Compnay1Component } from './compnay1/compnay1.component';
import { Compnay2Component } from './compnay2/compnay2.component';
import { CompnayComponent } from './compnay.component';
const routes: Routes = [
{ path: 'Compnay1', component: Compnay1Component },
{ path: 'Compnay2', component: Compnay2Component },
{ path: 'Compnay', component: CompnayComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CompaniesRoutingModule { }
现在为Product模块创建一些演示组件：
ng g c product1
ng g c product2
现在打开Product-routing.module.ts文件，并在该文件中添加以下代码：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Product1Component } from './product1/product1.component';
import { Product2Component } from './product2/product2.component';
import { ProductComponent } from './product.component';
const routes: Routes = [
{ path: 'Product1', component: Product1Component },
{ path: 'Product2', component: Product2Component },
{ path: 'prod', component: ProductComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class ProductRoutingModule { }
现在，添加一个新的组件'Home'并打开home.component.html文件。在该文件中添加以下代码：
ProductCompany
现在，在home.component.ts文件中添加以下代码：
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor(private router: Router) { }
ngOnInit() {
}
product()
{
this.router.navigate(['/product/prod']);
}
company()
{
this.router.navigate(['/company/Compnay']);
}
}
然后，打开app-routing.module.ts文件并添加以下代码：
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: 'product', loadChildren: './product/product.module#ProductModule' },
{ path: 'company', loadChildren: './companies/companies.module#CompaniesModule' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
现在打开app.module.ts文件并添加以下代码：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
打开app.component.html文件并添加以下代码：
代码完成后，使用"ng serve"命令在VS Code中运行项目。 然后使用"ng serve -o"命令编译并在Google Chrome浏览器中打开项目，测试懒加载。 如果想检查懒加载是如何工作的以及懒加载路由流程，那么Augury是最好的工具。 按Ctrl+F12启用调试器，然后点击Augury标签。 点击路由树。在这里，它将显示模块的路由流程。如果项目实现了懒加载，那么它将用方括号表示。 现在，点击它们的子组件以在点击所有子组件后加载子路由。这将像下面的图片一样显示： 首先看到的是组件树，它显示了属于应用程序的已加载组件。
这是关于Augury扩展的一篇小文章。可以查看文章并给一些反馈，这对来说非常有帮助，以便在技术领域有所提高。 “知识通过分享而增长”。