Nativescript + angular : blank page on tab view after upgrading to 8.2.0 without any error

Question

Environment

• CLI: 6.0.3
• Cross-platform modules:6.0.0
• Android Runtime:6.0.2
• iOS Runtime:6.0.2
• Plugin(s):
• NativeScript-Angular:8.2.0
• Angular:8.2.0

After upgrading to the latest cli and nativescript-angular I get a blank white screen when I start the app which opens the page tab based, but when I try to output something using the component ts file I can get it on the console. The problem is only at the template level (I get a blank page).

this is my app.modules.ts file:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { CoreModule } from "./core/core.module";
import { SharedModule } from "./shared/shared.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { NativeScriptCommonModule } from "nativescript-angular/common";
import { TNSImageModule } from 'nativescript-image/angular';
import * as applicationModule from "tns-core-modules/application";
import * as imageModule  from "nativescript-image";
declare var GMSServices: any;
if (applicationModule.android) {
  applicationModule.on(applicationModule.launchEvent, () => {
    console.log('initialize pipeline');
    imageModule.initialize();
  });
} else {
  GMSServices.provideAPIKey("*********");
}

// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from "nativescript-angular/forms";

// Uncomment and add to NgModule imports if you need to use the HttpClient wrapper
// import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";

@NgModule({
  bootstrap: [AppComponent],
  imports: [NativeScriptCommonModule, CoreModule, SharedModule, TNSImageModule, AppRoutingModule],
  declarations: [AppComponent],
  providers: [],
  schemas: [NO_ERRORS_SCHEMA]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule {}

this is the app-routing.modules.ts

import { NgModule } from "@angular/core";
import { NativeScriptRouterModule } from "nativescript-angular/router";
//import { hasKey } from "tns-core-modules/application-settings";
import { Routes } from "@angular/router";
//const homePath = (hasKey('skipLoginScreen') ? 'home/tabs':'auth/login');

const routes: Routes = [
  {
    path: "",
    redirectTo: "home",
    pathMatch: "full"
  },
  {
    path: "home",
    loadChildren: "~/app/home/home.module#HomeModule"
  },
  {
    path: "products",
    loadChildren: "~/app/products/products.module#ProductsModule"
  },
  {
    path: "auth",
    loadChildren: "~/app/auth/auth.module#AuthModule"
  },
  {
    path: "account",
    loadChildren: "~/app/account/account.module#AccountModule"
  },
  {
    path: "cart",
    loadChildren: "~/app/cart/cart.module#CartModule"
  }
];

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

this is my home-routing.module.ts:

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { TabsComponent } from "./tabs.component";
import { HomeComponent } from "./home-tab/home.component";
import { CategoriesComponent } from "./categories-tab/categories.component";
import { InfoComponent } from "./info-tab/info.component";
import { LocationsComponent } from "./locations-tab/locations.component";
import { AccountComponent } from "./account-tab/account.component";

export const COMPONENTS = [TabsComponent, HomeComponent, CategoriesComponent, InfoComponent, LocationsComponent, AccountComponent];

const routes: Routes = [
  {
    path: "",
    redirectTo: "tabs",
    pathMatch: "full"
  },
  {
    path: "tabs",
    component: TabsComponent,
    children: [{ path: "home", component: HomeComponent, outlet: "homeTab" }, { path: "categories", component: CategoriesComponent, outlet: "categoriesTab" }, { path: "info", component: InfoComponent, outlet: "infoTab" }, { path: "locations", component: LocationsComponent, outlet: "locationsTab" }, { path: "account", component: AccountComponent, outlet: "accountTab" }]
  }
];

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

this is my home.module.ts:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { HomeRoutingModule, COMPONENTS } from "./home-routing.module";
import { SharedModule } from "../shared/shared.module";
import { PushNotificationsService } from './../core/services/push-notifications.service';
// Uncomment and add to NgModule imports if you need to use two-way binding
// import { NativeScriptFormsModule } from "nativescript-angular/forms";

// Uncomment and add to NgModule imports if you need to use the HttpClient wrapper
// import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";

@NgModule({
  imports: [SharedModule, HomeRoutingModule],
  providers: [PushNotificationsService],
  declarations: [...COMPONENTS],
  schemas: [NO_ERRORS_SCHEMA]
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class HomeModule {}

this is my tabs.component.ts:

import { Component, OnInit } from "@angular/core";
import { Page } from "tns-core-modules/ui/page";
import { RouterExtensions } from "nativescript-angular/router";
import { DataService } from "../core/services/data.service";
import { ActivatedRoute } from "@angular/router";

@Component({
  selector: "tabs",
  moduleId: module.id,
  templateUrl: "./tabs.component.html"
})
export class TabsComponent implements OnInit {
  selectedIndex: number = 4;
  constructor(private page: Page, private activeRoute: ActivatedRoute, private dataService: DataService, private routerExt: RouterExtensions) {}

  ngOnInit(): void {
    this.page.actionBarHidden = true;
    this.routerExt.navigate([{ outlets: { homeTab: ["home"], infoTab: ["info"], categoriesTab: ["categories"], accountTab: ["account"], locationsTab: ["locations"] } }], { relativeTo: this.activeRoute });
    this.dataService.getActivatedTab().subscribe(index => {
      this.selectedIndex = index;
    });
  }
  onTabChanged(args) {
    setTimeout(() => {
      this.dataService.setActivatedTab(args.newIndex);
    }, 30);
  }
}