Action-Bar shown twice in Groceries Tutorial

android

#1

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:.

https://docs.nativescript.org/angular/start/tutorial/ng-chapter-2#25-routing

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

:face_with_raised_eyebrow:

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:


#2

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


#3

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:

app.component.ts

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

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

login.component.ts

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

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

@Component({
  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;

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

  submit() {
    if (this.isLoggingIn) {
      this.login();
    } else {
      this.signUp();
    }
  }

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

  signUp() {
    this.userService.register(this.user)
      .subscribe(
        () => {
          alert("Your account was successfully created.");
          this.toggleDisplay();
        },
        () => alert("Unfortunately we were unable to create your account.")
      );
  }

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

login.html

<StackLayout>
  <Image src="res://logo_login" stretch="none" horizontalAlignment="center"></Image> 
  <TextField hint="Email Address" keyboardType="email" [(ngModel)]="user.email"
    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>
</StackLayout>

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.

Bildschirmfoto%20vom%202018-07-25%2007-44-31


#4

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?


#5

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.


#6

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.


#7

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);