Get Started With Ionic4


Ionic4 for beginners


In this tutorial, we are going to walk through how to create ionic4 application.we'll be covering how to create basic ionic4 application and folder structure of the generated application.

You need to go through the following steps in order to create an ionic4 application.


1) Install CLI

you can install ionic cli by running the following command.
npm i -g ionic


2) Enable Angular Project Type

ionic config set -g features.project-angular true 



3) Ionic Start

To generate an ionic app, run following command in the terminal and it will prompt to enter project name :
ionic start

install ionic4

I've given the project name as ionic4-demo, you can give it to anything you want and then press enter.



4) Choose Project Template Type

Then it will prompt you to select the project type.
There will be three option as follows:
  1. angular | Ionic Angular v4+
  2. ionic-angular | Ionic Angular v2/v3
  3. ionic1 | Ionic1

Select the 1st option because we are going to create ionic4 application and press enter.

ionic4


5) Integration With Cordova

It will start creating necessary stuff to generate the ionic application and will prompt to integrate the app with Cordova, you can type y/N based on your need, I am entering "n" and hitting enter. 

ionic4



6) Automatic Dependency Installation

Then it will start installing all dependencies.

ionic4

Note: It can be failed if it required administrative permission, in that scenario you need to install the package by navigating into project folder as following:

cd ionic4-demo 
npm install

ionic4

Depending on your setup, you might need to add sudo in order to work with permissions.



7) Run Ionic App


If all packages are installed successfully then run the ionic project by running following command:
ionic serve

It may throw following error pointing that cannot find module 'node-sass'



ionic4


that's because your project is missing node-sass package and you can install it by running following command.

npm install node-sass

and then again run the ionic project using ionic serve.
That's it, we've created ionic4 application successfully.

It will generate an application based on what you've selected in project type options.


ionic4
Side Menu
ionic4
HomePage



Project Structure

ionic4

This structure follows the typical angular project and If you've ever worked with the angular project then you'll be familiar with this structure.

We have a src directory that acts as the home for our webapp. This includes the index.html, any assets, environment variables, and any app specific config files.




Thanks for reading the article.
Get Started With Ionic4 Get Started With Ionic4 Reviewed by Borad Akash on July 01, 2018 Rating: 5

No comments:

Powered by Blogger.