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

  • olavocneto

    Very good, clear and simple. Thank you. ++post -> Here the link,, 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.

    • 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!

    • 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 (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?

    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.

    • 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…

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

            declarations: [
            imports: [
            bootstrap: [IonicApp],
            entryComponents: [
            providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}]
            export class AppModule {}


          • 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” .

          • Marc Albert

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


          • Tommy X. Gomez Garcia

            You buddy!! are the real MVP, on my hour 26 awaken trying to figure this out you appear with this ingenous solution to the bug, thank you a lot!

          • Oscár Gallego

            Hello! I experimented lazy load in my app, and I think it’s because I have a lot of pages declared there. Is it necessary to declare all my pages here?
            Sorry if it’s a stupid question but I’m new with this ionic & angular.

          • Puja Kusuma

            thanks, it works

  • Antonio Gallo

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

  • ima0123

    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

  • 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.. 🙁

  • Dinan Rangga M

    Can I make 2 page in 1 folder?

  • N Srinivas Rao

    Thanks for this tutorial, appreciated 🙂

  • Adyb

    Do you have the tutorial for back button in the toolbar?


    run time error : camera can not be used an a entry components
    please help me to remove above error

  • chouxpastry2002

    Incomplete Explaination. You need to add Entry into app.module.ts for making navigation working.


    Greetings Please why am i getting errors when trying to do the same thing? This is the error i got:
    Not able to have the above result

    Module ‘”/home/evina/NEWAPP/node_modules/ionic-angular/index”‘ has no exported member ‘Page’.

  • raj rpr

    everything is working fine but i dont find “app.core.scss” in apptheme folder so the style is not applied in about page? in which file i need to import ‘about.scss’ to get this work. thanks in advance.