Table of Contents
URL: https://www.progressiverobot.com/ionic-using-angular-routing-in-ionic-4/
The Router module is one of the most important in the Angular library. Paired with Ionic 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.
[label 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:
[label eggs.module.ts]
import { RouterModule } from '@angular/router';
import { EggsComponent } from './eggs.component';
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!” 🙏🙏
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:
[label 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:
[label 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.
🐊🔀 Let's get routing!
