[Ionic4/Angular] Basic tab app routing issues - framework or me?

Ionic Framework
1

Hello everyone, thanks for the time you spend reading and helping.

I’m trying to reproduce the tab app from the Ionic CLI so I can learn about routing. I first wanted do it without modules and with routing in a single file, app-routing.module.ts

To do that I’ve created 4 components with Ionic CLI like this:

  • tabs component which has ion-tab in its template (parent)
  • home tab component (nested)
  • agenda tab component (nested)
  • about tab component (nested)

File structure looks like that :
image

my app-routing.module.ts looks like :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './tabs/home/home.component';
import { AgendaComponent } from './tabs/agenda/agenda.component';
import { AboutComponent } from './tabs/about/about.component';
import { TabsComponent } from './tabs/tabs.component';

const routes: Routes = [
  { path: '', redirectTo: 'tabs', pathMatch: 'full' },
  { path: 'tabs', component: TabsComponent, children: [
    {
      path: 'home',
      component: HomeComponent,
      outlet: 'outlet_home',
    },
    {
      path: 'agenda',
      component: AgendaComponent,
      outlet: 'outlet_agenda',
    },
    {
      path: 'about',
      component: AboutComponent,
      outlet: 'outlet_about',
    },
  ]
 },
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { enableTracing: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

my tabs.component.html (parent template) looks like:

<ion-tabs>
  <ion-tab label="home" icon="musical-note">
      <ion-router-outlet name="outlet_home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="agenda" icon="person">
    <ion-router-outlet name="outlet_agenda"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="about" icon="people">
    <ion-router-outlet name="outlet_about"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Childs component only got basic templates and default component.ts from the CLI.

My main tab component loads well, I can see the tab component but when I try to access a child’s url let’s say http://localhost:8100/tabs/home I can see this error in the chrome console :

image
image.png790×204 14.5 KB

I doesn’t understand why it doesn’t match any route as I have defined one in app-routing.module.ts

Any insights or help would be greatly appreciated as I’m going crazy on this :confused:

Also I can’t determine if this is a framework issue as I read some stuff about angular not handling outlet on root level or if it’s me misusing those tools.

Environment specs :

Ionic:

ionic (Ionic CLI) : 4.1.1
Ionic Framework : @ionic/angular 4.0.0-beta.3
@angular-devkit/core : 0.7.4
@angular-devkit/schematics : 0.7.4
@angular/cli : 6.1.4
@ionic/ng-toolkit : 1.0.7
@ionic/schematics-angular : 1.0.5

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (0 plugins total)

System:

Android SDK Tools : 26.1.1
NodeJS : v8.11.3
npm : 5.6.0
OS : Windows 10

1 Like
2

Okey it was really dumb, I just had to use the selector of my components properly …

<ion-tabs>
  <ion-tab label="home" icon="musical-note">
    <home></home>
  </ion-tab>
  <ion-tab label="agenda" icon="person">
    <agenda></agenda>
  </ion-tab>
  <ion-tab label="about" icon="people">
    <about></about>
  </ion-tab>
</ion-tabs>


import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

So I’m a bit confused about when to use routing now but I will figure it out, thanks !

3

I would still go with the router-outlet aproach instead of having the page nested directly into the tab page.

The secondary outlets are no accessed like /tabs/home, but like this: /tabs/(outlet_name:childurl)
so for instance: /tabs/(outlet_home:home).
If you go even deeper it is like: /tabs/(outlet_home:home/details/x)

also you might want to add following child to your tab:

{path: '', redirectTo: 'tabs/(outlet_home:home)}

then you could just navigate to /tabs

2 Likes