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. 闲的无聊写了个很(wu)有(liao)意(dao)思(bao)的程序

    下午机房断网了 闲的无聊,写了个小游戏 忘了sleep在哪个库里了.. 自带变色效果哦 #include<iostream> #include<cstdio> #include ...

  2. 平板电脑上完美体验Windows 8 (视频)

    平板电脑上完美体验Windows 8 (视频) 目前,计算机产业正面临重大变革,三网融合,云计算,物联网正加速终端产品的融合.4C融合成为终端产品的未来发展趋势,是4C融合的代表性产品,它破了传统的W ...

  3. arping---发送arp请求到一个相邻主机

    arping命令是用于发送arp请求到一个相邻主机的工具,arping使用arp数据包,通过ping命令检查设备上的硬件地址.能够测试一个ip地址是否是在网络上已经被使用,并能够获取更多设备信息.功能 ...

  4. dp之多重背包(未用二进制优化)

    hdu 2191: #include <iostream>#include <stdio.h>#include <string.h>using namespace ...

  5. Css学习总结(1)——20个很有用的CSS技巧

    1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { filter: grayscale(100%); -webkit-filter: graysca ...

  6. [TypeScript] Model Alternatives with Discriminated Union Types in TypeScript

    TypeScript’s discriminated union types (aka tagged union types) allow you to model a finite set of a ...

  7. android基于开源网络框架asychhttpclient,二次封装为通用网络请求组件

    网络请求是全部App都不可缺少的功能,假设每次开发都重写一次网络请求或者将曾经的代码拷贝到新的App中,不是非常合理,出于此目的,我希望将整个网络请求框架独立出来,与业务逻辑分隔开,这样就能够避免每次 ...

  8. malloc,colloc,realloc内存分配,动态库,静态库的生成与调用

     1.在main方法里面直接定义一个很大的数组的时候.可能会出现栈溢出:错误代码演示: #include<stdio.h> #include<stdlib.h> void ...

  9. 命令行SVN的使用

    1.检出svn  co  http://路径(目录或文件的全路径) [本地目录全路径]  --username 用户名 --password 密码svn  co  svn://路径(目录或文件的全路径 ...

  10. Java Base64、HMAC、SHA1、MD5、AES DES 3DES加密算法

    ●  BASE64 严格地说,属于编码格式,而非加密算法    ●  MD5(Message Digest algorithm 5,信息摘要算法)    ●  SHA(Secure Hash Algo ...