Ionic 5 and Angular 8: Create a Welcome Page with Tabs Home Pages.

I received lots of tutorial requests from my readers in that most of them asked me, how to use Ionic 5 to create a welcome page with login and signup pages. Ionic updated there code base with latest Angular 8 features. Now we can implement the routes and guards pretty easy way. Ionic is recommending to use Capacitor to generate iOS and Android. This post will explain to you how to design an Ionic project structure with social project related pages like messages, feed, notifications, etc. Finally converting this web Ionic project to iOS and Android applications.

Prerequisites
You need to have the following software installed:

Node 12+
Ionic 5+

Create Ionic Project
Generate an Ionic project with tabs feature.

$ionic start mango tabs

Run the Project
Project server will run at 8100 port.

$ionic serve

Working with New Project Structure
Create folders like Pages, Components, and Services.

Ionic 5 and Angular 8 Create project structure

Home Container
All of the authenticated pages under this container routes. For more inforamtion read Angular Routing using Route Guards

mango$ ionic generate page home

> ng generate page home

CREATE src/app/home/home.module.ts (533 bytes)

CREATE src/app/home/home.page.scss (0 bytes)

CREATE src/app/home/home.page.html (123 bytes)

CREATE src/app/home/home.page.spec.ts (677 bytes)

CREATE src/app/home/home.page.ts (248 bytes)

UPDATE src/app/app-routing.module.ts (488 bytes)

[OK] Generated page!

Index Container
Unauthorized pages under this component.

mango$ ionic generate page index

> ng generate page index

CREATE src/app/index/index.module.ts (538 bytes)

CREATE src/app/index/index.page.scss (0 bytes)

CREATE src/app/index/index.page.html (124 bytes)

CREATE src/app/index/index.page.spec.ts (684 bytes)

CREATE src/app/index/index.page.ts (252 bytes)

UPDATE src/app/app-routing.module.ts (563 bytes)

[OK] Generated page!

Generate Unauthenticated Pages
Use Ionic command to generate unauthenticated pages like login, signup, welcome and forgot under the pages directory.

mango$ ionic generate page pages/welcome

> ng generate page pages/welcome

CREATE src/app/pages/welcome/welcome.module.ts (548 bytes)

CREATE src/app/pages/welcome/welcome.page.scss (0 bytes)

CREATE src/app/pages/welcome/welcome.page.html (126 bytes)

CREATE src/app/pages/welcome/welcome.page.spec.ts (698 bytes)

CREATE src/app/pages/welcome/welcome.page.ts (260 bytes)

UPDATE src/app/app-routing.module.ts (652 bytes)

[OK] Generated page!

mango$ ionic generate page pages/login

> ng generate page pages/login

CREATE src/app/pages/login/login.module.ts (538 bytes)

CREATE src/app/pages/login/login.page.scss (0 bytes)

CREATE src/app/pages/login/login.page.html (124 bytes)

CREATE src/app/pages/login/login.page.spec.ts (684 bytes)

CREATE src/app/pages/login/login.page.ts (252 bytes)

UPDATE src/app/app-routing.module.ts (733 bytes)

[OK] Generated page!

mango$ ionic generate page pages/signup

> ng generate page pages/signup

CREATE src/app/pages/signup/signup.module.ts (543 bytes)

CREATE src/app/pages/signup/signup.page.scss (0 bytes)

CREATE src/app/pages/signup/signup.page.html (125 bytes)

CREATE src/app/pages/signup/signup.page.spec.ts (691 bytes)

CREATE src/app/pages/signup/signup.page.ts (256 bytes)

UPDATE src/app/app-routing.module.ts (818 bytes)

[OK] Generated page!

Generate Authenticated Pages
Same way generate all of the authenticated pages like feed, messages, notifications and setttings. Later we are going to apply route guards to protect these with the user authentication.

mango$ ionic generate page pages/feed

> ng generate page pages/feed

CREATE src/app/pages/feed/feed.module.ts (533 bytes)

CREATE src/app/pages/feed/feed.page.scss (0 bytes)

CREATE src/app/pages/feed/feed.page.html (123 bytes)

CREATE src/app/pages/feed/feed.page.spec.ts (677 bytes)

CREATE src/app/pages/feed/feed.page.ts (248 bytes)

UPDATE src/app/app-routing.module.ts (895 bytes)

[OK] Generated page!

mango$ ionic generate page pages/messages

> ng generate page pages/messages

CREATE src/app/pages/messages/messages.module.ts (553 bytes)

CREATE src/app/pages/messages/messages.page.scss (0 bytes)

CREATE src/app/pages/messages/messages.page.html (127 bytes)

CREATE src/app/pages/messages/messages.page.spec.ts (705 bytes)

CREATE src/app/pages/messages/messages.page.ts (264 bytes)

UPDATE src/app/app-routing.module.ts (988 bytes)

[OK] Generated page!

mango$ ionic generate page pages/notifications

> ng generate page pages/notifications

CREATE src/app/pages/notifications/notifications.module.ts (578 bytes)

CREATE src/app/pages/notifications/notifications.page.scss (0 bytes)

CREATE src/app/pages/notifications/notifications.page.html (132 bytes)

CREATE src/app/pages/notifications/notifications.page.spec.ts (740 bytes)

CREATE src/app/pages/notifications/notifications.page.ts (284 bytes)

UPDATE src/app/app-routing.module.ts (1101 bytes)

[OK] Generated page!

mango$ ionic generate page pages/settings

> ng generate page pages/settings

CREATE src/app/pages/settings/settings.module.ts (553 bytes)

CREATE src/app/pages/settings/settings.page.scss (0 bytes)

CREATE src/app/pages/settings/settings.page.html (127 bytes)

CREATE src/app/pages/settings/settings.page.spec.ts (705 bytes)

CREATE src/app/pages/settings/settings.page.ts (264 bytes)

UPDATE src/app/app-routing.module.ts (1194 bytes)

[OK] Generated page!

Lazy Routing & Navigation
You have to connect all of the pages with Index and Home containers.

index.router.ts
Create a router class and import unauthenticated pages here.

import;import { RouterModule, Routes } from '@angular/router';
import { IndexPage } from './index.page';
const routes: Routes = [
{
path: '',
component: IndexPage,
children: [
{
path: '',
loadChildren: () =>
import('../pages/welcome/welcome.module').then(
m => m.WelcomePageModule
)
},
{
path: 'login',
loadChildren: () =>
import('../pages/login/login.module').then(m => m.LoginPageModule)
},
{
path: 'signup',
loadChildren: () =>
import('../pages/signup/signup.module').then(m => m.SignupPageModule)
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class IndexRouter {}

home.router.ts
Here import the user authenticated pages.

import;import { RouterModule, Routes } from '@angular/router';
import { HomePage } from './home.page';
const routes: Routes = [
{
path: 'home',
component: HomePage,
children: [
{
path: 'feed',
loadChildren: () =>
import('../pages/feed/feed.module').then(m => m.FeedPageModule)
},
{
path: 'messages',
loadChildren: () =>
import('../pages/messages/messages.module').then(
m => m.MessagesPageModule
)
},
{
path: 'notifications',
loadChildren: () =>
import('../pages/notifications/notifications.module').then(
m => m.NotificationsPageModule
)
},
{
path: 'settings',
loadChildren: () =>
import('../pages/settings/settings.module').then(
m => m.SettingsPageModule
)
}
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRouter {}

index.module.ts
Now remove the existing routes and import the IndexRouter.

import { CommonModule } from '@angular/common';import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { IndexPage } from './index.page';
import { IndexRouter } from './index.router';
@NgModule({
imports: [CommonModule, FormsModule, IonicModule, IndexRouter],
declarations: [IndexPage]
})
export class IndexPageModule {}

home.module.ts
Follow the same and import HomeRouter.

import { CommonModule } from '@angular/common';import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page';
import { HomeRouter } from './home.router';
@NgModule({
imports: [CommonModule,FormsModule<
Share This
							
									Previous Post
								
									Next Post
								
0 Comments

Leave a Reply

Coding-Help-Tech

Create Stream of CSV in PHP

CSV Streaming is a method for users to export their data in excel, a w...

31-10-2019
jQuery Fullcalendar Integration with Bootstrap, PHP & MySQL

Recently I have used this plugin in an application and faced some issu...

07-12-2016
Giveaway of IOTransfer – Light But Powerful iPhone/iPad Manager

If you are a new IOS user or an old IOS user, you will surely need to ...

03-05-2018

Ionic 5 and Angular 8: Create a Welcome Page with Tabs Home Pages.

Share This

Previous Post

Next Post

Create Stream of CSV in PHP

jQuery Fullcalendar Integration with Bootstrap, PHP & MySQL

Giveaway of IOTransfer – Light But Powerful iPhone/iPad Manager