Nativescript-angular: Using Page this.page.frame._getNavBarVisible is not a function

[tsonevn]

_From @alonikomax on June 9, 2016 8:27_

Please, provide the details below:

Did you verify this is a real problem by searching [Stack Overflow]

Yes

Which platform(s) does your issue occur on?

Android

Please provide the following version numbers that your issue occurs with:

• CLI: 2.0.1
• Cross-platform modules: 2.0.1
• Runtime(s): tns-android 2.0.0
• Plugin(s):
  "@angular/common": "2.0.0-rc.1",
  "@angular/compiler": "2.0.0-rc.1",
  "@angular/core": "2.0.0-rc.1",
  "@angular/router-deprecated": "2.0.0-rc.1",
  "@angular/platform-browser": "2.0.0-rc.1",
  "@angular/platform-browser-dynamic": "2.0.0-rc.1",
  "@angular/platform-server": "2.0.0-rc.1",
  "nativescript-angular": "0.1.1",
  "tns-core-modules": "^2.0.0"
  

  Please tell us how to recreate the issue in as much detail as possible.

When using it happens.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

<Page xmlns:Card="nativescript-cardview">
    <ios>
        <ActionBar title="NONAME">
        </ActionBar>
    </ios>
    <StackLayout>
        <Button text="Workers" tap="moveTo('Workers')"></Button>
        <Button text="Projects"></Button>
        <Card:CardView class="blackCard" elevation="20" margin="10" id="batCard">
            <grid-layout rows="200, auto, auto" columns="auto, auto, *">
                <label text="Batman wants to be friends?" class="info" textWrap="true" row="1" colSpan="3" />
                <button text="ACCEPT" class=" blue" row="2" col="1" />
            </grid-layout>
        </Card:CardView>
    </StackLayout>
</Page>

> JS: EXCEPTION: Error: Uncaught (in promise): TypeError: this.page.frame._getNavBarVisible is not a function
JS: STACKTRACE:
JS: Error: Uncaught (in promise): TypeError: this.page.frame._getNavBarVisible is not a function
JS:     at resolvePromise (/data/data/org.nativescript.NONAME/files/app/tns_modules/zone.js/dist/zone-node.js:496:32)
JS:     at /data/data/org.nativescript.NONAME/files/app/tns_modules/zone.js/dist/zone-node.js:473:14
JS:     at ZoneDelegate.invoke (/data/data/org.nativescript.NONAME/files/app/tns_modules/zone.js/dist/zone-node.js:281:29)
JS:     at Object.NgZoneImpl.inner.inner.fork.onInvoke (/data/data/org.nativescript.NONAME/files/app/tns_modules/@angular/core/src/zone/ng_zone_impl.js:45:41)
JS:     at ZoneDelegate.invoke (/data/data/org.nativescript.NONAME/files/app/tns_modules/zone.js/dist/zone-node.js:280:35)
JS:     at Zone.run (/data/data/org.nativescript.NONAME/files/app/tns_modules/zone.js/dist/zone-node.js:174:44)
JS:     at /data/data/org.nativescript.NONAME/files/app/tns_modules/zone.js/dist/zone-node.js:529:58
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.NONAME/files/app/tns_modules/zone.js/dist/zone-node.js:314:38)
JS:     at Object.NgZoneImpl.inner.inner.fork.onInvokeTask (/data/data/org.nativescript.NONAME/files/app/tns_modules/@angular/core/src/zone/ng_zone_impl.js:36:41)
JS:     at ZoneDelegate.invokeTask (/data/data/org.nativescript.NONAME/files/app/tns_modules/zone.js/dist/zone-node.js:313:43)
JS: Unhandled Promise rejection: this.page.frame._getNavBarVisible is not a function ; Zone: angular ; Task: Promise.then ; Value: TypeError: this.page.frame._getNavBarVisible is not a function
JS: Error: Uncaught (in promise): TypeError: this.page.frame._getNavBarVisible is not a function

_# main.component.ts_

import {Component} from "@angular/core";
import {Worker} from "../../share/Worker/Worker";
import {Router} from "@angular/router-deprecated";

@Component({
    selector: "my-main",
    templateUrl: "./pages/Main/main.xml",
    styleUrls: ["./pages/Main/main.css"]
})

export class MainPage {
    constructor(private router: Router) {
        this.router = router;
    }

    moveTo(where: string) {
        console.log("Navigating to: " + where);
        this.router.navigate([where]);
    }
}

_# app.component.ts_

import {Component} from "@angular/core";
import {RouteConfig} from "@angular/router-deprecated";
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router";
import {MainPage} from "./pages/Main/main.component";
import {WorkersPage} from "./pages/Workers/workers.component";

@Component({
  selector: "main",
  directives: [NS_ROUTER_DIRECTIVES],
  providers: [NS_ROUTER_PROVIDERS],
  template: "<page-router-outlet></page-router-outlet>"
})
@RouteConfig([
  { path: "/Main", component: MainPage, name: "Main", useAsDefault: true },
  { path: "/Workers", component: WorkersPage, name: "Workers" },
])
export class AppComponent {}

_Copied from original issue: NativeScript/NativeScript#2276_

[tsonevn]

Hi @alonikomax,
Thank your for reporting this issue.

I reviewed your issue and found that one possible problem could be due to incorrect using page tag in your NativeScript Angular project. You could review those articles in our documentation: template-syntax and Getting Started Guide. However It would help if you could give me more info about your problem or to send us sample project.

Regards,
@tsonevn

[alonikomax]

Hi @tsonevn, thank you.
Project : https://github.com/alonikomax/MultiPlatformGame

In the getting started there is no usage of the .
But I want to use packages like https://github.com/bradmartin/nativescript-cardview, that needs to extend the XML

[matt4446]

In NativeScript + Angular2 Namespaces xml namespaces are not needed. We register it as an element instead.

https://github.com/matt4446/Demo-Material-NativeScript/blob/master/app/controls/card/card.component.ts

The significant parts:

import { registerElement, ViewClass } from "nativescript-angular/element-registry";
registerElement("CardView", () => require("nativescript-cardview").CardView);

Then you can use it at as: <CardView ></CardView> or create a component as I have done.

https://github.com/matt4446/Demo-Material-NativeScript/blob/master/screenshots/Android/card-views.gif
here is a page for an example:
https://github.com/matt4446/Demo-Material-NativeScript/blob/master/app/pages/cardview/cardView.page.componet.ts

Also your tap binding should be (angular cheatsheet) :

(tap)="moveTo('Workers')"

[RichardSilveira]

As @NathanWalker awnsered me an hour ago on nativescript's slack room:
As already was informed, "You don’t use Page with nativescript and Angular2, so instead try this:

<WebView [src]="url" (loadFinished)="loadFinished($event)"></WebView>

[alonikomax]

Thank you @matt4446 and @RichardSilveira so much!!
And @matt4446 , I was wondering why my tap wasn't working sometimes.

Can close. Thank you.