用angular4.0进行前后端分离已经好几个月了,现在接近了尾声,pc端和移动端。可是却还存在着很多问题,最近这几天一直在研究懒加载问题,因为通过ng build --prod打包后主文件很大,有2.33Mb,这样性能不好,为了解决这个问题,网上查了很多,都没有找到能解决的,有可能是自己懂的知识太少,有查到用wepack压缩的或者用gulp压缩的,都尝试了但都没能成功(不要嫌弃),也在相关angular群里问了别人,没有人给出好的方法,既然没有找到好的办法把代码压缩得更小,那就只能从别的地方下手,主文件之所以那么大是因为angular默认是一开始就加载了所有的模块,那就让他别加载所有的模块,所以想到了懒加载。在angular4.0的文档上对懒加载解释得很清楚,代码也一步步教你怎么写,链接如下https://www.angular.cn/guide/lazy-loading-ngmodules,有需要的朋友可以去看看,我尝试并且成功了,然后遇到了一个问题,公共组件该如何在模块配置,也是自己在网上找了解决的方法,公共组件即在多个页面都用到的组件,在页面用<app-xxx></app-xxx>引入。

我的解决方法是创建一个公共的模块,将公共组件声明在公共模块里,然后那个页面需要用到公共组件就在那个页面引入公共模块,还有在app.module.ts模块里也可以引入公共模块。

我的公共模块创建命令:ng generate module communal

用到公共组件页面的模块

app.module.ts模块

经过部分页面配置懒加载以后我的主文件有2.33Mb变成了1.7Mb,可是远远不够呀?还有没有配置懒加载的文件我想全都配置了,但是遇到了一个我解决不了的问题,就是用到ng2-file-upload第三方库的页面配置懒加载后进入页面报错,报错如下:

这个问题我实在解决不了,问了很人和在网上查找了很久,都没有找到解决的办法,如果那个大神知道,并且看到了我这篇文章,请大佬告知解决方法,感激不尽!

angular4.0懒加载的更多相关文章

  1. Angular4.0 探索子路由和懒加载 loadChildren

    参考文章: Angular4路由快速入门  http://www.jianshu.com/p/e72c79c6968e Angular2文档学习的知识点摘要——Angular模块(NgModule)h ...

  2. js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  3. 在ThinkPHP框架(5.0.24)下引入Ueditor并实现向七牛云对象存储上传图片同时将图片信息保存到MySQL数据库,同时实现lazyload懒加载

    这是我花了很多天的时间才得以真正实现的一组需求. 文章后面有完整Demo的GitHub链接. 一. 需求描述 1. 应用是基于ThinkPHP5开发的: 2. 服务器环境是LNMP,PHP版本是7.2 ...

  4. Spring5.0源码学习系列之浅谈懒加载机制原理

    前言介绍 附录:Spring源码学习专栏 在上一章的学习中,我们对Bean的创建有了一个粗略的了解,接着本文挑一个比较重要的知识点Bean的懒加载进行学习 1.什么是懒加载? 懒加载(Lazy-ini ...

  5. Angular23 loading组件、路由配置、子路由配置、路由懒加载配置

    1 需求 由于Angular是单页面的应用,所以在进行数据刷新是进行的局部刷新:在进行数据刷新时从浏览器发出请求到后台响应数据是有时间延迟的,所以在这段时间就需要进行遮罩处理来提示用户系统正在请求数据 ...

  6. 【转】实现ViewPager懒加载的三种方法

    方法一 在Fragment可见时请求数据.此方案仍预加载了前后的页面,但是没有请求数据,只有进入到当前Framgent时才请求数据. 优点:实现了数据的懒加载缺点:一次仍是三个Framgment对象, ...

  7. 前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...

  8. iOS之weak和strong、懒加载及循环引用

    一.weak和strong 1.理解 刚开始学UI的时候,对于weak和strong的描述看得最多的就是“由ARC引入,weak相当于OC中的assign,但是weak用于修饰对象,但是他们都不会造成 ...

  9. jquery实现简单瀑布流布局(续):图片懒加载

    # jquery实现简单瀑布流布局(续):图片懒加载 这篇文章是jquery实现简单瀑布流布局思想的小小扩展.代码基于前作的代码继续完善. 图片懒加载就是符合某些条件时才触发图片的加载.最常见的具体表 ...

随机推荐

  1. 使用spring-session共享springmvc项目的session

    一.说在前面 spring mvc项目,使用nginx,tomcat部署. 之前没做session共享,而nginx采用sticky模块进行分发. 但发现有时不能正确地指向同一台服务器,从而导致ses ...

  2. PowerDesigner工具将表字段转成java实体

    首先将数据库的表导出为SQL文件.下载安装PowerDesigner工具. 下面以图文的形式讲解: 图   (1) 图   (2) 图   (3) 图   (4) 图   (5) 图   (6) 图 ...

  3. 前端笔记-javaScript-1

    一.JavaScript概述 1.JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEa ...

  4. R语言-时间序列图

    1.时间序列图 plot()函数 > air<-read.csv("openair.csv") > plot(air$nox~as.Date(air$date,& ...

  5. windows php exec()不生效问题

    开始 $cmd = 'java -jar C:/xampp/htdocs/dev_env/replace_word_content.jar'; 报错java不是内部命令 换成 $cmd = 'C:\P ...

  6. Tensorflow的验证码识别

    最近在弄深度学习,从网上找了一些资料.这是基于Tensorflow的深度学习的验证码识别.https://cuijiahua.com/blog/2018/01/dl_5.html http://blo ...

  7. git 合并冲突 取消合并

    如果有冲突,会出现MERING 使用git merge  --abort命令解决冲突

  8. CentOS7下Mysql 5.6.30安装与配置

    环境:centos 7 x64 先下载mysql安装包 打开 http://dev.mysql.com/downloads/mysql/  选择 linux - Generic 再选择 下载完毕后,得 ...

  9. poj_3045 贪心

    Farmer John's N (1 <= N <= 50,000) cows (numbered 1..N) are planning to run away and join the ...

  10. mpvue前期准备

    一.配置环境: 1.下载node.js,去官网上下载相应的版本.http://nodejs.cn 2.安装就是下一步下一步,检查是否安装成功,打开cmd.输入  node -v 会出现版本号. 3.推 ...