一:Angular-CLI建立应用 cmd命令:ng new lazy-app --routing    (创建一个名叫 lazy-app 的应用,而 --routing 标识生成了一个名叫 app-routing.module.ts 的文件) cd lazy-app     (进入lazy-app项目) 二:创建一个带路由的特性模块 cmd命令:ng generate module customers --routing    (创建一个 customers 目录,其中有两个文件:Custom…

最近把一个比较旧的业余项目重新升级了下,将主文件进行了剥离,增加了些惰性加载的配置,将过程中一些零散的知识点做个总结,同时尽量深入原理实现层面. 项目环境: 前端框架:angular2.0.0-beta.21 构建工具:webpack4.11.0 加载惰性模块: 跑了下环境,再次验证了每次回头看以前自己写的东东的时候都会不能忍这一潜在的法则,发现首屏的加载事件竟然超过了1s,于是果断切割主资源包,进行按需加载 如果使用angular-cli命令工具,该需求基本自动化实现,只需要在对应的路由下配置…

①通过ng new angular-module创建一个全新的angular应用,默认不选路由 ②通过一下命令分别创建2个模块和1个组件 ng g m hx1 ng g c hx1 ng g m hx2 ng g c hx2 ng g c hx3 创建完成目录如下 ③将app.module和app.component改造 app.module如下: import { BrowserModule } from '@angular/platform-browser'; import { NgModu…

Angular - 预加载延迟模块 在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这个模块.但这需要一点时间.在用户第一次点击的时候,会有一点延迟. 我们可以通过预加载路由来修复这个问题.路由可以在用户与其它部分交互的时候,异步加载延迟的模块.这可以使用户在访问延迟模块的时候更快地访问. 本文将在上一个示例的基础上,增加预加载的功能. 在上一节中,我们的根路由定义在 main.routing.ts,我们在 app.module.ts 中使用…

需要修改至少四个地方1. 将子组件进行模块化操作2.生成子组件module .子组件router3.配置主路由 信息 改为loadChild4.配置appModule 删除引入 以product组件 为例 这个组件是一个一级菜单所以需要给这个页面生成一个module 1.生成 product.module组件2.生成routers 路由列表(这里可以分为两个文件写) import { NgModule } from '@angular/core'; import { CommonModule }…

angular中支持可以通过路由来懒加载某些页面模块已达到减少首屏尺寸, 提高首屏加载速度的目的. 但是这种通过路由的方式有时候是无法满足需求的. 比如, 点击一个按钮后显示一行工具栏, 这个工具栏组件我不希望它默认打包进main.js, 而是用户点按钮后动态把组件加载并显示出来. 那为什么要动态加载呢? 如果直接在目标页面组件引入工具栏组件, 那么工具栏组件中的代码就会被打包进目标页面组件所在的模块, 这会导致目标页面组件所在的模块生成的js体积变大; 通过动态懒加载的方式, 可以让工具栏组件…

之前为了测试一个模块优化问题,于是用angular-cli快速搭建了个ng5的脚手架demo,在应用惰性加载功能的时候发现浏览器报错如下: ERROR Error: Uncaught (in promise): TypeError: __webpack_require__.e is not a function TypeError: __webpack_require__.e is not a function at webpackAsyncContext (eval at ./src/$$_l…

今天在项目中遇到一个很奇怪的问题,使用oclazyload来懒加载angular的模块,刷新页面后,单击回退按钮无法返回上一个页面.估计是使用懒加载机制销毁了angular内部的state关联,导致无法回到上一个state(单击回退按钮  ui-routre的 $stateChangeStart 事件都不会触发),当然这只是猜测,由于事件关系也没有去深入的探究源码. 解决方案 : 通过查看angular(ionic)的源码发现$browser这个服务上有个onUrlChange方法,当我们从an…

写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang…

如果loop模块没有编译进内核就要先加载loop模块 modprobe loop 然后更改/etc/modprobe.d/modprobe.conf(有些文章写是在/etc/modprobe.conf,但是我试验是在此目录下) options loop max_loop= 之后就可以重启系统,然后执行 modprobe loop 我们就可以看到loop设备增加为64个了.…