Как создать маршруты внутри вкладки в ионной 4 с использованием угловых?

Question

Я хочу перейти на страницу внутри одной из моих вкладок, и я хочу поместить маршрутизацию внутри этого модуля вкладок, я пробовал много способов, но не смог сделать это. Я знаю, если я объявлю страницу внутри tabs.module, это решит мою проблему, но я хочу объявить ее внутри вкладки самостоятельно, а затем перейти к ней. Я думаю, что структура проекта прояснит то, что я говорю!

-tabs
 -tab-notification
 -tab-profile
   -settings-modal

это мой app.routing.module

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

const routes: Routes = [
  { path: 'tabs', redirectTo: '', pathMatch: 'full' },
  { path: '', loadChildren: './pages/tabs/tabs.module#TabsPageModule' },
];

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

и это tabs.page.module, где я инициализировалмои маршруты

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { TabsPage } from './tabs.page';
import { TabProfilePageModule } from '../tab-profile/tab-profile.module';

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      { path: 'tab-notification', loadChildren: '../tab-notification/tab-notification.module#TabNotificationPageModule' },
      { path: 'tab-profile', loadChildren: '../tab-profile/tab-profile.module#TabProfilePageModule' },

    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [TabsPage]
})
export class TabsPageModule { }

И это профиль вкладки, где я хочу инициализировать маршрут настроек

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

import { IonicModule } from '@ionic/angular';

import { TabProfilePage } from './tab-profile.page';

const routes: Routes = [
  {
    path: '',
    component: TabProfilePage,
    children:[
  { path: '/settings-modal', loadChildren: '../tab-profile/settings-modal/settings-modal.module#SettingsModalPageModule' },
    ]
  }
];

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [TabProfilePage]
})
export class TabProfilePageModule {}

, но когда я делаю это, я получаю эту ошибку

core.js: 9110 ОШИБКА Ошибка: Uncaught (в обещании): Ошибка: не удается сопоставить ни один маршрут. Сегмент URL: «настройки-модальные»