Skip to content
Angular Start

Getting Started

There are a few things that we will do at the beginning of every application build, these are things like:

  • Generating the application
  • Installing extra packages (if necessary)
  • Restructuring the generated application to our liking

Most of the time this should be pretty straightforward, as we can use the Angular CLI options to handle a lot of the configuration for us.

Generate the Application

Terminal window
npm install -g @angular/cli
Terminal window
ng new angularstart-quicklists --defaults --style=scss --inline-template --inline-style --skip-tests

With the project created, we are going to make just a few modifications to get things going.

Install Packages

In this project we are going to make use of the Angular CDK (Component Dev Kit). This provides us with the basics of what would otherwise be complex features to build, for example things like a Menu, Drag and Drop, Modal/Dialog and more.

Instead of building everything from scratch, we can built it on top of components that the Angular team provides for us.

Terminal window
ng add @angular/cdk

Remove the junk

The first thing we will typically always do is remove the extra “junk” from our root component, keeping just the <router-outlet> in the template.

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';


@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  template: `
    <router-outlet />
  `,
  styles: [],
})
export class App {}

Set up the Home Component

import { Component } from '@angular/core';


@Component({
  selector: 'app-home',
  template: ` <p>Hello world</p> `,
})
export default class HomeComponent {}
import { Routes } from '@angular/router';


export const routes: Routes = [
  {
    path: 'home',
    loadComponent: () => import('./home/home.component'),
  },
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full',
  },
];

Ok, that should do it! Now we have a nice base to work from.