NativeScript Angular Lazy Loading

nativescriptcore

#1

Hi, Use this link: https://www.youtube.com/watch?v=78ALNCUn6Hk

But I can not get it to work for me.

I need to access the routers of my modules and their children.

app.module.ts

import { NgModule, NgModuleFactoryLoader, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";


import { NativeScriptRouterModule, NSModuleFactoryLoader } from "nativescript-angular/router";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent
    ],
    providers: [
        {provide:NgModuleFactoryLoader, useClass: NSModuleFactoryLoader}
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

app-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, PreloadAllModules } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

const routes: Routes = [
    { path: '', redirectTo: '/external', pathMatch: 'full' },
    { path: 'external', loadChildren: './modules/external/external.module#ExternalModule' },
];

@NgModule({
    imports: [NativeScriptRouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})],
    exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

Module external: external.module.ts

import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptRouterModule} from "nativescript-angular/router";
import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";


import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
import { NativeScriptUICalendarModule } from "nativescript-ui-calendar/angular";
import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
import { NativeScriptUIAutoCompleteTextViewModule } from "nativescript-ui-autocomplete/angular";
import { NativeScriptUIGaugeModule } from "nativescript-ui-gauge/angular";
import { NativeScriptFormsModule } from "nativescript-angular/forms";

import { ExternalRoutingModule } from "./external-routing.module";

import { LoginComponent } from "./components/login/login.component";
import { CalculatorComponent } from "./components/calculator/calculator.component";

@NgModule({
    imports: [
        ExternalRoutingModule,
        NativeScriptUISideDrawerModule,
        NativeScriptUIListViewModule,
        NativeScriptUICalendarModule,
        NativeScriptUIChartModule,
        NativeScriptUIDataFormModule,
        NativeScriptUIAutoCompleteTextViewModule,
        NativeScriptUIGaugeModule,
        NativeScriptFormsModule,
        NativeScriptModule
    ],
    declarations: [
        LoginComponent,
        CalculatorComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class ExternalModule { }

Module external: external-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { LoginComponent } from "./components/login/login.component";
import { CalculatorComponent } from "./components/calculator/calculator.component";

const routes: Routes = [
    { path: '', component: LoginComponent },
    { path: 'login', component: LoginComponent },
    { path: 'calculator', component: CalculatorComponent }
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class ExternalRoutingModule { }

I need access to the calculator route:

image

I appreciate your help


#2

I found the solution: