// Tutorial //

Using Angular Routing in Ionic 4

Published on March 26, 2019
    Default avatar
    By Caroline Choi
    Developer and author at DigitalOcean.
    Using Angular Routing in Ionic 4

    While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

    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.

    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';
    
    
    

    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.

    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.

    🐊🔀 Let’s get routing!


    Want to learn more? Join the DigitalOcean Community!

    Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

    Sign up
    About the authors
    Default avatar
    Developer and author at DigitalOcean.

    Still looking for an answer?

    Was this helpful?
    Leave a comment

    This textbox defaults to using Markdown to format your answer.

    You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!