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

  • Zaier

    Easy and simple
    Now what is the next step please ?

    • Andrew McGivery

      More parts to this series are on their way!

      • Fabrício Silva

        This kind of tutorial, step-by-step, building up an application is really missing on Ionic. All I can find are example applications, example codes(e.g.: codepen).
        For those who are trying to learn multiples technologies (Ionic framework, Angular, etc) concurrently, this is all confusing.
        One example is the base app templates. They come with routing, which has its own features and menaings. The learning curve becomes longer.

        I suggest you to move this series to the main Ionic documentation (/docs) and organize it as a step-by-step app building, with all chapters consistent with a clear target.
        Each chapter would build a new app feature, by using a new Ionic concept.

    • Cauê Almeida


    • Herve


  • masimak

    Can you please write a post on how we add additional dependencies to the project. Like installing lodash using npm, what happens with typings, how do we need to edit config files (i.e. webpack.config.js, ionic.config.js etc) and also adding some cordova plugins, which is the next natural step after writing a hello world app towards a real app.

    • Andrew McGivery

      There is a post coming up in this series which include a Cordova plugin. Stay tuned!

  • Fernando Muñoz

    What’s the current beta version?

    • Andrew McGivery

      Framework: Beta 12
      CLI: Beta 22

      (This will probably be outdated by the time I hit enter lol)

      • Arpad Kovacs

        I think Beta 23 has issues on Windows. I did.
        Does this (official tutorials from the team) mean Ionic 2 is getting more stable? Even tutorials posted a couple of months ago do not work any more. It is difficult to keep up. Are you going to update these as the framework changes?

        • Andrew McGivery

          So, lots going on here. I can definitely appreciate where you are coming from and what you are saying about things changing a lot!

          The framework itself a couple months ago was large in flux due to it being Alpha and especially since it is based on Angular development. This is still occasionally an issue. Every time Angular introduces a breaking change, it has the potential to cause a breaking change into Ionic.

          I will do my best to keep my posts up to date! Feel free to hit me up on Twitter if I fail to do so. (@andrewmcgivery)

          The team is working really hard to solidify the framework and create less breaking changes. Hopefully we will see less breaking changes as they get further into the betas and closer to a 2.0 release candidate.

        • aaronksaunders

          i have to go through and update my samples and tutorials about every 3 weeks, hopefully since angular is getting closer to final release, Ionic2 will begin to stabilize

  • jonsey

    Installing [email protected] will broke my others ionic 1.2.4 projects?

    • jonsey

      i reply to myself…no matter at all…for now.Just follow the suggestion in the console, lice delete/rename some files

  • Sergio Milici

    How can we bootstrap ionic2 with angular2 webworkers? It’s really a good improvement

  • Luís Cunha

    Cannot run the serve command, it tells me that I’m missing modules.

    $ ionic serve
    WARN: ionic.config.js has been deprecated, you can remove it.
    Uh oh! Looks like you’re missing a module in your gulpfile:
    Cannot find module ‘gulp’
    Do you need to run `npm install`?

    Running npm install does nothing and if I install the module it then says another module is missing, seemingly to no end.

    ionic: 2.0.0-beta.24 on Windows 8.1

    • chandramuralis

      May be you should try deleting node_modules folder and then try ‘npm install’ again.

      • Luís Cunha

        Already done that, multiple times even, same result. Have had problems running [email protected] on this machine every single time I tried, the CLI just doesn’t create the project properly, if I use a project created on my home computer it works fine. Reinstalled all node, npm, ionic every time I tried, still didn’t work. I’m just assuming it’s just beta status issues.

        • Andrew McGivery

          Sounds like you may not have Gulp installed. Have you tried installing Gulp globally?

          npm install -g gulp

          • Luís Cunha

            It’s just [email protected] projects created through the CLI on this machine that don’t work, everything else works fine (ionic 1, all our other npm projects, etc.)
            And yes, I have all the require modules installed globally.
            It seems to me like it’s some issue between windows 8.1 and [email protected], all other machines and OSes in our office work as expected.

          • Cris

            Hi, I don’t know if you fixed your problem already, I have the same problem as you and every time I create a new project the problem raise again, to fir it soon after the free ionic start command I have to manually install all the dependency I find in package.json

            “del”: “2.2.0”,

            “gulp”: “3.9.1”,

            “gulp-watch”: “4.3.5”,

            “ionic-gulp-browserify-es2015”: “^1.0.2”,

            “ionic-gulp-fonts-copy”: “^1.0.0”,

            “ionic-gulp-html-copy”: “^1.0.0”,

            “ionic-gulp-sass-build”: “^1.0.0”,

            “ionic-gulp-scripts-copy”: “^1.0.1”,

            “run-sequence”: “1.1.5”

            after install all the dependencies manually the project can be served as usual, I think there should be some sort of bug or I don’t know what else because ’till the previous version of ionic2 it was working as expected, now with the version 2.0.0-beta.25 I have to install them manually to make it to work. I hope it helps-

          • Cris

            It’s again me, after more researches I found that the problem comes when NODE_ENV is set on production and when it is on production npm install ignores the devDependencies this is the reason why they are not uploaded and why ionic can’t serve the app, to fix it you can set that env variable to NODE_ENV=development or you could run in the terminal npm –production=false install in this way all the devDependencies will be downloaded and everything will work as expected.

          • Luís Cunha

            Thank you @disqus_4xNIcg7w9U:disqus it was indeed that environment variable that was set to production that was causing the issue. Weird that the ionic team would set those dependencies as dev dependencies when the application won’t run if they’re missing.

          • rg boyana

            hi luis wondering if you handle your problem… since I got the same issue

        • Jean-Mouloud

          What node version?

          • Luís Cunha

            node 5.9.0
            npm 3.8.6

          • Jean-Mouloud

            Try 0.11 / 0.12

  • Siddhartha R

    @[email protected]:disqus Very concise article. I have a question though. For a newbie would you recommend ionic 2 or react native? Like honestly!

  • Dionysos Da Vinci

    Nice article, thanks for the help. I’m trying to figure out multiple things at the same time (JS, Angular, Ionic 2 etc.) and I’m confused regarding whether it would be better to learn to write in TypeScript or normal Javascript.

    Any help?

    • Andrew McGivery

      The Ionic team recommends Typescript and uses it internally for Ionic Development.

      From personal experience, I would recommend it as well as it makes life a whole lot easier. Lots of advantages and not hard to learn.

  • Sumit Vishwakarma

    Hi @Andrew, I tried many times to use the Ionic 2 but i am getting “White Blank Screen” when app goes into the physical Android 5.0 device. Instead Ionic 1 app work awesome. I have also tried the Cross Walk but issue remains. Plz help me to resolve this issue.

    • Andrew McGivery

      Have you tried the remote debugger in Chrome to see if there are any errors?

  • Lucas

    Hi ! Thanks for the great article, but I think I’ve found a small typo (that made me search in the files for ten minutes 🙂 ) :

    “Let’s modify the template (hello.html)” <= it's actually home.html ! It can be confusing for a newbie like me 😉

    • Andrew McGivery


  • Robersonfox

    Ionic runs under BlackBerry Classic?

  • aine

    having trouble with line import {Page} from ‘ionic-angular’; .. says that page not in the ionic-angular index… has this component being moved to another folder?
    Thanks in advance

    • sanji vinsmoke

      On my current version use “import { Component } from ‘@angular/core’;” instead {Page} and @Component instead @Page{…} …sorry for my Eng skill.

  • Selvasankar

    Having trouble with line import {Page} from ‘ionic-angular’; .. says that page not in the ionic-angular index… has this component being moved to another folder?

  • Bikram Dhiman

    Hello Andrew. I am confuse how I can run this code in IOS or where which folder i can add more pages for IOS means Xocde. Anyone help me.

  • Ajit Kumar

    can you write a post on how make loader/spinner before a page starts,

  • Suresh Anand

    C:UsersSU3d4dffdd00>ionic start helpworld –blank

    ? What starter would you like to use: blank
    √ Creating directory .helpworld – done!
    [INFO] Fetching app base
    × Downloading – failed!
    Error: connect ECONNREFUSED

    Whenever I m trying to download the app from cli i am getting the above error only i dont know why
    i set my proxy like this npm config set proxy and http_proxy to my company proxy id . still i am facing the could you please any one suggest me how to solve this or i am doing any thing wrong ???

  • Vishwas Raj

    Just followed this tutorial to get ‘HTTP error 404 Not Found’ error. Can you kindly add troubleshooting steps aswell, as this is the basic HELLO WORLD tutorial which makes users to break their head for getting started!