ANGULAR2 Route Pre-loading policy

1. Description of the problem

In the absence of the lazy route to load, the first time when the load is particularly slow, affecting the user experience, ANGULAR2 can use Loadchildren lazy load, the first time to use only load the required modules, other modules in the real use of the time will go to load, When you open the browser console to view JS load, will find you in the use of the corresponding JS will be loaded, resulting in the first click on the function of the corresponding module will be stuck, the back in use will not be, so that the user experience is not good, then tell you if the use of preload strategy to solve this problem.

2. Pre-loading strategy

Routermodule.forroot's second added a configuration option, one of the people's configuration options is Preloadingstrategy configuration, of course it has other configuration, here only Preloadingstrategy, this configuration is a preload policy configuration, we need to implement One's own preload strategy, in some scenarios that do not need to be preloaded, plus we can not configure, First we create a selective-preloading-strategy.ts file, using class to implement the Preload method of the Preloadingstrategy interface, the code is as follows:

Import {preloadingstrategy, Route} from "@angular/router";
Import {observable} from "Rxjs";
/**
 * Pre-loading
 policy
/Export class Selectivepreloadingstrategy implements Preloadingstrategy {
    preload ( Route:route, load:function): observable<any> {
        //Pre-loading return Route.data when configuration data: {preload:true} in Routing
        && route.data && route.data[' preload ']? Load (): Observable.of (null);
    }

}

The above meaning is very simple, when you configure the data: {preload:true} parameters in the route, this strategy will return a load (), indicating the need to preload, if not configured without preload, of course, you can also, in turn, the default is preload, Do not load when the configuration does not need preload, just like my github, I use it flexibly.

Next, add the policy in the route, which is the configuration in Routermodule.forroot, as follows:

Import {Ngmodule} from             ' @angular/core ';
Import {routermodule, Routes} from ' @angular/router ';

Import {Selectivepreloadingstrategy} from "./selective-preloading-strategy";

Import {logincomponent} from      './login/login.component ';
Import {maincomponent} from   './main/main.component ';



/**
 * App routing
/const Routes:routes = [
  {path: ', Redirectto: '/login ', Pathmatch: ' Full '},
  {
  path: ' Login ',  
     component:logincomponent
  },
  { 
     path: ' app ',  
     component:maincomponent,
     loadchildren: ' App/main/main.module#mainmodule ',
     data: {preload:true}
  }
];

Export Const approutes=routermodule.forroot (routes,{preloadingstrategy:selectivepreloadingstrategy});

You will also need to add the providers in the Appmodule code as follows:

/**
 * App Module
 *
/@NgModule ({
  imports: [
    approutes,
    browsermodule,
    Browseranimationsmodule,
    ngbmodule.forroot (),
    mainmodule,
    loginmodule
  ],
  declarations: [
    Appcomponent,
    toastboxcomponent,
    toastcomponent,
    spincomponent
  ],
  providers: [ Appservice,toastservice,httpservice,spinservice,selectivepreloadingstrategy],
  exports:[ToastBoxComponent, Spincomponent],
  bootstrap: [Appcomponent]
})
export class Appmodule {}

Next, use the route in the following code:

Import {ngmodule, OnInit} from ' @angular/core ';
Import {routermodule, Routes, Router} from ' @angular/router ';

/**
 * Principal route
/Const Routes:routes = [
      {path: ' Home ', Loadchildren: ' App/home/home.module#homemodule ', Data: {preload:true}},
      {path: ' demo ', Loadchildren: ' App/demo/demo.module#demomodule ', data: {preload:true}},
  ];

Export Const Mainroutes = routermodule.forchild (routes);

Open browser F12, see JS Loading, you will find that when the page is loaded, will preload other modules of JS

Official online has a default implementation preloadallmodules, reference to the official website description.