用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. join,left join,inner join,full join的区别?

    left join(左联接) 返回包括左表中的所有记录和右表中联结字段相等的记录 right join(右联接) 返回包括右表中的所有记录和左表中联结字段相等的记录inner join(等值连接) 只 ...

  2. JAVA_04

    * a:局部代码块 * 在方法中出现:限定变量生命周期,及早释放,提高内存利用率 * b:构造代码块 (初始化块) * 在类中方法外出现:多个构造方法方法中相同的代码存放到一起,每次调用构造都执行,并 ...

  3. MySql TIMEDIFF做计算之后,后台报Illegal hour value '24' for java.sql.Time type 问题

    页面需要显示这种格式:31:01:20 但是后台Springboot会提示Illegal hour value '24' for java.sql.Time type in value '24:00: ...

  4. Linux网络编程学习(七) ----- 有名管道(第四章)

    1.什么是有名管道?为什么有了管道还需要有名管道? 有名管道是解决管道不能提供非父子进程间通信的缺陷.管道在Linux系统内部是以文件节点(inode)的形式存在,但由于其对外的不可见性(“无名”性) ...

  5. 修复Microsoft Store 无法连接网络 代码: 0x80072EFD

    事情的经过是这样的,我的Windows版本是1709,前两天刚从1703升上来,今天突然发现它自己给我装了个skype,我上Microsoft商店里查一下是什么情况,结果突然发现它又双双双不正常工作了 ...

  6. 自然语言推断(NLI)、文本相似度相关开源项目推荐(Pytorch 实现)

    Awesome-Repositories-for-NLI-and-Semantic-Similarity mainly record pytorch implementations for NLI a ...

  7. install django采坑

    1. install python 3 2. install pip 3.  install virtual enviroment : python -m venv myvenv 4. 切换到virt ...

  8. 《DOM Scripting》学习笔记-——第八章 充实文档的内容

    本章内容 一.一个为文档创建“缩略词语表”的函数 二.一个为文档创建“文献来源链接”的函数 三.一个为文档创建“快速访问键清单”的函数 利用DOM动态的收集和创建一些有用的辅助信息,并把它们呈现在网页 ...

  9. 想拥有自己的Python程序包,你只需15步

    来源商业新知网,原标题:15步,你就能拥有自己的Python程序包 全文共 3192 字,预计学习时长 6 分钟 每个软件开发员和数据科学家都难免要做程序包.本文推荐一篇 Python开源程序包的制作 ...

  10. Spring核心之IOC

    IOC是Spring的两大核心之一:IOC的核心就是解耦. 举个例子:有2个班级可以上课,校长指定老师去上课,代码如下 package com.hongcong.test; public class ...