[Angular2 Router] Preload lzay loading modules
Router loading modules Angular2 preload
2023-09-14 09:00:53 时间
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 ],
相关文章
- angularjs中ng-route和ui-router简单用法的代码比较
- [React Router v4] Conditionally Render a Route with the Switch Component
- [Angular2 Router] Configuring a Home Route and Fallback Route - Learn An Essential Routing Concept
- [Angular2 Router] Understand the Angular 2 Base href Requirement
- [AngularJS] Consistency between ui-router states and Angular directives
- [Preact] Integrate react-router with Preact
- [React Router v4] Render Multiple Components for the Same Route
- [Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive
- 华为eNSP BUG——关于OSPF Router ID选择问题
- SAP成都研究院李三郎:SCP Application Router简介
- vue之组件的使用(router-view和components)&vue组件的复用&vue顶部导航栏实例
- 一文你带快速认识Vue-Router路由
- 使用Vue-Router 2实现路由功能
- Vue2.x - Vue Router