Using Angular Routing in Ionic 4

TheRouter module is one of the most important in the Angular library. Paired withIonic 4, you can be unstoppable. Here’s the rundown:

Background

One of Ionic 4’s key features is its capability to use Angular routing. The Angular router implements a path/component lookup. In other words, Angular routing works like URLs on a web browser. You can reference an Ionic page by calling /your-page-name .

Simple Routing

When an app loads, the Angular router begins by reading the URL being loaded. In the following snippet, we see the router searching for ’’ , which is our index route (think: alligator.io as opposed to alligator.io/ionic ). For this route, ’’ , we load the HomeComponent .

You could continue down the line and call ‘alligator’ , which would load the AlligatorComponent .

import { RouterModule } from '@angular/router';

@NgModule({
  imports: [
  ...
  RouterModule.forRoot([
    { path: '', component: HomeComponent },
    { path: 'alligator', component: AlligatorComponent },
  ])
  ],
})

Redirecting Routes

We can employ router redirects to load different paths on the initial load.

[
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },
  { path: 'chomp', component: ChompComponent }
];

Upon our initial load, we look for our index route. When we load that, we are redirected to the ‘login’ route.

The key that follows pathMatch tells our router how to look up our new path. In our case the key full tells the router to compare the full path.

This means if we had something like:

{ path: '/route1/route2', redirectTo: 'alligator', pathMatch: 'full' },
{ path: 'alligator', component: AlligatorComponent },

If we load /route1/route2 , we’ll redirect to ‘alligator’ . But if we try to load /route1/route2/grip , the router will not redirect us to ‘alligator’ because the paths do not match completely.

We can also use the key prefix :

{ path: '/route1/route2', redirectTo: 'nest', pathMatch: 'prefix' },
{ path: 'nest', component: NestComponent },

Here, if we load either /route1/route2 or /route1/route2/bayou , we’ll redirect to ‘nest’ . This is because the prefixes of our paths match.

Lazy Loading

Currently, upon generating an Ionic app, the framework will provide you a router module that uses lazy loading. The following is an example of the app-routing.module.ts file it will generate.

app-routing.module.ts

...
const routes: Routes = [
  { path: '', loadChildren: './alligator/alligator.module#AlligatorPageModule' },
  { path: 'eggs', loadChildren: './eggs/eggs.module#EggsPageModule' },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
...

Notice how here, all routes are stored in the constant routes , which is then called inside the familiar Router.Module.forRoot() .

The loadChildren property allows us to reference a module by string instead of by component. Accordingly, a module is required for each of the components that we add to the Ionic app. Thankfully, Ionic generates all components for us with a matching module automatically. For demonstration’s sake, however, here is an example of a component module:

eggs.module.ts

import { RouterModule } from '@angular/router';
import { EggsComponent } from './eggs.component';

@NgModule({
  imports: [
  ...
  RouterModule.forChild([
    { path: '', component: EggsComponent },
  ])
  ],
})

Every time you generate a new page in Ionic, the framework will also automatically add a new router entry for you inside the router module. Say, “thank you, Ionic!” :pray::pray:

With this setup, we can create separate chunks for the app component, eggs component, and the alligator component.

Navigating to Routes

Let’s say we had our routes setup like so:

app-routing.module.ts

...
const routes: Routes = [
  { path: '', loadChildren: './gator/gator.module#GatorPageModule' },
  { path: 'tail', loadChildren: './tail/tail.module#TailPageModule' },
];

To navigate to the Tail page from the Gator page, set up your HTML template like so:

gator.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>Gator</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-button [routerLink]="['/tail']">Go to Tail</ion-button>
</ion-content>

The routerLink directive works similarly to typical hrefs, but rather than building the URL as a string, it can be built as an array, and can provide more complicated paths.

:crocodile::twisted_rightwards_arrows: Let's get routing!