Signup for the Ionic Newsletter to get the latest news and updates!

  • olavocneto

    Very good, clear and simple. Thank you. ++post -> Here the link, http://ionicframework.com/docs/v2/api/components/nav/NavPush/, to the documentation that shows how to pass parameters. It’s common.

  • Fabrício Silva

    I suggest you to elaborate further on each post. What about pop and parameters? Although the post title is “pages and navigation”, only one child topic (push) was presented.

    • http://www.mcgivery.com/ Andrew McGivery

      Hello Fabrício,

      The purpose of this series is to provide quick, bite-sized lessons that can be digested in under 10 minutes. We will be covering more (such as pop and parameters) in further posts in the series.

  • DarthDie

    I had no clue about the CLI having a create page command, nor the [navPush] feature. Nifty!

    • http://www.mcgivery.com/ Andrew McGivery

      Glad you learned something!

  • Fernando

    Tengo ese pequeñisimo problema que aveces sale y aveces no la verdad IONIC2 aveces funcionan unas cosas y otras no, que puede ser el error gracias.

    NOTA: ionic1 me encanta pero se que deve migrar a IONIC2, pero no entiendo porque cosas que me sirven en un projecto las quiero porner en uno nuevo o en otro y ya no funcionan. Luego me boy y ejecuto nuevamente el que servia y derepente ya no funciona :(((((( que es lo que sucede.

    sera que es mi PC por lo que tenia instalado ionic1-……….
    Este es el error :
    ————————————————————————————————
    Error: watch /home/fernando/dev/Angular2/Projecto/appCliente/node_modules/angular2/src/core/debug/debug_renderer.js ENOSPC

    at exports._errnoException (util.js:890:11)

    at FSWatcher.start (fs.js:1313:19)

    at Object.fs.watch (fs.js:1341:11)

    at createFsWatchInstance (/home/fernando/dev/Angular2/Projecto/appCliente/node_modules/chokidar/lib/nodefs-handler.js:37:15)

    at setFsWatchListener (/home/fernando/dev/Angular2/Projecto/appCliente/node_modules/chokidar/lib/nodefs-handler.js:80:15)

    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/fernando/dev/Angular2/Projecto/appCliente/node_modules/chokidar/lib/nodefs-handler.js:228:14)

    at FSWatcher.NodeFsHandler._handleFile (/home/fernando/dev/Angular2/Projecto/appCliente/node_modules/chokidar/lib/nodefs-handler.js:255:21)

    at FSWatcher. (/home/fernando/dev/Angular2/Projecto/appCliente/node_modules/chokidar/lib/nodefs-handler.js:473:21)

    at FSReqWrap.oncomplete (fs.js:82:15)

    Mind letting us know? https://github.com/driftyco/ionic-cli/issues

    7.6 MB bytes written (15.88 seconds)

    [11:33:34] Finished ‘watch’ after 22 s

    [11:33:34] Starting ‘serve:before’…

    [11:33:34] Finished ‘serve:before’ after 13 μs

    WARN: ionic.config.js has been deprecated, you can remove it.

    Live Reload failed to start, error: Error: watch /home/fernando/dev/Angular2/Projecto/appCliente/www/build ENOSPC

    Ionic serve failed – error: Error: watch /home/fernando/dev/Angular2/Projecto/appCliente/www/build ENOSPC

    Ionic server commands, enter:

    restart or r to restart the client app from the root

    goto or g and a url to have the app navigate to the given url

    consolelogs or c to enable/disable console log output

    serverlogs or s to enable/disable server log output

    quit or q to shutdown the server and exit

    ionic $

  • Paul Barry

    Just a small typo under the “Navigating From Home to About” section. You refer to “home.js” when it should refer to “home.ts”. Thanks.

    • http://www.mcgivery.com/ Andrew McGivery

      Thanks for the correction.

      If you update your CLI to the newest version, it already will generate typescript pages instead of javascript based on if you set the `–ts` flag when the project was created.

  • Fernando

    With passed params in the navPush!

    NOTE: Sorry for my english, I do not speak english.

  • Andrew

    I’m getting an error from this line “import {AboutPage} from ‘..about/about’;”
    It says “Error: Cannot find module ‘..about/about’ from and then shows the directory up to apppageshome. Are you sure the .. is the syntax for navigating out of that folder? I’ve double checked…I have within the pages directory a folder called about, and within that folder the three about files (html, scss, and ts).

  • Ravitheja Maddineni

    Very good sample.

    I am getting below error when I tried to run the ionic tutorial project created by using ionic start MyIonic2ProjectSideMenu tutorial –v2

    Could someone help me how to fix this issue.

    > node_modules/ionic-angular/components.core.scss Error: Import directives may not be used within control directives or mixins. on line 34 of node_modules/ionic-angular/components.core.scss @import “fonts/ionicons”; –^

  • Ben O’Connor

    This is out of date now though right? Update to Beta 10+?

  • Varshil Shah

    hey thanks for this post..
    if i want go back to specific page . how i do that?
    if u have any example of popTo()..please share with me
    i am currently working on ionic 2

  • Maii Roxane

    Hi, ionic cli still up to date or is it better to download the quickstart from the angular 2 website?

  • Couim

    it does not work for my part with the new version of Ionic (RC1). Any idea ?

  • Gabriel Lavoura

    Need Update…

    https://forum.ionicframework.com/t/impossible-navigation-between-pages/65778

    Need to add some lines in app.module.ts.

  • Kaustubh Talathi

    Any idea why I am getting below error on click of “Go to About” button:
    polyfills.js:3 Uncaught Error: Error in ./HomePage class HomePage – inline template:12:3 caused by: No component factory found for AboutPage

    Appreciate any feedback to resolve the issue.

    • jose malpica

      I have exactly the same error! ::(

      • Kaustubh Talathi

        Found the fix. AboutPage needs to be referred during the bootstrap process. It needs to be added in app.module.ts at import, declarations & entryComponents.

        • sanji vinsmoke

          Thank you. 🙂

          • Marc Albert

            You have to add in app.module.ts file references of AboutPage. This is the complete code for this file:

            import { NgModule, ErrorHandler } from ‘@angular/core’;
            import { IonicApp, IonicModule, IonicErrorHandler } from ‘ionic-angular’;
            import { MyApp } from ‘./app.component’;
            import { HomePage } from ‘../pages/home/home’;
            import { AboutPage } from ‘../pages/about/about’;

            @NgModule({
            declarations: [
            MyApp,
            HomePage,
            AboutPage
            ],
            imports: [
            IonicModule.forRoot(MyApp)
            ],
            bootstrap: [IonicApp],
            entryComponents: [
            MyApp,
            HomePage,
            AboutPage
            ],
            providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
            })
            export class AppModule {}

            Regards.

          • Himalaya Ahuja

            I did exactly as instructed , even added the new page in declarations and entry components array in app.module.ts , but i’m getting an error when(ionic serve) Runtime error: cannot find module “../pages/about/about”

          • Himalaya Ahuja

            Found the bug , the import path given above is valid for app.module.ts but for the home page the import path should be “../about/about” .

          • https://marcalbert.wordpress.com/about/ Marc Albert

            Yes of course because the home page is in different path as app.module.ts

            Regards.

  • http://www.badpenguin.org/ Antonio Gallo

    is it normal that every time a page is pushed into the stack the constructor for it its called again?

  • ima0123

    @andrewmcgivery:disqus
    It is good sample description.
    Would you please write this document to Wiki or something.
    It is little old and don’t work in latest version.

  • Guille Acosta

    You can find a working example (based on comments) on https://github.com/fantasticguille/ionic2-navigationApp

  • Selvasankar

    Please do not follow this tutorial . This is completely out of date not working tutorial.
    Appreciate the author if he can update this tutorial for remove this from this blog.

  • Sya

    when i generate the about page , there will be a page called about.module.ts , when i delete it i can not serve the project !!!!

  • Vivek Kurmi

    Not working at all.. 🙁