Navigate from root AppComponent using RouterExtensions


#1

In combination with @Eddy’s nativescript-firebase plugin, I’m trying to rework my app’s login/signup flow so that upon load, the firebase.init call attaches a handler for onAuthStateChanged, and within that handler I’d like to navigate to either my Tab View component or my Login component using a Router or RouterExtensions that’s been injected in to my root AppComponent:

export class AppComponent implements OnInit {
  constructor(router: RouterExtensions) {}

  ngOnInit() {
    firebase.init({
        onAuthStateChanged: data => 
          this.router.navigate([data.loggedIn ? "/tabView" : "/login"])
      })
      .then(_ => console.log("Firebase init done"))
      .catch(err => console.error(`firebase.init error: ${err}`));
  }
}

Here’s a minimal chunk of my route defs:

export const routes = [
  { path: "tabView", component: tabViewComponent },
  { path: "login", component: LoginComponent },
];

The problem is that although all of the auth and navigation code is hit without error (including the onInit code in both tabViewComponent and loginComponent), all I get is a blank screen. I’m suspicious it’s related to the fact that I have no default route defined (ie. for path: ""), but adding one guarantees that one of the components will be loaded.

Is there some special mechanism I need to use in order to navigate from the AppComponent? (this would make sense, I just haven’t encountered such a thing yet)

Also note that while I could add a route def like { path: "", component: AppComponent },, I end up with two AppComponent instances since there also one being bootstrapped.