CODEWITHSUNDEEP
typescriptionic2
Bartek Mikołajczuk
Bartek Mikołajczuk

Reputation: 1

Ionic 2 navigation pages dont work

I have problem with my first ionic 2 app just doing a tutorial form official blog of ionic and this just dont work for me, this is my home.ts

import {Page} from 'ionic-angular';
import {AboutPage} from '../about/about';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  aboutPage = AboutPage;

  constructor() {
  this.name = "Bartek";
  }
}

and this is my home.html and this should just navigate me to next page:

<ion-navbar *navbar>


<ion-title>
    Hello World
  </ion-title>
</ion-navbar>

<ion-content class="home">
  <ion-card>
    <ion-card-header>
      Card Header
    </ion-card-header>
    <ion-card-content>
      Hello
      <button [navPush]="aboutPage">Go To About</button>
    </ion-card-content>
  </ion-card>
</ion-content>

but when i run a "ionic-serve" in CLI this give me a that error

ionic $ TypeScript error: 

/home/bartomiej/Programowanie/Nauka/Ionic/helloWordl/app/pages/home/home.ts(2,25): Error TS2307: Cannot find module '../about/about'.
TypeScript error: /home/bartomiej/Programowanie/Nauka/Ionic/helloWordl/app/pages/home/home.ts(11,8): Error TS2339: Property 'name' does not exist on type 'HomePage'.
[20:41:16] Starting 'html'...
[20:41:17] Finished 'html' after 770 ms

/home/bartomiej/Programowanie/Nauka/Ionic/helloWordl/app/pages/about/about.js:1
import {Page, NavController} from 'ionic-angular';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'
HTML changed: www/build/pages/about/about.html
HTML changed: www/build/pages/home/home.html

Anyone have idea what is wrong there i just follow a instruction from official blog :)

Upvotes: 0

Views: 2995

Answers (3)

Aissar Murad
Aissar Murad

Reputation: 1

I think this is because you need to call the NavController within your Constructor. This should solve the issue.

import {Page} from 'ionic-angular';
import {AboutPage} from '../about/about';

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  aboutPage = AboutPage;

  constructor(public navCtrl: NavController) {
    this.navCtrl;
    this.name = "Bartek";
  }
}

Upvotes: 0

roydell Clarke
roydell Clarke

Reputation: 66

Your variable is in global space. Use "let" keyword for block scoping. Or place your "aboutPage" variable in the body of the constructor like so: this.aboutPage.

Upvotes: 0

Denko Mancheski
Denko Mancheski

Reputation: 2719

Create a function in the class which will do the navigation and call the function on the button instead of using [navPush]. Also you will need to Inject the NavController inside the constructor. Example:

constructor(private nav: NavController){
}

navigateAbout(){
  this.nav.push(AboutPage);
}

Than in the html just do <button (click)="navigateAbout"></button> I think this is better approach, plus you will see the whole logic in the class instead of having it in the html

If you still want to do your approach, try injecing NavController in the constructor, maybe it will help

Upvotes: 2

Related Questions