Ionic 4 - Navigating between components in the same module

Ionic Framework
#1

I have the following structure:

  • AppModule - the main app module
  • TabsModule - my app tabs module
  • HomePageModule - One of my tabs

Inside my HomePageModule I have 2 pages (components): HomePage, AddItemPage

I’m trying to navigate from HomePage to AddItemPage. Both are in the same module, HomePageModule:

@NgModule({
  imports: [
    IonicModule,
      RouterModule.forChild([
          { path: '', component: HomePage },
          { path: 'add-item', component: AddItemPage }]),
    CommonModule,
    FormsModule,
      ComponentsModule,
      AngularFireStorageModule
  ],
  declarations: [HomePage, AddConfessionPage],
    providers: []
})
export class HomePageModule {}

In my HomePage I have the following HTML:

<ion-fab slot="fixed" vertical="bottom" horizontal="end" routerLink="['add-item']">
    <ion-fab-button mini><ion-icon name="add"></ion-icon></ion-fab-button>
  </ion-fab>

When I click this button, I get the following error:

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'tabs'
Error: Cannot match any routes. URL Segment: 'tabs'

I noticed that the add-item page can be accesses under this URL: http://app-url:4200/add-item while my HomePage is under this URL:
http://app-url:4200/tabs/(home:home)

What’s wrong with the way I configured my add-item route and how do I fix this?

#2