Getting Started

As I mentioned for the previous applications, there are a few things that we will do at the beginning of every application build, these are things like:

• Generating the application
• Enabling TypeScript strict mode
• Installing packages
• Restructuring the generated application to our liking

If you need more explanation for why we are doing any of these particular steps, make sure to go back to the Getting Started lesson in the Quicklists module for more information.

Generate the Application

Generate a new application with the following command:

ionic start giflist blank --type angular

Open the project in VS Code or your favourite editor

Enable TypeScript Strict Mode

Turn on strict mode by adding strict: true to the compilerOptions in your tsconfig.json file:

  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2020",
    "module": "es2020",
    "lib": ["es2018", "dom"],
    "strict": true
  },

Restructure the Application

Delete all files inside of the src/app/home folder (keep the home folder)

Delete all of the app.* files inside of the src/app folder:

• app-routing.module.ts
• app.component.html
• app.component.scss
• app.component.spec.ts
• app.component.ts
• app.module.ts

Create a file at src/app/home/home.component.ts and add the following:

import { CommonModule } from '@angular/common';
import { ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';

@Component({
  selector: 'app-home',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title> Home </ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
    </ion-content>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class HomeComponent {}

@NgModule({
  imports: [
    CommonModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomeComponent,
      },
    ]),
  ],
  declarations: [HomeComponent],
})
export class HomeComponentModule {}