feat(preload): added Preload strategies module

Author: xmlking

PLAYBOOK.md

@@ -318,13 +318,6 @@ ng g lib ContextMenu --tags=public-module --publishable=true --unit-test-runner=
 ng g component ContextMenu --project=context-menu --flat -d
 ng g directive ContextMenuTrigger --project=context-menu --flat -d
 
-# generate components for `Prefetch` Module
-ng g service  Prefetch --tags=public-module --prefix=ngx --publishable=true --unit-test-runner=jest
-ng g service  PrefetchRegistry --project=prefetch --skipTests -d
-ng g service  QuicklinkStrategy --project=prefetch --skipTests -d
-ng g service  LinkHandler --project=prefetch --skipTests -d
-ng g directive Link --project=prefetch --flat --skipTests -d
-
 # generate components, services for `ThemePicker` Module
 ng g lib ThemePicker --tags=public-module --publishable=true --unit-test-runner=jest
 ng g component ThemePicker --project=theme-picker --flat -d
@@ -407,6 +400,15 @@ ng g directive directives/in-viewport/inViewport  --selector=inViewport --projec
 ng g service directives/in-viewport/Viewport --project=ngx-utils --module=in-viewport -d
 
 
+# generate components for `preload` Module
+ng g lib  preload --tags=public-module --prefix=ngx --publishable=true --unit-test-runner=jest --skipTests
+ng g service strategies/selected/PreloadSelectedStrategy --project=preload --skipTests -d
+ng g module     strategies/viewport/PreloadViewport --flat --project=preload --skipTests -d
+ng g service    strategies/viewport/PreloadViewportStrategy --project=preload --skipTests -d
+ng g service    strategies/viewport/PrefetchRegistry --project=preload --skipTests -d
+ng g service    strategies/viewport/LinkHandler --project=preload --skipTests -d
+ng g directive  strategies/viewport/Link --project=preload  --module=preload-viewport --skipTests -d
+
 # generate components for `toolbar` Module
 ng g lib toolbar --tags=private-module --unit-test-runner=jest -d
 ng g component toolbar                        --project=toolbar --flat -d

angular.json

@@ -1299,6 +1299,36 @@
           }
         }
       }
+    },
+    "preload": {
+      "root": "libs/preload",
+      "sourceRoot": "libs/preload/src",
+      "projectType": "library",
+      "prefix": "ngx",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-ng-packagr:build",
+          "options": {
+            "tsConfig": "libs/preload/tsconfig.lib.json",
+            "project": "libs/preload/ng-package.json"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": ["libs/preload/tsconfig.lib.json", "libs/preload/tsconfig.spec.json"],
+            "exclude": ["**/node_modules/**"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/builders:jest",
+          "options": {
+            "jestConfig": "libs/preload/jest.config.js",
+            "tsConfig": "libs/preload/tsconfig.spec.json",
+            "setupFile": "libs/preload/src/test-setup.ts"
+          }
+        }
+      }
     }
   },
   "schematics": {

apps/webapp/src/app/app.module.ts

@@ -9,7 +9,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CoreModule } from '@ngx-starter-kit/core';
 
 import { environment } from '@env/environment';
-import { PreloadSelectedModulesList } from './preloading-strategy';
+import { PreloadViewportModule, PreloadViewportStrategy, PreloadSelectedStrategy } from '@ngx-starter-kit/preload';
 
 export class MyHammerConfig extends HammerGestureConfig {
   overrides = <any>{
@@ -23,6 +23,7 @@ export class MyHammerConfig extends HammerGestureConfig {
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    // PreloadViewportModule,
     RouterModule.forRoot(
       [
         { path: '', redirectTo: 'home', pathMatch: 'full' },
@@ -40,7 +41,9 @@ export class MyHammerConfig extends HammerGestureConfig {
       {
         scrollPositionRestoration: 'enabled',
         anchorScrolling: 'enabled',
-        preloadingStrategy: PreloadAllModules, // TODO: PreloadSelectedModulesList
+        preloadingStrategy: PreloadSelectedStrategy,
+        // preloadingStrategy: PreloadViewportStrategy,
+        // preloadingStrategy: PreloadAllModules,
         paramsInheritanceStrategy: 'always',
         // enableTracing: true, // enable to debug routing during development
         // onSameUrlNavigation: 'reload'
@@ -50,7 +53,6 @@ export class MyHammerConfig extends HammerGestureConfig {
     CoreModule, // IMP: Please keep CoreModule after RouterModule
   ],
   providers: [
-    PreloadSelectedModulesList,
     {
       provide: HAMMER_GESTURE_CONFIG,
       useClass: MyHammerConfig,

apps/webapp/src/app/preloading-strategy.ts

@@ -0,0 +1,29 @@
+# Preload
+
+Preload lazy-module strategies
+
+* PreloadSelectedStrategy -  Deterministic pre-fetching based on `preload` value in Route Data.
+* PreloadViewportStrategy - Speculative pre-fetching based on links in `Viewport`
+* PredictivePreloadStrategy - Predictive pre-fetching based google analytics. Use `Guess.JS` 
+
+> `PreloadViewportStrategy` same as @mgechev [ngx-quicklink](https://github.com/mgechev/ngx-quicklink)
+
+### Usecase
+
+- feature-1: load with main core bundle
+- feature-2: preload in background to be ready to use when user navigates to feature-2
+- feature-3: only lazy load if the user navigates to feature-3
+
+### Publish
+```bash
+# build
+ng build preload
+# replace your npm key
+export NPM_TOKEN="00000000-0000-0000-0000-000000000000"
+# publish
+npm publish dist/libs/preload --access public
+```
+
+### TODO
+* make `PreloadViewportStrategy` customizable. 
+

libs/preload/README.md

@@ -0,0 +1,5 @@
+module.exports = {
+  name: 'preload',
+  preset: '../../jest.config.js',
+  coverageDirectory: '../../coverage/libs/preload',
+};

libs/preload/jest.config.js

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/libs/preload",
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

libs/preload/ng-package.json

@@ -0,0 +1,8 @@
+{
+  "name": "@ngx-starter-kit/preload",
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^7.2.0",
+    "@angular/core": "^7.2.0"
+  }
+}

libs/preload/package.json

@@ -0,0 +1,3 @@
+export * from './lib/strategies/viewport/preload-viewport.module';
+export * from './lib/strategies/viewport/preload-viewport-strategy.service';
+export * from './lib/strategies/selected/preload-selected-strategy.service';

libs/preload/src/index.ts

@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+import { PreloadingStrategy, Route } from '@angular/router';
+import { Observable, of } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PreloadSelectedStrategy implements PreloadingStrategy {
+  preload(route: Route, load: Function): Observable<any> {
+    return route.data && route.data.preload ? load() : of(null);
+  }
+}