Action-Bar shown twice in Groceries Tutorial



Hello There,

I’m just getting started with NativeScript and I am working on the Groceries Tutorial. So this is a real N00b Question :sweat_smile:.

When the Routing was inserted into the App I suddenly got the Action-Bar twice.


I’m a bit confused at this point because I did not configure the Second Action-Bar in any Template or Code. I reviewed the Code (mostly copy & paste from the mentioned tutorial page) but can not figure it out with my minimal Angular and NativeScript skills. :thinking:

Help :tired_face:


Only pages inside frame (page-router-outlet incase of Angular) can create ActionBar. Do you have nested page router outlets?


Hello Manojdcoder,

i’m not quite sure. I do have the page-router-outlet in my app.component.ts.

Here is some Code that i think is relevant for my issue:


import { Component } from "@angular/core";

  selector: "main",
  template: "<page-router-outlet></page-router-outlet>"
export class AppComponent { }


import { Component } from "@angular/core";
import { Router } from "@angular/router";

import { User } from "../../shared/user/user";
import { UserService } from "../../shared/user/user.service";

  selector: "my-app",
  providers: [UserService],
  templateUrl: "pages/login/login.html",
  styleUrls: ['pages/login/login-common.css','pages/login/login.css' ]
export class LoginComponent {
  user : User;
  isLoggingIn = true;

        private router: Router,
        private userService: UserService,
    ) {
    this.user = new User(); = "s********@**********";
    this.user.password = "********";

  submit() {
    if (this.isLoggingIn) {
    } else {

  login() {
        () => this.router.navigate(["/list"]),
        (error) => alert("Unfortunately we could not find your account.")

  signUp() {
        () => {
          alert("Your account was successfully created.");
        () => alert("Unfortunately we were unable to create your account.")

  toggleDisplay() {
    this.isLoggingIn = !this.isLoggingIn;


  <Image src="res://logo_login" stretch="none" horizontalAlignment="center"></Image> 
  <TextField hint="Email Address" keyboardType="email" [(ngModel)]=""
    autocorrect="false" autocapitalizationType="none"></TextField>
  <TextField hint="Password" secure="true" [(ngModel)]="user.password"></TextField>

  <Button [text]="isLoggingIn ? 'Anmelden' : 'Registrieren'" class="submit-button" (tap)="submit()"></Button>
  <Button [text]="isLoggingIn ? 'Registrieren' : 'zurück zur Anmeldung'" (tap)="toggleDisplay()"></Button>

If I remove page-router-outlet from the template String of app.component.ts one of the Actions Bars is still shown but of course none of the pages I coded with the help of the mentioned Tutorial.



Without a page router outlet, you would not have a ActionBar in your app even if you define one (assuming you are using {N} 4.x. Is it possible for you to setup a playground where we can reproduce the issue?


I had to do some code modifications to get it running in playground, but it was a good test if I had some basic Idea of what is going on in my tutorial project.

And I’m “pleased” :smirk: to say that the Problem persists.


So the problem is here,

platformNativeScriptDynamic({ createFrameOnBootstrap: true }).bootstrapModule(AppModule);

You don’t have to set createFrameOnBootstrap when you are already using a page router outlet in your app.component. If you remove this, the another action bar will go away.


I was sure that it was just a stupid mistake.
Thank you very much. You helped me a lot with the Problem and understanding a bit more of NativeScript. :bowing_man:

platformNativeScriptDynamic({ createFrameOnBootstrap: false }).bootstrapModule(AppModule);