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
],

Github

[Angular2 Router] Preload lzay loading modules的更多相关文章

  1. [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 ...

  2. [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 ...

  3. [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 ...

  4. [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 ...

  5. Angular2 Router路由相关

    路由设置 Angular中路由的配置应该按照先具体路由到通用路由的设置,因为Angular使用先匹配者优先的原则. 示例: 路由设置如下: export const reportRoute: Rout ...

  6. [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 ...

  7. [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 ...

  8. [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 ...

  9. [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 ...

随机推荐

  1. Hive里的分区、分桶、视图和索引再谈

    福利 => 每天都推送 欢迎大家,关注微信扫码并加入我的4个微信公众号:   大数据躺过的坑      Java从入门到架构师      人工智能躺过的坑         Java全栈大联盟   ...

  2. 戏说Linux商用数据库

    戏说Linux商用数据库 上一篇文章(http://chenguang.blog.51cto.com/350944/277533)我介绍了Linux下几款开源数据库Mysql,MaxDB.Postgr ...

  3. BZOJ1814: Ural 1519 Formula 1(插头Dp)

    Description Regardless of the fact, that Vologda could not get rights to hold the Winter Olympic gam ...

  4. python hmac 加密

    python2 :  key 是秘钥 类型为 str msg 要加密的文件 str digestmod 要加密的方式 python3: key 是秘钥 类型为 byte msg 要加密的文件 byte ...

  5. 洛谷——P2695 骑士的工作

    https://www.luogu.org/problem/show?pid=2695 题目背景 你作为一个村的村长,保卫村庄是理所当然的了.今天,村庄里来了一只恶龙,他有n个头,恶龙到处杀人放火.你 ...

  6. 怎样从Cortex-m向STM32移植使用SPI接口协议

    /*************************************************************************************************** ...

  7. 设计模式(7)-结构型模式-Bridge模式

    2.结构性模式 2.2  BRIDGE模式 别名:handle/body 这个模式体现了组合相对于继承的优势. 2.2.1动机 当一个抽象可能有多个实现时,通经常使用继承来协调它们.抽象类定义对该抽象 ...

  8. ListView- 最后一行添加控件

    今天在做一个功能的时候,要求必须是在一个listview下,有一段提示行的文字,自己的那个listview的adapter用的是cursoradapter,这样的话,处理布局的灵活性就大打折扣了.最开 ...

  9. weblogic虚拟路径配置

    首发地址 https://blog.leapmie.com/archives/344/ 前言 weblogic的虚拟路径配置有两种: 一种是在项目下配置,即在weblogic.xml中配置,该方法配置 ...

  10. BZOJ3238: [Ahoi2013]差异(后缀数组)

    Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 解题思路: 看到lcp,想到了 ...