Skip to content
Angular Start

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 to get things ready. These are things like:

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

Generate the Application

Terminal window
npm install -g @angular/cli
Terminal window
ng new angularstart-chat --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 the last application we built we started using Angular Material and we used one of the built-in themes. This time we are going a little more advanced and we will build our own custom theme.

We will add Angular Material and choose a Custom theme now, but we will configure the theme later in the project.

Terminal window
ng add @angular/material

You will be prompted to choose a theme — make sure to pick Custom this time.

You can select y to the prompt about typography, and you should also Include and enable animations.

Everything required for Angular Material will now have been set up automatically for you.

We are also going to install ngxtension so that we can make use of the connect function we discussed in the advanced state management module:

Terminal window
ng add ngxtension
Terminal window
npm install ngxtension --legacy-peer-deps

Set Up Environments

This is something that used to be enabled in Angular applications by default, but now we need to enable environments by running a command. Let’s do that first:

Terminal window
ng generate environments

This will create two additional files in your application as well as add some configuration to angular.json:

CREATE src/environments/environment.ts (31 bytes)
CREATE src/environments/environment.development.ts (31 bytes)
UPDATE angular.json (3660 bytes)

The idea here is that we can define configuration values in the environment files — we can have one set of values defined for production builds and one for development builds.

We can just always import from the environment.ts file, and if we are running a development build (e.g. just serving with ng serve) Angular will automatically handle overwriting the environment file with our environment.development file.

We will utilise this so that we can connect to local emulators for Firebase during development, but connect to the real services in production.

Remove the junk

Now let’s remove the 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></router-outlet> `,
  styles: [],
})
export class AppComponent {}

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.