fix(page-router-outlet): make page-router-outlet lazy-loadable (#530)

Author: sis0k0

nativescript-angular/router/page-router-outlet.ts

@@ -152,15 +152,16 @@ export class PageRouterOutlet {
         if (this.locationStrategy._isPageNavigatingBack()) {
             this.activateOnGoBack(activatedRoute, providers, outletMap);
         } else {
-            this.activateOnGoForward(activatedRoute, providers, outletMap);
+            this.activateOnGoForward(activatedRoute, providers, outletMap, loadedResolver);
         }
     }
 
     private activateOnGoForward(
         activatedRoute: ActivatedRoute,
         providers: ResolvedReflectiveProvider[],
-        outletMap: RouterOutletMap): void {
-        const factory = this.getComponentFactory(activatedRoute);
+        outletMap: RouterOutletMap,
+        loadedResolver: ComponentFactoryResolver): void {
+        const factory = this.getComponentFactory(activatedRoute, loadedResolver);
 
         const pageRoute = new PageRoute(activatedRoute);
         providers = [...providers, ...ReflectiveInjector.resolve([{ provide: PageRoute, useValue: pageRoute }])];
@@ -241,31 +242,19 @@ export class PageRouterOutlet {
     }
 
     // NOTE: Using private APIs - potential break point!
-    private getComponentFactory(activatedRoute: any): ComponentFactory<any> {
+    private getComponentFactory(activatedRoute: any, loadedResolver: ComponentFactoryResolver): ComponentFactory<any> {
         const snapshot = activatedRoute._futureSnapshot;
         const component = <any>snapshot._routeConfig.component;
         let factory: ComponentFactory<any>;
-        try {
-            factory = typeof component === 'string' ?
-                snapshot._resolvedComponentFactory :
-                this.componentFactoryResolver.resolveComponentFactory(component);
-        } catch (e) {
-            if (!(e.constructor.name === "NoComponentFactoryError")) {
-                throw e;
-            }
-            // TODO: vsavkin uncomment this once ComponentResolver is deprecated
-            // const componentName = component ? component.name : null;
-            // console.warn(
-            //     `'${componentName}' not found in precompile array.  To ensure all components referred
-            //     to by the RouterConfig are compiled, you must add '${componentName}' to the
-            //     'precompile' array of your application component. This will be required in a future
-            //     release of the router.`);
-
-            factory = snapshot._resolvedComponentFactory;
+
+        if (loadedResolver) {
+            factory = loadedResolver.resolveComponentFactory(component);
+        } else {
+            factory = this.componentFactoryResolver.resolveComponentFactory(component);
         }
+
         return factory;
     }
-
 }
 
 function log(msg: string) {

tests/app/lazy-load-main.ts

@@ -0,0 +1,17 @@
+import { Component } from "@angular/core";
+import { FirstComponent } from "./first.component";
+
+@Component({
+    template: `
+    <Label text="Lazy load router"></Label>
+    <page-router-outlet></page-router-outlet>
+    `
+})
+export class LazyLoadMain {
+}
+
+export const routes = [
+    { path: "", redirectTo: "first/lazy-load", pathMatch: "full" },
+    { path: "first/:id", component: FirstComponent },
+    { path: "second", loadChildren: () => require("./lazy-loaded.module")["SecondModule"] }
+];

tests/app/lazy-loaded.module.ts

@@ -0,0 +1,20 @@
+import { NgModule } from '@angular/core';
+import { NativeScriptModule } from "nativescript-angular";
+import { NativeScriptRouterModule } from "nativescript-angular/router";
+
+import { SecondComponent } from './second.component';
+
+const routes = [
+    { path: ":id", component: SecondComponent },
+];
+
+@NgModule({
+    declarations: [SecondComponent],
+    imports: [
+        NativeScriptModule,
+        NativeScriptRouterModule,
+        NativeScriptRouterModule.forChild(routes)
+    ]
+})
+export class SecondModule { }
+

tests/app/main.ts

@@ -16,6 +16,7 @@ import "ui/frame";
 import {HOOKS_LOG} from "./base.component";
 import {MultiPageMain, routes as multiPageRoutes} from "./multi-page-main.component";
 import {SinglePageMain, routes as singlePageRoutes} from "./single-page-main.component";
+import {LazyLoadMain, routes as lazyLoadRoutes} from "./lazy-load-main";
 import {FirstComponent} from "./first.component";
 import {SecondComponent} from "./second.component";
 import { OpaqueToken, NgModule } from "@angular/core";
@@ -42,6 +43,8 @@ const singlePageHooksLog = new BehaviorSubject([]);
 const singlePageHooksLogProvider = {provide: HOOKS_LOG, useValue: singlePageHooksLog};
 const multiPageHooksLog = new BehaviorSubject([]);
 const multiPageHooksLogProvider = {provide: HOOKS_LOG, useValue: multiPageHooksLog};
+const lazyLoadHooksLog = new BehaviorSubject([]);
+const lazyLoadHooksLogProvider = {provide: HOOKS_LOG, useValue: lazyLoadHooksLog};
 
 @NgModule({
     bootstrap: [
@@ -107,6 +110,34 @@ class SinglePageModule {}
 })
 class MultiPageModule {}
 
+@NgModule({
+    bootstrap: [
+        LazyLoadMain
+    ],
+    declarations: [
+        LazyLoadMain,
+        FirstComponent,
+    ],
+    entryComponents: [
+        LazyLoadMain,
+    ],
+    imports: [
+        NativeScriptModule,
+        NativeScriptFormsModule,
+        NativeScriptRouterModule,
+        NativeScriptRouterModule.forRoot(lazyLoadRoutes),
+    ],
+    exports: [
+        NativeScriptModule,
+        NativeScriptFormsModule,
+        NativeScriptRouterModule,
+    ],
+    providers: [
+        rootViewProvider,
+        lazyLoadHooksLogProvider,
+    ]
+})
+class LazyLoadModule {}
 
 application.start({
     create: (): Page => {
@@ -120,9 +151,10 @@ application.start({
 
             //profiling.start('ng-bootstrap');
             console.log('BOOTSTRAPPING TEST APPS...');
-            
+
             platform.bootstrapModule(SinglePageModule);
             platform.bootstrapModule(MultiPageModule);
+            platform.bootstrapModule(LazyLoadModule);
         }
 
         page.on('loaded', onLoadedHandler);

tests/e2e-tests/lazy-load-routing.js

@@ -0,0 +1,59 @@
+"use strict";
+var nsAppium = require("nativescript-dev-appium");
+
+describe("lazy load routing", function () {
+    this.timeout(360000);
+    var driver;
+
+    before(function () {
+        var caps = {
+            browserName: '',
+            'appium-version': '1.6',
+            platformName: 'Android',
+            platformVersion: '4.4.4',
+            deviceName: 'Android Emulator',
+            app: undefined // will be set later
+        };
+        driver = nsAppium.createDriver(caps);
+    });
+
+    after(function () {
+        return driver
+        .quit()
+        .finally(function () {
+            console.log("Driver quit successfully");
+        });
+    });
+
+    it("loads default path", function () {
+        return driver
+            .waitForElementByAccessibilityId("first-lazy-load", 300000)
+            .elementByAccessibilityId("first-lazy-load")
+                .should.eventually.exist
+            .text().should.eventually.equal("First: lazy-load")
+    });
+
+    it("navigates and returns", function () {
+        var expectedHookLog = [
+            "first.init", // <-- load
+            "second.init", // <-- forward (first component is not destroyed)
+            "second.destroy"] // <-- back (first component is reused)
+            .join(",");
+        return driver
+            .waitForElementByAccessibilityId("first-navigate-lazy-load", 300000)
+            .elementByAccessibilityId("first-navigate-lazy-load")
+                .should.eventually.exist
+            .tap()
+            .elementByAccessibilityId("second-lazy-load")
+                .should.eventually.exist
+            .text().should.eventually.equal("Second: lazy-load")
+            .elementByAccessibilityId("second-navigate-back-lazy-load")
+                .should.eventually.exist
+            .tap()
+            .elementByAccessibilityId("first-lazy-load")
+                .should.eventually.exist
+                .text().should.eventually.equal("First: lazy-load")
+            .elementByAccessibilityId("hooks-log-lazy-load")
+                .text().should.eventually.equal(expectedHookLog)
+    });
+});