angular实现自定义模块路由懒加载；配置自定义模块路由及子路由

已于 2023-06-29 20:58:18 修改
阅读量1.6k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： angular 文章标签： angular.js 前端 javascript
于 2023-06-24 19:12:56 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39962271/article/details/131365225
本文详述了如何在Angular中创建自定义模块，并实现路由懒加载。首先，创建了一个用户模块，配置相关路由。接着，创建了profile组件并设置路径。随后，在用户模块中配置子路由，包括address子组件。最后，展示了如何在子路由下继续配置子路由，创建了home组件。整个过程涉及user-routing.module.ts、app-routing.module.ts等多个文件的修改，以实现模块和子路由的动态加载。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

图片中绿色表示新建的文件；黄色表示被更改的文件；
1、创建一个新的项目
ng new angularlazyload
2、创建一个用户模块，并配置路由
ng g module module/user --routing

如图：
在这里插入图片描述

3 、在module/模块下创建user组件
ng g component module/user

如图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c5Qbqdl2-1687604549321)(./images/image-20230624132630899.png)]

4、实现路由懒加载

依次修改下列几个文件：

了解本专栏 订阅专栏 解锁全文 超级会员免费看
Angular7多标签页实现(路由复用+路由懒加载)完美解决方案
04-08
Angular7多标签页实现(路由复用+路由懒加载)完美解决方案
angular 怎么实现懒加载
Littlegirlha的博客
12-21 1415
懒加载
Angular路由懒加载
qq_41097495的博客
04-20 532
路由懒加载 1.创建项目并创建模块 ng new projectName ng g m modules/home --routing ng g m modules/profile --routing ng g c modules/home ng g c modules/profile 2.在app-routing.module.ts中配置 const routes: Routes = [ {p...
Angular 路由懒加载
遗忘了的自己
03-31 379
version 7.x { path: 'test', loadChildren: './test/test_ui.module#TestUIModules' }, version 8.x {path: 'test',loadChildren:()=>import('./test_ui/test_ui.module').then(mod=>mod.TestUIModules)},
angular加載優化
weixin_42449803的博客
01-08 601
最近運行項目的時候發現項目加載過慢，因為項目需求一直在疊加，一直沒找到一個好的時機去優化它，導致在app.module中的import一直在累加，主要解決的就是vendor和main這兩個大文件。參考了網上很多大神的優化和angular官方的一些文檔，有了一些自己的優化辦法。 一、懶加載 要惰性加载 Angular 模块，需要在app-routing.module.ts中使用loadChildren代替component进行配置，例: const ROUTES:Route...
angular自定义模块以及配置路由模块懒加载
鸭绒的博客
07-01 1810
什么是模块懒加载？ 即在根模块通过路由导航至子模块。 在这里，我们自定义三个模块，每个自定义的模块又有几个组件。 1.先创建一个新项目 ng new module 注意：这个项目得带有路由 2.下面创建上图所示的三个自定义模块，如果我们要在自定义模块实现路由，那就要在命令中添加：- -routing,因为我们要在自定义模块中添加几个组件，那配置路由是必须的。 ng generate module modules/自定义模块名 --routing 3.看到上面的自定义模块中仅有一个模块的ts文件和配置
angular-tab:通过路由复用策略，结合路由懒加载模块的方式，使用ng-zorro的tabs实现动态tab
05-15
angular-tab 通过路由复用策略，结合路由懒加载模块的方式，使用ng-zorro的tabs实现动态tab angular-cli 版本 1.7.4 nodejs 版本 8.11.2 安装依赖 npm install 启动项目 ng serve 参考文章 简书
详解使用路由延迟加载 Angular 模块
08-29
使用路由延迟加载 Angular 模块 在 Angular 应用程序中，延迟加载是一个非常有用的特性，可以 significatively 提高应用程序的性能和用户体验。延迟加载意味着可以在后台加载一个模块和其包含的所有组件等资源，而...
浅谈Angular2 模块懒加载的方法
08-29
实现 Angular2 模块懒加载的步骤： 1. 创建模块：创建一个新的模块，例如 home 模块，并在该模块下创建路由配置文件 home-routing.module.ts。 2. 配置路由：在 home-routing.module.ts 文件中配置路由，例如将首页...
【angular路由】路由懒加载写法
qq_36557846的博客
06-10 1005
angular 路由懒加载
ionic(angular)之优化路由（路由懒加载，包括js文件和html，css都按需加载）
01-13
ionic(angular)之优化路由（路由懒加载，包括js文件和html，css都按需加载）
angular学习6-路由懒加载
gexiaopipi的博客
04-09 359
步骤一：创建组件 命令行输入 ng g module admin --routing ng g c admin/admin ng g c admin/admin-dashboard ng g c admin/message admin-routing.module.ts 引入上述组件 const routes:Routes=[{ path:'' component;AdminCompone...
AngularJS 路由以及模块配置
11-19 9972
AngularJS 路由-参数,模块配置,布局模板 body { padding: 0; margin: 0; background-color: #F7F7F7; font-family: Arial; } .wrapper { max-width: 980px; margin: 50px auto; } ul { paddi
angular 路由懒加载
李卓书
05-11 631
说明 需要哪个模块就加载哪个模块，可以减少打包的体积 实现 1 用命令创建 ng g m user --routing=true 创建用户模块并自动创建路由 ng g c user/pages/login 创建登录组件 ng g c user/pages/register 创建注册逐渐 2 在根模块中引用子模块 这里意思就是只有在访问到/user模块下的组件时，才会加载，可以查看下network里面是不是点击才加载的 ...
【angular-实践】angular懒加载(异步路由)
qq_41243979的博客
01-14 1048
以登录模块为例 创建带路由的模块及组件 ng g m pages/login --routing ng g c pages/login src\app\pages\login\login-routing.module.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { LoginComponent } from './login.co
Angular 中的懒加载管理面板
m0_74337424的博客
03-22 146
懒加载是指当用户需要某个模块时才加载该模块，而不是在应用启动时一次性加载所有模块。减少初始加载时间。优化资源使用。提高用户体验，特别是在移动设备上。通过上述步骤，我们成功地在 Angular 应用中实现了一个懒加载的管理面板。这不仅提高了应用的启动速度，还优化了资源的使用。在实践中，记得检查组件声明和路由配置，以避免常见的错误。希望本文对你实现懒加载管理面板有所帮助。
Angular 路由与懒加载模块的实践
最新发布
m0_74337424的博客
03-23 69
通过这种方式，我们可以有效地管理不同页面布局的需求，同时利用懒加载减少应用的初始加载时间。Angular的路由系统和模块懒加载功能，使得我们可以在复杂的应用中轻松实现高效的页面管理和性能优化。
AngularJs 通过 ocLazyLoad 实现动态（懒）加载模块和依赖
热门推荐
zhangh8627的专栏
06-24 3万+
最近一直在学习 AngularJs 的实践过程中，之前虽然也在学，但总因为工作方面的各种原因一直是断断续续的，虽然之前也一直看但总找不到入手的感觉，可能是自己的心太高想着一下子就能掌握，还有一个原因是之前用习惯了 JQUERY 的模式，在 AngularJs 下不太适应所以在学习过程中就遇到许多问题，就像今天解决的动态加载问题，在 AngularJs 常规的教程书籍中很少有提到，有的甚至都没有，都
【Angular】Angular路由：懒加载、守卫、动态参数
IMSI的博客
03-05 314
angular路由守卫
Angular前端开发实践：自定义验证、路由及组件实现
Angular路由（Angular Router）用于管理浏览器的URL和视图之间的映射关系。通过定义路由规则，Angular可以自动根据URL的变化来渲染对应的视图组件。路由系统允许用户在应用中导航而不会重新加载页面，实现了单页面...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大脑经常闹风暴@小猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值