Is possible to use dynamic routing(lazy loading) feature of Angular2 in NativeScript + Angular2

From @wantaek on November 14, 2016 8:42

Did you verify this is a real problem by searching [Stack Overflow]

Yes

Tell us about the problem

I want to use dynamic routing(lazy loading) feature of Angular2 in NativeScript + Angular2

This is a dynamic routing(lazy loading) of Angular2 sample source. http://plnkr.co/edit/fBqrEpqafiVSB2Vvapzb?p=preview

I use this source to my NativeScript + Angular2 project. But when i try to navigate ‘lazy’ page, error occurred.

CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:344:22: Error: Uncaught (in promise): ReferenceError: Can’t find variable: System

Which platform(s) does your issue occur on?

I test in iOS. It may occur both.

Please provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) 2.4.0
• Cross-platform modules: (check the ‘version’ attribute in the node_modules/tns-core-modules/package.json file in your project) 2.4.0
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project) 2.4.0
• Plugin(s): (look for the version number in the package.json file of your project)

Please tell us how to recreate the issue in as much detail as possible.

When I try to navigate to ‘lazy’ page, error ocurred:

CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone.js/dist/zone-nativescript.js:344:22: Error: Uncaught (in promise): ReferenceError: Can’t find variable: System

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

import {Component} from '@angular/core';
import {Router} from '@angular/router';

@Component({
    selector: "my-app",
    // templateUrl: "app.component.html",
    template: `
        <StackLayout>
            <StackLayout class="nav">
                <Button text="First" 
                    [nsRouterLink]="['/']"></Button>
                <Button text="Second"
                    [nsRouterLink]="['/app']"></Button>
                <Button text="Lazy"
                    [nsRouterLink]="['/lazy']"></Button>
            </StackLayout>

            <router-outlet></router-outlet>
        </StackLayout>
    `
})
export class AppComponent {
    loaded: boolean = false;
    constructor(private router: Router) {}

    ngOnInit() {
        let routerConfig = this.router.config;

        if (!this.loaded) {
            routerConfig.unshift({
                path: `lazy`,
                loadChildren: 'app/portal.module#PortalModule'
            });

            console.log('/app route (Portal) added', JSON.stringify(routerConfig));

            this.router.resetConfig(routerConfig);
            this.loaded = true;
        }
    }
}

Copied from original issue: NativeScript/NativeScript#3085

[otaran]

For those of you who googled for Angular Router lazy loading and is wondering why you can’t just use string-based routes like loadChildren: './secure/secure.module#SecureModule', well… you can! Just inject NSModuleFactoryLoader from nativescript-angular/router in your AppModule:

import { NSModuleFactoryLoader } from 'nativescript-angular/router';

@NgModule({
    ...
    providers: [
        { provide: NgModuleFactoryLoader, useClass: NSModuleFactoryLoader }
    ]
})
export class AppModule { }

NSModuleFactoryLoader is available since at least nativescript-angular@1.4.1.

[astrobob]

Hi @NickIliev

Thank you very much! It works perfectly! In didn’t know about CanActivateChild

For those who want to see the code difference, I put below:

in my app.router:

const APP_ROUTES: any = [
  { path: '', redirectTo: '/client', pathMatch: 'full'},
  { path: 'secure', loadChildren: () => require("./secure/secure.module")["SecureModule"], canActivateChild: [AuthGuard]},
  { path: 'signin', component: SigninComponent },
];

in my auth.guard.ts (that I import in my app.router.ts)

import { Injectable } from "@angular/core";
import { CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from "@angular/router";
import { Observable as RxObservable } from "rxjs/Rx";

import { AuthService } from "./auth.service";

@Injectable()
export class AuthGuard implements CanActivateChild {
  constructor(private authService: AuthService) {}
  canActivateChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): RxObservable<boolean>|Promise<boolean>|boolean {
    return this.authService.isAuthenticated();
  }
}

Cheers