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

**URL:** <https://forum.ionicframework.com/t/ionic4-angular-basic-tab-app-routing-issues-framework-or-me/139131>\
**Category:** Ionic Framework\
**Created:** [August 21, 2018, 9:49am UTC](https://forum.ionicframework.com/t/ionic4-angular-basic-tab-app-routing-issues-framework-or-me/139131 "2018-08-21T09:49:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Firoux](https://avatars.discourse-cdn.com/v4/letter/f/ed655f/32.png) [@Firoux](https://forum.ionicframework.com/u/Firoux)\
**Post date:** [August 21, 2018, 9:49am UTC](https://forum.ionicframework.com/t/ionic4-angular-basic-tab-app-routing-issues-framework-or-me/139131/1 "2018-08-21T09:49:46Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/6/e/6eb436532c7bc1833047d1e4947392bebc09af09.png)

my **app-routing.module.ts** looks like :

```auto
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:

```auto
<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](http://localhost:8100/tabs/home)** I can see this error in the chrome console :

 ![image](https://global.discourse-cdn.com/ionicframework/original/3X/e/e/eec10e29d3b1433ea7a59bd807f0fdf40eafe525.png)

**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 😕

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

---

<div class="post-metadata">

**Author:** ![Firoux](https://avatars.discourse-cdn.com/v4/letter/f/ed655f/32.png) [@Firoux](https://forum.ionicframework.com/u/Firoux)\
**Post date:** [August 21, 2018, 10:51am UTC](https://forum.ionicframework.com/t/ionic4-angular-basic-tab-app-routing-issues-framework-or-me/139131/2 "2018-08-21T10:51:21Z")

</div>

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

```auto
<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>

```

```auto
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 !

---

<div class="post-metadata">

**Author:** ![dwagh](https://avatars.discourse-cdn.com/v4/letter/d/dfb087/32.png) [@dwagh](https://forum.ionicframework.com/u/dwagh)\
**Post date:** [August 30, 2018, 9:27am UTC](https://forum.ionicframework.com/t/ionic4-angular-basic-tab-app-routing-issues-framework-or-me/139131/3 "2018-08-30T09:27:45Z")

</div>

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:

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

```

then you could just navigate to /tabs

---

<div class="post-metadata">

**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\
**Post date:** [July 19, 2021, 9:22pm UTC](https://forum.ionicframework.com/t/ionic4-angular-basic-tab-app-routing-issues-framework-or-me/139131/4 "2021-07-19T21:22:55Z")

</div>

Closed on July 19, 2021, 9:22pm UTC