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

介绍 在这篇文章中，我将解释如何使用Augury谷歌Chrome扩展检查Angular应用程序中的延迟加载流。当我在我的项目中实现延迟加载时，我遇到了检查哪个模块是延迟加载的困难。我了解了Augury extension，它通过图表显示了所有模块的延迟加载流程。通过可视化地看到我们的工作完成了一半，如果代码中还有模块，那么我们可以很容易地检查它们在Augury的路由树中的路由。 背景 让我们从一个常见的问题开始: 占卜是什么? Augury是一个开发工具扩展，用于在谷歌Chrome浏览器中调试Angular应用程序。 安装占卜 你可以从chrome网上商店安装Augury，或者在搜索框中输入谷歌“Augury”，然后回车。 https://chrome.google.com/webstore/category/extensions 对于Windows和Linux，使用Ctrl + Shift + I。 对于Mac OS X，使用Cmd + Opt + I。 安装Angular的步骤 使用的代码 先决条件 基本了解angular visual Studio的代码必须安装angular CLI必须安装节点JS必须安装 步骤1 让我们使用下面的npm命令来创建一个Angular项目: 隐藏,复制Code

ng new AuguryDemo  

首先，在VS代码中打开这个项目，使用以下命令安装bootstrap: 隐藏,复制Code

npm install bootstrap --save   

现在打开styles.css文件并添加引导文件引用。要在styles.css文件中添加一个引用，请添加这一行: 隐藏,复制Code

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

现在创建两个模块，命名为: 公司 隐藏,复制Code

ng g m Companies --routing     

产品 隐藏,复制Code

ng g m product --routing   

现在使用给定的命令在这两个模块中创建一些演示组件。 对于企业来说, 隐藏,复制Code

ng g c company1  

隐藏,复制Code

ng g c company2   

现在companies-routing.module开放。ts文件，并在此文件中添加以下代码: 隐藏,复制Code

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 { }  

现在使用给定的命令在这两个模块中创建一些演示组件。 产品: 隐藏,复制Code

ng g c product1  

隐藏,复制Code

ng g c product2   

现在开放的Product-routing.module。，并在此文件中添加以下代码: 隐藏,复制Code

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文件'。在这个文件中添加以下代码: 隐藏,复制Code

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

现在，在'home.component.ts'文件中添加以下代码: 隐藏,复制Code

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。并添加以下代码: 隐藏,复制Code

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。并添加以下代码: 隐藏,复制Code

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'文件，添加以下代码: 隐藏,复制Code

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

完成代码后，在VS代码中使用“ng serve”命令运行项目。 然后使用“ng serve -o”在谷歌chrome浏览器中编译并打开这个项目，测试延迟加载。 如果您想检查延迟加载如何工作以及延迟加载路由流，那么Augury是我们拥有的最佳工具。 单击Ctrl+F12启用调试器，然后单击Augury选项卡。 点击路由器树。这里，它将显示模块的路由流。如果您的项目实现了延迟加载，那么它将用方括号表示。 现在，在单击所有子组件之后，单击它们的子组件以加载子路由。如下图所示: 第一个可见的视图是组件树，它显示了加载的属于应用程序的组件。 这是我的一篇关于占卜延伸的小文章。你可以看看我的文章，给我一些反馈，这对我在技术领域的提高非常有用。 “知识通过分享而增长”。 结论 在这篇文章中，我讨论了如何使用Augury Extension检查Angular 8中的延迟加载流。 请对这篇文章给出你有价值的反馈/评论/问题。让我知道如果你喜欢和理解这篇文章，我可以如何改进它。 历史 2019年12月24日:初版 本文转载于：http://www.diyabc.com/frontweb/news15912.html