需要修改至少四个地方
1. 将子组件进行模块化操作
2.生成子组件module 、子组件router
3.配置主路由 信息 改为loadChild
4.配置appModule 删除引入

以product组件 为例 这个组件是一个一级菜单所以需要给这个页面生成一个module

1.生成 product.module组件
2.生成routers 路由列表(这里可以分为两个文件写)

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ProductComponent} from './product.component';
import {RouterModule} from '@angular/router'; const routes = [
{
path: '', // 注意: 这里一定要写空
component: ProductComponent
}
]; @NgModule({
imports: [
CommonModule,
RouterModule.forChild(routes) // 导入 product模块自己的路由
],
exports: [ProductComponent], // 导出需要引用的模块
declarations: [ProductComponent]
})
export class ProductModule {
}

  

3.改造 主路由 使用惰性加载

import {NgModule} from '@angular/core';
import {
Routes, RouterModule
} from '@angular/router';
import {IndexComponent} from './core/index/index.component';
const routes: Routes = [
{
path: 'index',
component: IndexComponent
},
{
path: 'aboutus',
loadChildren: './core/aboutus/aboutus.module#AboutusModule'
},
{
path: 'product', // 这里需要填写路径
// 使用惰性加载 其中 #之前是 product.module 的 路径
// #之后是 导出的module 名称
loadChildren: './core/product/product.module#ProductModule'
},
{
path: '**', // 路由错误的时候 跳转首页
redirectTo: ''
},
]; @NgModule({
imports: [RouterModule.forRoot(routes, {
useHash: true
})],
exports: [RouterModule],
})
export class AppRoutingModule {}

  

4.修改 app.module 主模块 信息

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';
import {ComponentsModule} from './components/components.module';
import { IndexComponent } from './core/index/index.component';
import {AppRoutingModule} from './app-routing.module';
import {FormsModule} from '@angular/forms'; @NgModule({
declarations: [
AppComponent,
IndexComponent,
],
// 重要! 删除需要 惰性加载的module 如果这里添加了 惰性加载的模块 那么将不是惰性加载
// 这里不需要加入 需要惰性加载的module
// 只需要保留 不需要惰性加载的模块即可
imports: [
BrowserModule,
FormsModule, // 双向数据绑定 module
ComponentsModule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

  

在app.component.html 中 测试

<ul>
<li>
<a routerLink="index"> 首页 </a>
</li>
<li>
<a routerLink="aboutus"> 关于我们 </a>
</li>
<li>
<a routerLink="product"> 产品简介 </a>
</li> </ul> <router-outlet></router-outlet>

  

这个时候 进行点击测试 如果页面中出现 并且只出现过一次 js module 文件 则说明 成功

(下图是我配置的两个惰性加载module 其中一个是product 一个是aboutus)

Angular2 ng2 如何配置惰性加载的更多相关文章

  1. angular惰性加载拓展剖析

    最近把一个比较旧的业余项目重新升级了下,将主文件进行了剥离,增加了些惰性加载的配置,将过程中一些零散的知识点做个总结,同时尽量深入原理实现层面. 项目环境: 前端框架:angular2.0.0-bet ...

  2. PDF在线阅读 FlexPaper 惰性加载 ;

    关于PDF在线阅读问题,比较普遍的做法是转换成swf文件来浏览:由于项目需要,就用 flexpaper 来实现了下,功能比较简单:但是文件的惰性加载确实让笔者挠头了一把! 下面是笔者的方法: 采用流的 ...

  3. 关于angular5的惰性加载报错问题

    之前为了测试一个模块优化问题,于是用angular-cli快速搭建了个ng5的脚手架demo,在应用惰性加载功能的时候发现浏览器报错如下: ERROR Error: Uncaught (in prom ...

  4. Angular惰性加载的特性模块

    一:Angular-CLI建立应用 cmd命令:ng new lazy-app --routing    (创建一个名叫 lazy-app 的应用,而 --routing 标识生成了一个名叫 app- ...

  5. Crystal框架配置参数加载机制详解?

    前言 定义 配置参数定义的形式 配置参数文件定义在哪里? 配置参数加载的优先级 如何使用配置参数? 最佳实践 Jar项目中如何定义配置参数? War项目中如何定义或重载Jar包中的配置参数? 开发人员 ...

  6. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格惰性加载节点

    jQuery EasyUI 树形菜单 - 树形网格惰性加载节点 有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载 ...

  7. igmpproxy源代码学习——配置信息加载 loadConfig

            在igmpproxy主程序运行之前需要先读取配置文件,igmpproxy的配置文件通常为/etc/igmpproxy.conf或者/var/igmpproxy.conf 其内容如下: ...

  8. Spring Boot自定义配置与加载

    Spring Boot自定义配置与加载 application.properties主要用来配置数据库连接.日志相关配置等.除了这些配置内容之外,还可以自定义一些配置项,如: my.config.ms ...

  9. Aspnetcore下面服务器热更新与配置热加载

    原文:Aspnetcore下面服务器热更新与配置热加载 Asp.net的热更新方案Appdomain在aspnetcore中不被支持了 新的方案如下: 配置文件更新选项 reloadOnChange ...

随机推荐

  1. 【转】C语言堆栈入门——堆和栈的区别

    @2019-04-25 [小记] C语言堆栈入门——堆和栈的区别

  2. 3-ftp搭建成功,服务器能访问,外网无法连接和访问

    登录 ECS 管理控制台,找到相应的实例. 在实例的右侧单击管理,进入实例详情页面.选择本实例安全组. 在安全组列表页面,找到相应的安全组,单击配置规则. 在安全组规则页面,单击添加安全组规则. 在添 ...

  3. Servlet生命周期 和 继承关系

    三 servlet的生命周期 (一个servlet类的对象 创建---->销毁) 第一次访问 某个servlet的时候 首先调用其 构造函数 public StudentServlet(){ S ...

  4. 分类器的评价指标-ROC&AUC

    ROC 曲线:接收者操作特征曲线(receiver operating characteristic curve),是反映敏感性和特异性连续变量的综合指标,roc 曲线上每个点反映着对同一信号刺激的感 ...

  5. (九) 主机增加打印(串口+ssh)

    目录 主机增加打印(串口+ssh) ssh 串口打印 title: 主机增加打印(串口+ssh) date: 2019/4/23 20:10:00 toc: true --- 主机增加打印(串口+ss ...

  6. [面试]Actor模型

    Actor模型 面试中自己说话不利落, 或者自己对知识点认识不全面.在这里进行一下记录. 理论部分都是收集(copy)自网上其他的博客. 什么是Actor模型 参与者模式(英语:Actor model ...

  7. Spring Cloud微服务实战:手把手带你整合eureka&zuul&feign&hystrix

    转载自:https://www.jianshu.com/p/cab8f83b0f0e 代码实现:https://gitee.com/ccsoftlucifer/springCloud_Eureka_z ...

  8. python 高级部分

    伴随视频可以观看 因为Python的线程虽然是真正的线程,但解释器执行代码时,有一个GIL锁:Global Interpreter Lock,任何Python线程执行前,必须先获得GIL锁,然后,每执 ...

  9. JSP和后台交互时的乱码问题

    在Servlet或者是拦截器里面添加下面的语句: request.setCharacterEncoding("utf-8"); response.setCharacterEncod ...

  10. 10、jstl标签库

    一.JSTL是SUN公司制定的一个JSP标签库,由apache jakarta组织负责维护的开源项目,目的是用标签代替java代码片段.JSTL 1.0 由四个定制标记库(core.format.xm ...