浅谈Angular2 模块懒加载的方法


Posted in Javascript onOctober 04, 2017

当项目变得复杂庞大以后,如果所有页面都在一个模块里,就会出现首页加载慢的问题,因为首页就已经把整个项目加载进来了。所以,很有必要根据业务将不同的功能分模块,以便Angular2按需加载,提升用户体验。

下面的例子是将首页放到home模块里,访问/home时加载home模块内容,仅供学习懒加载,其实首页访问路径应该是/

先看项目文件结构:

浅谈Angular2 模块懒加载的方法

home模块放到src/app/home目录下,里面的home目录是home组件。

home模块有单独的定义和路由(home.module.ts,home-routing.module.ts)

创建HOME模块和HOME组件:

cd src/app/
mkdir home
cd home
ng g module home
ng g component home

创建HOME模块的路由配置模块

创建 home-routing.module.ts:

import {Routes, RouterModule} from "@angular/router";
import {HomeComponent} from "./home/home.component";
import {NgModule} from "@angular/core";

const routes: Routes=[
 {
  path:'',
  component:HomeComponent
 }
]

@NgModule({
 imports:[RouterModule.forChild(routes)],
 exports:[RouterModule],
 providers:[]

})
export class HomeRoutingModule{}

模块下的页面都可以单独在该模块自己的的路由配置模块上配置,而不用在app-routing.module.ts里配置,注意RouterModule.forChild(routes)

home.module.ts导入路由模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import {HomeRoutingModule} from "./home-routing.module";

@NgModule({
 imports: [
  CommonModule,
  HomeRoutingModule
 ],
 declarations: [HomeComponent]
})
export class HomeModule { }

在app-routing.module.ts配置路由:

import {NgModule} from "@angular/core";
import {Routes, RouterModule} from "@angular/router";
import {UserListComponent} from "./user/user-list/user-list.component";
import {UserDetailComponent} from "./user/user-detail/user-detail.component";
import {RxjsComponent} from "./rxjs/rxjs.component";
import {UserEditComponent} from "./user/user-edit/user-edit.component";
import {environment} from "../environments/environment";

const routes: Routes = [
 {
  path:'home',
  loadChildren:'app/home/home.module#HomeModule'
 }

];

@NgModule({
 imports: [RouterModule.forRoot(routes,{ useHash: environment.useHash })],
 exports: [RouterModule],
 providers: []
})
export class AppRoutingModule { }

配置home路径,使用loadChildren加载home模块

完成后打开chrome的开发者工具,切到Network,看看不同的页面是不是加载了不同的文件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Prototype Date对象 学习
Jul 12 Javascript
基于jquery的checkbox下拉框插件代码
Jun 25 Javascript
判断滚动条到底部的JS代码
Nov 04 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
vue实现循环切换动画
Oct 17 Javascript
JS中min函数实例讲解
Feb 18 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
浅谈angular2路由预加载策略
Oct 04 #Javascript
浅谈Angular路由复用策略
Oct 04 #Javascript
React-Native之定时器Timer的实现代码
Oct 04 #Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 #Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 #Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 #Javascript
原生js封装运动框架的示例讲解
Oct 01 #Javascript
You might like
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
JS在IE和FF下attachEvent,addEventListener学习笔记
2009/11/26 Javascript
一个JavaScript获取元素当前高度的实例
2014/10/29 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
js css实现垂直方向自适应的三角提示菜单
2016/06/26 Javascript
使用vue编写一个点击数字计时小游戏
2016/08/31 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
ES6实现图片切换特效代码
2020/01/14 Javascript
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
Python 比较两个数组的元素的异同方法
2017/08/17 Python
python3调用R的示例代码
2018/02/23 Python
Python 3.6 读取并操作文件内容的实例
2018/04/23 Python
使用matplotlib画散点图的方法
2018/05/25 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
如何在VSCode下使用Jupyter的教程详解
2020/07/13 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
2019/03/06 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
荷兰美妆护肤品海淘网站:Beautinow(中文)
2020/11/22 全球购物
Laravel的加密解密与哈希实例讲解
2021/03/24 PHP
90后毕业生的求职信范文
2013/09/21 职场文书
简历自荐信
2013/12/02 职场文书
大三预备党员入党思想汇报
2014/01/08 职场文书
入党积极分子学习两会心得体会范文
2014/03/17 职场文书
实习评语大全
2014/04/26 职场文书
带病坚持工作事迹
2014/05/03 职场文书
送温暖献爱心活动总结
2014/07/08 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
聘任通知书
2015/09/21 职场文书