[Angular2 Router] Preload lzay loading modules
From router v3.1.0, we have preloading system with router.
PreloadAllModules
After the init module loaded, router will preloading the rest module at the background.
const indexRoute = {path: '', redirectTo: 'home', pathMatch: 'full'};
const fallbackRoute = {path: '**', component: NotFoundComponent};
const routes = [
{path: 'legacy-url', redirectTo: '/home', pathMatch: 'prefix'},
{path: 'home', loadChildren: 'app/home/home.module', name: 'Home'},
{path: 'heros', loadChildren: 'app/heros/heros.module', name: 'Heros'},
{path: 'contact', loadChildren: 'app/contact/contact.module', name: 'Contact'},
indexRoute,
fallbackRoute,
]; export default RouterModule.forRoot(routes, {
useHash: true,
preloadingStrategy: PreloadAllModules
});
Custom Preload Strategy:
const indexRoute = {path: '', redirectTo: 'home', pathMatch: 'full'};
const fallbackRoute = {path: '**', component: NotFoundComponent};
const routes = [
{path: 'legacy-url', redirectTo: '/home', pathMatch: 'prefix'},
{path: 'home', loadChildren: 'app/home/home.module', name: 'Home'},
{path: 'heros', loadChildren: 'app/heros/heros.module', name: 'Heros', data: {preload: true}},
{path: 'contact', loadChildren: 'app/contact/contact.module', name: 'Contact', data: {preload: true}},
{path: 'message', loadChildren: 'app/message/message.module', name: 'Message'},
indexRoute,
fallbackRoute,
]; export default RouterModule.forRoot(routes, {
useHash: true,
preloadingStrategy: PreloadSelectedModuledsList
//preloadingStrategy: PreloadAllModules
});
In the router config, we use :
data: {preload: true}
To tell which modue should be preloaded.
Then provide a custom loading strategy:
import {PreloadingStrategy, Route} from "@angular/router";
import {Observable} from "rxjs";
export class PreloadSelectedModuledsList implements PreloadingStrategy {
preload(route: Route, load: Function): Observable<any> {
return route.data.preload ? load() : Observable.of(null);
} }
Last step, in the app.module.ts, inject the provider to the providers list:
providers: [
{provide: APP_BASE_HREF, useValue: '/'},
{
provide: API_URL,
useValue: `https://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK`
},
{
provide: STARWARS_BASE_URL,
useValue: `https://starwars-json-server-ewtdxbyfdz.now.sh`
},
PreloadSelectedModuledsList
],
[Angular2 Router] Preload lzay loading modules的更多相关文章
- [Angular2 Router] Resolving route data in Angular 2
From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know ...
- [Angular2 Router] Lazy Load Angular 2 Modules with the Router
Angular 2 lazy loading is a core feature of Angular 2. Lazy loading allows your application to start ...
- [AngularJS] Lazy Loading modules with ui-router and ocLazyLoad
We've looked at lazy loading with ocLazyLoad previously, but what if we are using ui-router and want ...
- [Angular2 Router] Load Data Based on Angular 2 Route Params
You can load resource based on the url using the a combination of ActivatedRouteand Angular 2’s Http ...
- Angular2 Router路由相关
路由设置 Angular中路由的配置应该按照先具体路由到通用路由的设置,因为Angular使用先匹配者优先的原则. 示例: 路由设置如下: export const reportRoute: Rout ...
- [Angular2 Router] CanActivate Route Guard - An Example of An Asynchronous Route Guard
In this tutorial we are going to learn how we can to configure an can activate route guard in the An ...
- [Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route
In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router ...
- [Angular2 Router] Exiting an Angular 2 Route - How To Prevent Memory Leaks
In this tutorial we are going to learn how we can accidentally creating memory leaks in our applicat ...
- [Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable
In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parame ...
随机推荐
- Hive里的分区、分桶、视图和索引再谈
福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号: 大数据躺过的坑 Java从入门到架构师 人工智能躺过的坑 Java全栈大联盟 ...
- 戏说Linux商用数据库
戏说Linux商用数据库 上一篇文章(http://chenguang.blog.51cto.com/350944/277533)我介绍了Linux下几款开源数据库Mysql,MaxDB.Postgr ...
- BZOJ1814: Ural 1519 Formula 1(插头Dp)
Description Regardless of the fact, that Vologda could not get rights to hold the Winter Olympic gam ...
- python hmac 加密
python2 : key 是秘钥 类型为 str msg 要加密的文件 str digestmod 要加密的方式 python3: key 是秘钥 类型为 byte msg 要加密的文件 byte ...
- 洛谷——P2695 骑士的工作
https://www.luogu.org/problem/show?pid=2695 题目背景 你作为一个村的村长,保卫村庄是理所当然的了.今天,村庄里来了一只恶龙,他有n个头,恶龙到处杀人放火.你 ...
- 怎样从Cortex-m向STM32移植使用SPI接口协议
/*************************************************************************************************** ...
- 设计模式(7)-结构型模式-Bridge模式
2.结构性模式 2.2 BRIDGE模式 别名:handle/body 这个模式体现了组合相对于继承的优势. 2.2.1动机 当一个抽象可能有多个实现时,通经常使用继承来协调它们.抽象类定义对该抽象 ...
- ListView- 最后一行添加控件
今天在做一个功能的时候,要求必须是在一个listview下,有一段提示行的文字,自己的那个listview的adapter用的是cursoradapter,这样的话,处理布局的灵活性就大打折扣了.最开 ...
- weblogic虚拟路径配置
首发地址 https://blog.leapmie.com/archives/344/ 前言 weblogic的虚拟路径配置有两种: 一种是在项目下配置,即在weblogic.xml中配置,该方法配置 ...
- BZOJ3238: [Ahoi2013]差异(后缀数组)
Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 解题思路: 看到lcp,想到了 ...