Tutorial

Using Angular Routing in Ionic 4

Published on March 26, 2019
    Default avatar

    By Caroline Choi

    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!

    Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

    Learn more about us


    About the authors
    Default avatar
    Caroline Choi

    author

    Still looking for an answer?

    Ask a questionSearch for more help

    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!

    Try DigitalOcean for free

    Click below to sign up and get $200 of credit to try our products over 60 days!

    Sign up

    Join the Tech Talk
    Success! Thank you! Please check your email for further details.

    Please complete your information!

    Get our biweekly newsletter

    Sign up for Infrastructure as a Newsletter.

    Hollie's Hub for Good

    Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

    Become a contributor

    Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

    Welcome to the developer cloud

    DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

    Learn more
    DigitalOcean Cloud Control Panel