Ionic-framework: Property 'nav' does not exist on type 'AnyPage'.

Created on 8 Mar 2016  路  6Comments  路  Source: ionic-team/ionic-framework

Short description of the problem:

Error: Property 'nav' does not exist on type 'AnyPage'.

What behavior are you expecting?

How can I get rid of this error on all code editors and IDEs as well as on compile and ionic serve?

Steps to reproduce:

  1. just generate a page
  2. run ionic serve
  3. you will see the error of the nav but the nav is working
ERROR in [default] /.../app/pages/home-page/home-page.ts:15:9 
Property 'nav' does not exist on type 'HomePage'.

Problem with generated code:

constructor(@Inject(NavController) nav) {
    this.nav = nav;//this line throw errors on all Editors and IDEs and on Terminal
 }

Ionic Version: 2.0.0-beta.2

Browser & Operating System: iOS / Android / Chrome
Terminal

Run ionic info from terminal/cmd prompt:

Cordova CLI: 6.0.0
Ionic Version: 2.0.0-beta.2
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
ios-deploy version: 1.8.5 
ios-sim version: 5.0.6 
OS: Mac OS X El Capitan
Node Version: v4.3.2
Xcode version: Xcode 7.2.1 Build version 7C1002 

Most helpful comment

I have added the following outside of the constructor and above then it fixed the problem:
private nav:NavController = null;

All 6 comments

I think what you're seeing is a warning from the linter. If so you have a few options, amongst them you could just write:

constructor(private nav : NavController) {}

this way "this.nav" will be available in the class automagically (it creates a field under the hood).

same thing, I have tried it and the error still occur tho

I have added the following outside of the constructor and above then it fixed the problem:
private nav:NavController = null;

would this work? without having the "navController" in the constructor function..

import {Page, NavController} from 'ionic-angular';
import {Page1} from '../page1/page1';

@Page({
  templateUrl: 'build/pages/tabs/tabs.html'
})
export class TabsPage {
  constructor() {
    this.nav = NavController;
    console.log(NavController)
    this.tab1Root = Page1;
  }
}

rather than

constructor(nav: NavController) {
  this.nav = nav;
}

somehow when constructor is called with parameter, it fails to compile..

The way to get rid of the errors on Atom or other IDEs is to declare the nav variable:

export class YourPage {

  private nav:NavController = null; // please add this line as default generated page plus the --ts option on command line.

  static get parameters() {
    return [[NavController]];
  }

  constructor(nav:NavController) {
    this.nav = nav;
  }

Hello! As it looks like you found a solution to this issue I will be closing this issue, thanks again!

Was this page helpful?
0 / 5 - 0 ratings