Nativescript's nsRouterLink / nsRouterLinkActive doesnt work with lazy module?


#1

Im trying to add a class to an active route.
Without lazy module it does work , However - with lazy module it doesn’t work.

app.modules.ts

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

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

app.routing.ts

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

const routes: Routes = [

    {
        path        : "lazy1",
        loadChildren: "./lazy1/lazy1.module#Lazy1Module"
    },
    {
        path      : "",
        redirectTo: "/lazy1",
        pathMatch : "full"
    }

];

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

This is the structure of lazy1 :

enter image description here

OK

Module lazy1 is pretty simple :

Lazy1.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import {NativeScriptCommonModule}   from "nativescript-angular/common";
import { NativeScriptFormsModule } from 'nativescript-angular/forms';
import { NativeScriptRouterModule } from 'nativescript-angular/router';

import { Lazy1Routes } from './lazy1.routes';
import { Lazy1Component } from './lazy1/lazy1.component';

@NgModule({
  imports: [
    NativeScriptCommonModule,
    NativeScriptFormsModule,
    NativeScriptRouterModule.forChild(<any>Lazy1Routes)
  ],
  declarations: [
  Lazy1Component
  ],
  schemas: [
    NO_ERRORS_SCHEMA
  ]
})
export class Lazy1Module { }

lazy1.routes.ts

import { Routes }       from '@angular/router';
import {Lazy1Component} from "./lazy1/lazy1.component";

export const Lazy1Routes: Routes = [
    {
        path: '',
        component: Lazy1Component
    }
];

However - Lazy1.component.html has many attempts to catch the route ( and making it red), but without success :

<StackLayout>
  <Label class="h1 title"
    text="lazy1 Is working"></Label>
    <Label    [text]="'ffffffffff2'"   class="active"></Label>
    <Label  [nsRouterLink]="['']" [text]="'ffffffffff2'"   nsRouterLinkActive="active"></Label>
    <Label  [nsRouterLink]="['/']" [text]="'ffffffffff2'"   nsRouterLinkActive="active"></Label>
    <Label  [nsRouterLink]="['/modules/lazy1']" [text]="'ffffffffff3'"   nsRouterLinkActive="active"></Label>
    <Label  [nsRouterLink]="['/modules/lazy1/']" [text]="'ffffffffff3'"   nsRouterLinkActive="active"></Label>
    <Label  [nsRouterLink]="['modules/lazy1/']" [text]="'ffffffffff3'"   nsRouterLinkActive="active"></Label>
    <Label  [nsRouterLink]="['modules/lazy1']" [text]="'ffffffffff3'"   nsRouterLinkActive="active"></Label>
    <Label  [nsRouterLink]="['/lazy1/']" [text]="'ffffffffff3'"   nsRouterLinkActive="active"></Label>
    <Label  [nsRouterLink]="['/lazy1']" [text]="'ffffffffff3'"   nsRouterLinkActive="active"></Label>
    <Label  [nsRouterLink]="['lazy1']" [text]="'ffffffffff3'"    nsRouterLinkActive="active"></Label>
    <Label  [nsRouterLink]="'lazy1'" [text]="'ffffffffff3'"    nsRouterLinkActive="active"></Label>
    <Label  [nsRouterLink]="'/lazy1'" [text]="'ffffffffff3'"    nsRouterLinkActive="active"></Label>
    <Label  [nsRouterLink]="'./lazy1'" [text]="'ffffffffff3'"    nsRouterLinkActive="active"></Label>
</StackLayout>

And as you can see , none of them are catching the route :

enter image description here

The first red is just to show that it does recognize the active class.

BTW

If I load that module NOT LAZILY , it does work :

enter image description here

Question

What am I missing here and why it doesn’t activate the routes when lazy loaded ?

Here is a working nativescript playground demo which does work : https://play.nativescript.org/?template=play-ng&id=xp4pu1

And an empty project which does not work : https://ufile.io/hifc0