如何在 Angular 中使用懒加载路由

简介

延迟加载 是一种限制加载用户当前需要的模块的方法。这可以提高应用程序的性能并减小初始捆绑包大小。

默认情况下,Angular 使用 急切加载 来加载模块。这意味着在应用程序运行之前必须加载所有模块。虽然这对许多用例可能是足够的,但在某些情况下,这种加载时间开始影响性能。

在本文中,您将在 Angular 应用程序中使用延迟加载路由。

先决条件

要完成本教程,您需要:

  • 本地安装 Node.js,您可以按照《如何安装 Node.js 并创建本地开发环境》中的步骤进行操作。
  • 一些设置 Angular 项目的熟悉程度。

本教程已使用 Node v16.4.0、npm v7.19.0、@angular/core v12.1.0 和 @angular/router v12.1.0 进行验证。

步骤 1 – 设置项目

延迟加载的路由需要位于根应用程序模块之外。您将希望将延迟加载的功能放在功能模块中。

首先,让我们使用 Angular CLI 创建一个带有 Angular Router 的新项目:

ng new angular-lazy-loading-example --routing --style=css --skip-tests

然后导航到新项目目录:

cd angular-lazy-loading-example

让我们创建一个新的功能模块:

ng generate module shop --route shop --module app.module

现在让我们还在我们的 shop 功能模块中创建 3 个组件:

第一个将是 cart 组件:

ng generate component shop/cart

第二个将是 checkout 组件:

ng generate component shop/checkout

第三个将是 confirm 组件:

ng generate component shop/confirm

所有三个组件将位于 shop 目录中。

此时,您应该有一个带有 shop 模块和 3 个组件的新 Angular 项目。

步骤 2 – 使用 loadChildren

在您的主路由配置中,您将希望执行类似以下操作:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';const routes: Routes = [{ path: 'shop', loadChildren: () => import('./shop/shop.module').then(m => m.ShopModule) },
];@NgModule({imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }

新的 Angular 8 中,loadChildren 期望一个使用动态导入语法来导入您的延迟加载模块的函数,只有在需要时才会导入。动态导入是基于 Promise 的,并且可以让您访问模块,其中可以调用模块的类。

步骤 3 – 在功能模块中设置路由配置

现在,剩下要做的就是配置特定于功能模块的路由。

以下是一个示例:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';const routes: Routes = [{ path: '', component: CartComponent },{ path: 'checkout', component: CheckoutComponent },{ path: 'confirm', component: ConfirmComponent },
];@NgModule({imports: [RouterModule.forChild(routes)],exports: [RouterModule]
})
export class ShopRoutingModule { }

最后,在功能模块本身中,您将使用 RouterModuleforChild 方法而不是 forRoot 来包含您的路由:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';import { ShopRoutingModule } from './shop-routing.module';
import { ShopComponent } from './shop.component';
import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';@NgModule({declarations: [ShopComponent,CartComponent,CheckoutComponent,ConfirmComponent,],imports: [CommonModule,ShopRoutingModule]
})
export class ShopModule { }

现在,您可以使用 routerLink 指令导航到 /shop/shop/checkout/shop/confirm,并且在首次导航到这些路径时将加载模块。

在终端中,启动服务器:

ng serve

这将生成一个 main.js 文件和一个 src_app_shop_shop_module_ts.js 文件:

初始块文件            | 名称         |      大小
vendor.js            | vendor       |   2.38 MB
polyfills.js         | polyfills    | 128.58 kB
main.js              | main         |  57.18 kB
runtime.js           | runtime      |  12.55 kB
styles.css           | styles       | 119 字节| 初始总计     |   2.58 MB延迟块文件           | 名称         |      大小
src_app_shop_shop_module_ts.js | -             |  10.62 kB

接下来,使用浏览器访问 localhost:4200

通过打开浏览器的 DevTools 并查看网络选项卡来验证延迟加载是否起作用。当应用程序最初在应用程序根路径加载时,您不应该观察到延迟块文件。当您导航到 /shop 等路径时,您应该观察到 src_app_shop_shop_module_ts.js

您的应用程序现在支持延迟加载。

结论

在本文中,您学习了如何在 Angular 应用程序中使用惰性加载路由。

继续学习测试带有依赖项的组件、测试服务以及使用模拟、存根和间谍。

您也可以参考官方文档,获取更多关于惰性加载的信息。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/689820.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pdoc:生成优雅Python API文档的工具

Pdoc:生成优雅Python API文档的工具 在开发Python项目时,文档是至关重要的。它不仅提供了对代码功能和用法的了解,还为其他开发人员提供了参考和使用的便利。Pdoc是一个流行的文档生成工具,专为生成Python API文档而设计。本文将介…

【NextJS】整个项目跨域配置

项目跨域是指:本项目作为被访问方,由另一个项目对本项目发起fetch等动作获取数据页面数据 实验环境: next: 14.1.0react: ^18 配置文件:next.config.[mjs|js|ts] 假定原始范本内容: /** type {import(next).NextCon…

STM32 USART入门指南

对于刚开始涉足STM32微控制器编程的初学者来说,掌握其通用同步/异步接收/发送器(USART)功能是一项基本且必要的技能。USART在嵌入式系统中广泛用于串行通信。本指南旨在简明扼要地介绍USART的基础概念和基本步骤,并提供一个简单的…

扯淡的DevOps,我们开发根本不想做运维!

引言 最初考虑引用“ DevOps 已死,平台工程才是未来”作为标题,但这样的表达可能太过于绝对。最终,决定用了“扯淡的”这个词来描述 DevOps,但这并不是一种文明的表达方式。 文章旨在重新审视 DevOps 和平台工程,将分别…

【c语言】人生重开模拟器

前言: 人生重开模拟器是前段时间非常火的一个小游戏,接下来我们将一起学习使用c语言写一个简易版的人生重开模拟器。 网页版游戏: 人生重开模拟器 (ytecn.com) 1.实现一个简化版的人生重开模拟器 (1) 游戏开始的时…

php捕获Fatal error错误与异常处理

在php5的版本中&#xff0c;如果出现致命错误是无法被 try {} catch 捕获的&#xff0c;如下所示&#xff1a; <?phperror_reporting(E_ALL); ini_set(display_errors, on);try {hello(); } catch (\Exception $e) {echo $e->getMessage(); } 运行脚本&#xff0c;最终…

GO语言的变量与常量

1.变量 go是一个静态语言 变量必须先定义后使用变量必须要有类型 定义变量的方式&#xff1a; var 名称 类型 var 名称 值 名称 :值 例如&#xff1a; var num int 这样就存了一个num类型为int的变量 var num 1 上面使用简化的定义通过num自动判断后面的类型为int并…

什么台灯最好学生晚上用的?五大高口碑学生护眼台灯推荐

对于学生来说&#xff0c;晚上学习早已是家常便饭&#xff0c;其中如果光线不合适&#xff0c;很容易就会造成近视的情况。面对这样的商机&#xff0c;很多厂家纷纷涉足护眼台灯行业&#xff0c;无论技术成熟与否&#xff0c;都大打护眼卖点&#xff0c;其中难免含有大量水分。…

SpringMVC的执行流程

过去的开发中,视图阶段&#xff08;老旧JSP等&#xff09; 1.首先用户发送请求到前端控制器DispatcherServlet(这是一个调度中心) 2.前端控制器DispatcherServlet收到请求后调用处理器映射器HandlerMapping 3.处理器映射器HandlerMapping找到具体的处理器,可查找xml配置或注…

milvus insert api的数据结构源码分析

insert api的数据结构 一个完整的insert例子: import numpy as np from pymilvus import (connections,FieldSchema, CollectionSchema, DataType,Collection, )num_entities, dim 10, 3print("start connecting to Milvus") connections.connect("default&q…

网络原理 - HTTP/HTTPS(2)

HTTP请求 认识URL URL基本格式 平时我们俗称的"网址"其实就是说的URL(Uniform Resource Locator统一资源定位符). (还有一个唯一资源标识符,称为uri,严格来说,uri范围比url广). 互联网上的每一个文件都有一个唯一的URL,它包含的信息指出文件的位置以及浏览器应该…

HTB-Analytics

靶机的IP地址为10.10.11.233&#xff0c;攻击机的IP地址为10.10.16.30 信息收集 # nmap -sT --min-rate 10000 -p- 10.10.11.233 -oN port.nmap Starting Nmap 7.94 ( https://nmap.org ) at 2024-02-19 14:50 CST Warning: 10.10.11.233 giving up on port because retransm…

十字星K线(Doji)含义,fpmarkets澳福一分钟讲解

许多新手交易者遇到过这种奇怪的烛台&#xff0c;看起来就像一个十字架&#xff0c;没有主体上下有长长的影子&#xff0c;fpmarkets澳福肯定的告诉各位投资者&#xff0c;这种就是十字星K线(用Doji表示)&#xff0c;开盘价与收盘价一致&#xff0c;价格运动已经停止时出现在烛…

突发!某地区网络故障,格行随身WiFi成“救星”?现场直击!

近日&#xff0c;某地区突发网络故障&#xff0c;导致大量用户无法上网。然而&#xff0c;在这场网络危机中&#xff0c;一款名为“格行随身WiFi”的设备却意外走红&#xff0c;成为了当地的“网络救星”。究竟发生了什么&#xff1f;让我们一起来现场直击&#xff01; 据了解&…

Leetcode刷题笔记题解(C++):120. 三角形最小路径和

思路&#xff1a;动态规划&#xff0c;去生成一个对应的当前节点的最小路径值&#xff0c;对应的关系如下所示 dp[0][0] triangle[0][0] dp[i][0] triangle[i][0]dp[i-1][0] dp[i][i] triangle[i][i]dp[i-1][i] dp[i][j] triangle[i][j]min(dp[i-1][j-1],dp[i-1][j]) …

语义相关性评估指标:召回率、准确率、Roc曲线、AUC;Spearman相关系数、NDCG、mAP。代码及计算示例。

常规的语义相关性评价可以从检索、排序两个方面进行。这里只贴代码。详细可见知乎https://zhuanlan.zhihu.com/p/682853171 检索 精确率 def pre(true_labels[],pre_labels[]):""":param true_labels: 正样本索引:param pre_labels: 召回样本索引:return: 精…

首都博物京韵展,监测系统实现文物科技保护

​ 一、首都博物馆讲述京韵古都故事 2024年2月18日&#xff0c;首都博物馆重新亮相的“华夏文明的有力见证——北京通史展”震撼登场。展览面积4900平方米&#xff0c;汇聚1100多件&#xff08;套&#xff09;历史文物&#xff0c;不仅包含了传统历史瑰宝&#xff0c;还增加了…

npm 安装依赖总是超时的解决办法

首先&#xff0c;尝试切换依赖镜像地址 比如切换到淘宝镜像 npm config set registry https://registry.npm.taobao.org // 或者 yarn config set registry https://registry.npm.taobao.org建议使用镜像管理工具 nrm (node registry manager) 其次是否是网络问题 如果无…

Obsidian Win+Android Onedrive/Git 同步

OneDrive Android 手机安装OneDrive&#xff1a; https://www.androidout-cn.com/item/android-apps/147211/com-microsoft-skydrive/ 我是现在手机上创建的仓库&#xff0c;命名为BaseA 此仓库安装Remotely Save插件&#xff0c;远程服务选择为OneDrive&#xff0c;然后授…

【Java万花筒】事件溯源:探索完整状态历史记录的奇妙之旅

构建可追溯、可恢复的应用程序&#xff1a;走进事件溯源的世界 前言 在软件开发过程中&#xff0c;我们常常需要跟踪应用程序的状态变化、审计追踪和快速回滚功能。传统的数据库存储方式无法满足这些需求&#xff0c;因此事件溯源成为了一种强大的设计模式。通过将应用程序的…