Lesson 9

Starting the Application

Getting the Ionic application started


Lesson Outline

Starting the Application

We've covered a lot of theory and database stuff, but we're finally ready to build some stuff with Ionic! In this lesson we will be generating our Ionic application, generating the initial pages and providers that we will need, and setting up all the required dependencies.

Generate the Application

To start off with, we will need to generate a new Ionic application by running the following command:

ionic start hangz blank --type=angular

As you will have seen already, we are creating a tabs layout for this application. However, I generally prefer to just always start from a blank template and add things in myself (rather than having to remove or rename things I don't want).

Although you can use Cordova if you prefer, we will be using Capacitor in this application. To set up Capacitor, just respond with y when asked if you would like to integrate Capacitor.

We will use Capacitor in this application, so if you also want to follow along and use Capacitor you should make sure to install the Ionic specific Capacitor plugins:

npm install @capacitor/app @capacitor/haptics @capacitor/keyboard

We will also be making use of the splash screen and status bar plugins:

npm install @capacitor/splash-screen @capacitor/status-bar

IMPORTANT: This module uses Capacitor 3. If version 3.x of Capacitor is not already the default, you should install the latest version of Capacitor with the following command:

npm install @capacitor/[email protected] @capacitor/[email protected]


Once the application has finished generating, we will need to set up a few pages. For now, we are just going to create our Notices page and our Chats page that we will be setting up as tabs, and an AddNotice page that we will use for adding new notices (we will add new chats directly through the Chats page).

Run the following commands to generate the required pages:

ionic g page Notices
ionic g page Chat
ionic g page AddNotice

Since we will be supplying the AddNotice page component directly to a ModalController later, it doesn't need its own module. You should delete the add-notice.module.ts file that is auto-generated.

We will eventually also have to handle setting up the tab routing for the notices and chat pages, but we are going to take care of that in the next lesson.

An important configuration we will set up now is the preloadingStrategy. Rather than only loading in lazily loaded pages as they are requested, this option will cause the lazy loaded pages to begin loading in the background after the application is launched. We still get the benefit of an improved application boot time, because the pages will be loaded after the initial launch, but we also get the benefit of having everything loaded up front. This is a good idea for this application because there are only a few pages and components, so it will benefit from having everything loaded up front - but using this option for an application with a lot of pages may not be ideal.

Add the PreloadAllModules strategy to src/app/app-routing.module.ts:


Thanks for checking out the preview of this lesson!

The full version of this lesson is only available to pro members. If you would like full access to this module and all of the other pro modules on Elite Ionic you can become a pro member (or log in if you are already a member).