Setting up routing for a new Angular project

Git repo with example code

Routing allows for creating pages in an Angular app. Each page will have its own URL and can be accessed directly instead of having to start the user journey from the home page every time.

Generate a new project

We can use the Angular CLI to quickly generate a new project. To install the Angular CLI:

npm install -g @angular/cli

Now we should be able to use the ng command. We can create a new project quickly with a command like this:

ng new --routing setting-up-routing-for-a-new-project

The --routing option means the project should be generated with routing enabled. If we leave it out, the new project script is interactive and it will ask if we wanted to use routing with the new project.

There are a few options available to us besides --routing, to find out about them, we can have a look at the help.

ng new --help

Running the Angular app

Right after generating the app, we can run it with

npm run start

Pointing a browser to http://localhost:4200 will show the default angular app, which is not particularly pretty to look at.

Angular CLI will not create any routes for us when generating the project. Looking at app-routing.module.ts, we'll notice the routes is empty.

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Let's clean-up a little and get rid of all the generated stuff in app.component.ts, leaving only the router-outlet tag. The app.component.ts should end up looking like this:

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

@Component({
  selector: 'app-root',
  template: `<router-outlet></router-outlet>`,
  styles: []
})
export class AppComponent {
  title = 'setting-up-routing-for-a-new-project';
}

Refreshing the browser will now show a completely blank page, because we removed all the content. This is a good place to start working with routes.

Angular routing

An Angular route is made of 2 essential parts: a path and a component. The way it works, it replaces the <router-outlet></router-outlet> from app.component.ts with the component specified in the route when the browser navigates to the given path.

Creating a default route

Let's create a route. This will be the home page, also called the default route. First, we need create a component and we're going to call it home.

ng generate component home

This should create the component for us so that we end up with a home.component.ts that looks like this:

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "app-home",
  templateUrl: "./home.component.html",
  styles: [],
})
export class HomeComponent implements OnInit {
  constructor() {}

  ngOnInit(): void {}
}

And with a home.component.html template that looks like this:

<p>
  home works!
</p>

The HomeComponent should have already been added to theAppModule in the declarations array. We're ready to start using our new component.

Now let's add the route. We want it to be the home page, this means the path should be /. But when specifying the path in an Angular route, we need to strip off the leading /, which means we are going to end up with a path that as an empty string. So let's use "" as our first route.

After adding out first path, the routes in app-routing.module.ts will look like this:

const routes: Routes = [
  {
    path: "",
    component: HomeComponent,
  },
];

Creating another route

Now let's create another route, for example the about page.

ng generate component about

Add the about route so that our routes end up looking like this:

const routes: Routes = [
  {
    path: "",
    component: HomeComponent,
  },
  {
    path: "about",
    component: AboutComponent,
  },
];

Angular links

To test the routes are working, we need to add links on these pages. So, in the home page, let's add a link to the about page. In home.component.html:

<a routerLink="about">About page</a>

Refreshing the browser, we should now see a link on the home page. Clicking it will navigate to the about page.

The interesting thing to notice in the link we've just added is that it doesn't have the typical href attribute. Instead, it has a routerLink attribute. This works in conjunction with the path property of the route we need to link to.

Of course, we can add the usual link, that will work too:

<a href="/about">About page</a>

The most obvious difference between the 2 types of links is that, with the routerLink, the page doesn't reload. Angular simply re-renders the AboutComponent in the place of the HomeComponent. This creates a much better user experience and makes the Angular app faster.