How to use local routing with Ionic Angular

I have an app and I need to do some local routing.

I have attached the file structure as an image

What I want to do is when I click on a button in the manage account it then navigates to accountdetailed.

Currently I have the routing in the app-routing.module.ts like so:

const routes: Routes = [
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule),
    canLoad: [AutoLoginGuard] // Check if we should show the introduction or forward to inside
  },
  {
    path: 'nav',
    loadChildren: () => import('./sidenav/sidenav.module').then(m => m.SidenavPageModule),
    canLoad: [AuthGuard] // Secure all child pages
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: 'accountdetailed/:id',
    loadChildren: () => import('./manageaccount/accountdetailed/accountdetailed.module').then( m => m.AccountdetailedPageModule)
  },
  {
    path: 'manageaccount',
    loadChildren: () => import('./manageaccount/manageaccount.module').then( m => m.ManageaccountPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

and here is my manageaccount code:

html:

<ion-list id="settingList" class="ion-no-padding">
    <ion-item color="dark" id="yourDetailsBtn"  (click)="showDetail('details', 'yourDetailsBtn')" button>
      <ion-label class="white-text">Your Details</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

manageaccount.page.ts:

import {Component, OnInit, ViewChild} from '@angular/core';
import {IonAccordionGroup, NavController} from '@ionic/angular';

@Component({
  selector: 'app-manageaccount',
  templateUrl: './manageaccount.page.html',
  styleUrls: ['./manageaccount.page.scss'],
})
export class ManageaccountPage implements OnInit {
  @ViewChild(IonAccordionGroup, {static: true}) accordionGroup: IonAccordionGroup;

  constructor(
    private navCtrl: NavController
  ) {}

  ngOnInit() {
  }

  logAccordionValue() {
    console.log(this.accordionGroup.value);
  }

  closeAccordion() {
    this.accordionGroup.value = undefined;
  }

  showDetail(type, id) {

    alert(id);
    console.log(id);

    this.navCtrl.navigateForward(['accountdetailed', id]);

  }
}

manageaccount-routing.module.ts

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

import { ManageaccountPage } from './manageaccount.page';

const routes: Routes = [
  {
    path: '',
    component: ManageaccountPage
  },
  {
    path: 'accountdetailed/:id',
    loadChildren: () => import('./accountdetailed/accountdetailed.module').then( m => m.AccountdetailedPageModule)
  }
];

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

So when I click on Your details button and it calls showDetail() method, how do I make it use the manageaccount-routing.module.ts instead of the main app routing

Use Activated Route in manageaccount.page.ts:

import { ActivatedRoute } from '@angular/router';

constructor(
  private navCtrl: NavController,
  private route: ActivatedRoute
) { }

showDetail(type, id) {
  this.navCtrl.navigateForward(['accountdetailed', id], { relativeTo: this.route });
}

A recommended way is,

  1. Take a backup of accountdetailed page.
  2. Delete accountdetailed page inside manageaccount folder.
  3. Navigate to the manageaccount folder in terminal/command-prompt and run
    ionic generate page accountdetailed
  4. Copy the accountdetailed.page.html, accountdetailed.page.ts and accountdetailed.page.scss files to the accountdetailed folder inside manageaccount folder.
  5. Now on click function write
go_to_accountdetailed(){
//use soome service to store the relevant data and import in the next page.
this.router.navigate(["/manageaccount/accountdetailed"]
}

Use https://edupala.com/ionic-service/ for service usage.