3d cartoon hands holding a phone

Unlock full course by purchasing a membership

Lesson 2

Getting Started

Getting a few chores out of the way

STANDARD

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 {}
STANDARD
Key

Thanks for checking out the preview of this lesson!

You do not have the appropriate membership to view the full lesson. If you would like full access to this module you can view membership options (or log in if you are already have an appropriate membership).