如何使用 Augury 检查 Angular 8 中的延迟加载

引言

在本文中，我将解释如何使用 Augury Google Chrome 扩展程序检查 Angular 应用程序中延迟加载的流程。当我在项目中实现延迟加载时，我遇到了一些难以检查哪个模块被延迟加载的问题。我了解到了 Augury 扩展程序，它通过图表显示所有模块的延迟加载流程。通过可视化地看到我们的工作完成了一半，如果代码中遗漏了任何模块，我们可以轻松地在 Augury 的路由树中检查它们的路由。

背景

让我们从一个常见的问题开始

什么是 Augury？

Augury 是一个开发者工具扩展程序，用于调试 Google Chrome 浏览器中的 Angular 应用程序。

安装 Augury

您可以从 Chrome 网上应用店安装 Augury，或者简单地在 Google 搜索字段中输入“Augury”，然后按 Enter 键。

https://chrome.google.com/webstore/category/extensions

对于 Windows 和 Linux，请使用 Ctrl + Shift + I。

对于 Mac OS X，请使用 Cmd + Opt + I。

安装 Angular 的步骤

Using the Code

必备组件

• 具备 Angular 的基础知识
• 必须安装 Visual Studio Code
• 必须安装 Angular CLI
• 必须安装 Node JS

步骤 1

让我们使用以下 npm 命令创建一个 Angular 项目

ng new AuguryDemo  

首先，在 VS Code 中打开此项目，并使用以下命令安装 Bootstrap

npm install bootstrap --save   

现在打开 *styles.css* 文件并添加 Bootstrap 文件引用。要在 *styles.css* 文件中添加引用，请添加此行

@import '~bootstrap/dist/css/bootstrap.min.css';  

现在创建两个名为的模块

Companies

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 文件'。将以下代码添加到此文件中

<div class="container">ProductCompany</div>

现在，将以下代码添加到 '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' 文件并添加以下代码

<app-home></app-home>
<router-outlet></router-outlet>

代码完成后，使用 VS Code 中的 "ng serve" 命令运行该项目。

然后使用 "ng serve -o" 命令运行该项目，以编译并在 Google Chrome 浏览器中打开并测试延迟加载。

如果您想检查延迟加载的工作方式以及延迟加载路由流程，那么 Augury 是我们拥有的最好的工具。

单击 Ctrl+F12 以启用调试器，然后单击 Augury 选项卡。

单击路由器树。在这里，它将显示我们模块的路由流程。如果您的项目已实现延迟加载，那么它将用方括号表示。

现在，单击它们的子组件以在单击所有子组件后加载子路由。这将如下图所示

第一个可见的视图是组件树，它显示属于应用程序的已加载组件。

这是我关于 Augury 扩展程序的一篇小文章。您可以查看我的文章并给我一些反馈，这将对我提高技术水平非常有帮助。

“知识通过分享而增长”。

结论

在本文中，我讨论了如何使用 Augury 扩展程序来检查 Angular 8 中延迟加载的流程。

请提供您对本文的宝贵反馈/评论/问题。如果您喜欢并理解了本文，以及我如何改进它，请告诉我。

历史

• 2019 年 12 月 24 日：初始版本