blank page on tab view after upgrading to 8.2.0 without any error!

[alqabali]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 6.0.3
• Cross-platform modules:6.0.0
• Android Runtime:6.0.2
• iOS Runtime:6.0.2
• Plugin(s):
  "nativescript-appavailability": "^1.3.2",
  "nativescript-appversion": "^1.4.2",
  "nativescript-directions": "^1.3.1",
  "nativescript-drop-down": "^5.0.4",
  "nativescript-exit": "^1.0.1",
  "nativescript-fancyalert": "^3.0.9",
  "nativescript-geolocation": "^5.1.0",
  "nativescript-google-maps-sdk": "^2.7.0",
  "nativescript-image": "^2.2.5",
  "nativescript-loading-indicator": "^2.5.2",
  "nativescript-ngx-slides": "^6.1.0",
  "nativescript-permissions": "^1.3.7",
  "nativescript-phone": "^1.4.0",
  "nativescript-plugin-firebase": "^9.1.1",
  "nativescript-sqlite": "^2.3.3",
  "nativescript-theme-core": "~1.0.6",
  "nativescript-toasty": "^2.0.1",
  "nativescript-ui-listview": "^7.0.4",
• NativeScript-Angular:8.2.0
• Angular:8.2.0

Describe the bug
after upgrading to the latest cli and nativescript-angular i get a blank white screen when i start the app wich open 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 blank page) .
To Reproduce
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);
  }
}

Expected behavior

Sample project

Additional context

[tsonevn]

Hi @alqabali,
Can you send us the project or sample one while using {N} Playground? I checked your case with our template-tab-navigation-ng while reusing some of the attached code, however, I was unable to recreate such a problem.

[TishoTM]

@alqabali, I did not try to reproduce your exact scenario but I have been dealing with the same problem all day long (after upgrading from NS4 to NS6) and managed finally to resolve it by changing the component selector name to something different than the URL path.
For example, change your tabs.component selector to tabs-page and any other components in your app.

[NickIliev]

I am hitting the same issue with latest nativescript-angular @VladimirAmiorkov @tsonevn ping me for a project that reproduces the issue (using Android 9 during the tests)

[NickIliev]

@alqabali can you try building the project with Ahead-of)time compilation and let me know if you are still experiencing this one on your side,

tns run android --env.uglify --env.aot

[A-Venkatesh]

It worked for me when i change my code from
this:

<TabContentItem [backgroundColor]="tabList[0].backgroundColor">
                   <StackLayout>
                       <Label text="Bottom Nav Content 1" class="h1 text-center p-t-20"></Label>
                       
                   </StackLayout>
                   <router-outlet name="orderO"></router-outlet>
               </TabContentItem>

to this:

<TabContentItem [backgroundColor]="tabList[0].backgroundColor">
                    <StackLayout>
                        <Label text="Bottom Nav Content 1" class="h1 text-center p-t-20"></Label>
                        <router-outlet name="orderO"></router-outlet>
                    </StackLayout>
                    <!-- <router-outlet name="orderO"></router-outlet> -->
                </TabContentItem>