In a previous lesson we learned about implementing a custom preloading strategy. That gives you a lot of control over which route to preload and which not, whether it is based on the user's permissions or some runtime app config. In this lesson we're using ngx-quicklink, a library that drastically simplifies the custom preloading, by automatically loading all visible links on the page.

Install:

npm install --save ngx-quicklink

Load the module:

import { QuicklinkStrategy, QuicklinkModule } from 'ngx-quicklink';

@NgModule({
declarations: [AppComponent, HomeComponent],
imports: [
BrowserModule,
MatSidenavModule,
BrowserAnimationsModule,
QuicklinkModule,
RouterModule.forRoot(
[
{
path: '',
component: HomeComponent
},
{
path: 'nyan',
loadChildren: () =>
import('./nyan/nyan.module').then(m => m.NyanModule)
},
{
path: 'about',
loadChildren: () =>
import('./about/about.module').then(m => m.AboutModule)
}
],
{
preloadingStrategy: QuicklinkStrategy //PreloadAllModules
}
)
],
providers: [],
bootstrap: [AppComponent]
})

[Angular 8] Custom Route Preloading with ngx-quicklink and Angular的更多相关文章

  1. [Angular] Read Custom HTTP Headers Sent by the Server in Angular

    By default the response body doesn’t contain all the data that might be needed in your app. Your ser ...

  2. Angular 1 深度解析:脏数据检查与 angular 性能优化

    TL;DR 脏检查是一种模型到视图的数据映射机制,由 $apply 或 $digest 触发. 脏检查的范围是整个页面,不受区域或组件划分影响 使用尽量简单的绑定表达式提升脏检查执行速度 尽量减少页面 ...

  3. angular路由——ui.route

    angular路由 使用案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  4. [Angular] Create a custom validator for template driven forms in Angular

    User input validation is a core part of creating proper HTML forms. Form validators not only help yo ...

  5. [Angular] Http Custom Headers and RequestOptions

    updatePassenger(passenger: Passenger): Observable<Passenger> { let headers = new Headers({ 'Co ...

  6. [Angular] Create custom validators for formControl and formGroup

    Creating custom validators is easy, just create a class inject AbstractControl. Here is the form we ...

  7. [Angular 2] Custom Validtors

    Create a custom validtor which only accepts the string start with '123'; function skuValidator(contr ...

  8. [Angular] N things you might don't know about Angular Route

    Prevent Partail Page display: By using Resolver: @Injectable() export class MovieResolver implements ...

  9. 创建自定义路由处理程序(Creating a Custom Route Handler) | 定制路由系统| 高级路由特性 |精通ASP-NET-MVC-5-弗瑞曼

    自定义实现 IRouteHandler

随机推荐

  1. [.Net Core] - 当 .Net Core 版本由 1.x 升级至 2.x 后,Cookie 使用方式变更

    背景 Asp.Net Core 项目升级至 2.x 版本后,Cookie 验证方式需要进行更新. 升级前:.Net Core 1.x Startup.cs public void Configure( ...

  2. WUSTOJ 1321: Alphabet Cookies(Java)字符统计

    题目链接:1321: Alphabet Cookies Description Kitty likes cookies very much, and especially the alphabet c ...

  3. PB笔记之验证必填(pfc_validation)

    pfc_validation事件中可以在保存时进行提示

  4. SPA项目首页导航+左侧菜单

    Mock.js是个啥 前后端分离之后,前端迫切需要一种机制,不再需要依赖后端接口开发,而今天的主角mockjs就可以做到这一点 Mock.js是一个模拟数据的生成器,用来帮助前端调试开发.进行前后端的 ...

  5. Istio流量管理能力介绍

    1      Istio是什么? Istio 1.0版本于8月1号凌晨准点发布,核心特性已支持上生产环境,各大微信公众号.博客纷纷发文转载.那么Istio到底是什么?能解决问题什么? 1. Istio ...

  6. protobuf的使用(netty传输多种对象类型)

    重点是: 1.枚举DataType的定义 2.oneof的使用

  7. Neo4J之标签类型

    Neo4J的标签可以理解一个类,在创建一个节点时可以设置一个或多个标签: 1. 标签名为中文(可以) CRATE(节点名:标签1:标签2{属性1:34} 创建了一个节点名为“节点名”的节点(不可以用节 ...

  8. 关于下载gitbash客户端

    gitbash的安装包找不到了,最近又在准备新机器的环境,需要安装git客户端. https://www.git-scm.com/,网址找到了,但是下载非常缓慢.搜了一下,都是改host,但是改了也没 ...

  9. ol li 兼容

    ol 标签在 chrome 60 和 safari12 缩进不一样. 因为序号距离copy距离不一样,导致显示不一样.解决办法. list-style-position: inside;text-in ...

  10. Intellij里检出svn报错找不到svn解决办法

    Intellij里检出svn报错找不到,解决办法: 1. 安装svn客户端: 2. 去掉settings->version control->subversion里的use command ...