After navigating to different tabs, buttons on the page don't work anymore, in Ionic 4

Ionic Framework ionic-v3
1

I am trying to write an app using Ionic 4 with Angular 6. The app has tabs, and for each tab, depending on the state of the app, it should either show 1) task1 or 2) task2 which has a series of pages I should be able to click through as well as go back to previous page if I wanted to.

I used the starter code “ionic start myApp tabs --type=angular” to have the tabs set up, and was trying to implement task2.

I am not using lazy-loading and relative router navigation because it wasn’t working.

Nnow that I can navigate inside the FAQs tab to go to different pages via buttons, when I go to a different tab, and come back, the buttons goes to the right path, but the component doesn’t render at all (I check the html, and the html for the page I want to go to, doesn’t render)

I want to be able to navigate to pages within each tab after I go to a different tab, and have the component (html) show up always.

The gif shows the problem I am describing, when the app first starts, I can click on pagethree and the back button to succesffuly nagivate between CONTACTTESTONE and TESTTHREE. However, when I click tab “trial-results”, and click back to the faq tab, the buttons don’t display the right page anymore. I want to be able to have it work like before I switched tabs.

gif that shows the problem

Here is my code:

File structure:

  • app
    • tabs
      • tabs.modules.ts
      • tabs.page.html
      • …
      • tabs.router.module.ts
    • current-trial
      • current-trial.modules.ts
      • current-trial.page.html
      • …
    • trial-results
      • …
    • faqs
      • faqs.modules.ts
      • faqs.page.html
      • contact-test-one
        • contact-test-one.modules.ts
        • …
      • contact-test-two
      • test-three
      • …
    • settings

List item

app.component.html

`<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>`

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
    { path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
];
@NgModule({
  imports: [RouterModule.forRoot(routes, {enableTracing: true, }), ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

/tabs/tabs.page/html

<ion-tabs>
  <ion-tab label="Current Trial" icon="search" href="/tabs/(current-trial:current-trial)">
    <ion-router-outlet name="current-trial"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Trail Results" icon="clipboard" href="/tabs/(trial-results:trial-results)">
    <ion-router-outlet name="trial-results"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="FAQs" icon="information-circle" href="/tabs/(faq:faq)">
    <ion-router-outlet name="faq"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="Settings" icon="settings" href="/tabs/(settings:settings)">
    <ion-router-outlet name="settings"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

/tabs/tabs.router.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { TabsPage } from './tabs.page';

import { CurrentTrialPage } from '../current-trial/current-trial.page'
import { TrialResultsPage } from '../trial-results/trial-results.page' 
import { FAQsPage } from '../faqs/faqs.page'
import { SettingsPage } from  '../settings/settings.page'

import { ContactTestOnePage } from '../faqs/contact-test-one/contact-test-one.page'
import {ContactTestTwoPage } from '../faqs/contact-test-two/contact-test-two.page'
import { TestThreePage } from '../faqs/test-three/test-three.page'
import { TestFourPage } from '../faqs/test-four/test-four.page'

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      {
        path: 'current-trial',
        outlet: 'current-trial',
        component: CurrentTrialPage,
        children: [   
        ],

      },
      {
        path: 'trial-results',
        outlet: 'trial-results',
        component: TrialResultsPage
      },
      {
        path: 'faq',
        outlet: 'faq',
        component: FAQsPage,
        children: [
          { path: 'TestOne', component: ContactTestOnePage},
          { path: 'TestTwo', component: ContactTestTwoPage},
          { path: 'TestThree', component: TestThreePage},
          { path: '', redirectTo: 'TestOne' },
        ]
      },
      {
        path: 'faq-2',
        outlet: 'faq',
        component: FAQsPage,
        children: [
        ]
      },
      {
        path: 'settings',
        outlet: 'settings',
        component: SettingsPage
      }
    ]
  },
  {
    path: '',
    redirectTo: '/tabs/(current-trial:current-trial)',
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class TabsPageRoutingModule {}

/faqs/faqs.page.html

<ion-router-outlet></ion-router-outlet>

/faqs/contact-test-one/contact-test-one.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>ContactTestOne</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
	<ion-button (click) = "nextPageThree()">TestThree</ion-button> 
</ion-content>

/faqs/contact-test-one/contact-test-one.page.ts

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

@Component({
  selector: 'app-contact-test-one',
  templateUrl: './contact-test-one.page.html',
  styleUrls: ['./contact-test-one.page.scss'],
})
export class ContactTestOnePage implements OnInit {

  constructor(
		private route: ActivatedRoute,
		private router: Router,
  ) { 
  }

  ngOnInit() {
  }

  nextPageThree() { 	
  	this.router.navigateByUrl('/tabs/(faq:faq/TestThree)')
    .then(data => {console.log(data);})
    [enter image description here][1].catch(error => {console.log(error)});
  }