码迷,mamicode.com
首页 > 其他好文 > 详细

[Angular2 Router] Preload lzay loading modules

时间:2016-10-13 21:35:14      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

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

标签:

原文地址:http://www.cnblogs.com/Answer1215/p/5958150.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!