ionic4 navigateByUrlで特定の画面のみ遷移できない

前提・実現したいこと

ionic3から移行したionic4のアプリでページ遷移を正しく行いたい。
ページ遷移の構成としては、
tabsが一番上にあり、その下にhomeがあり、
そのhomeから設定画面に遷移するという作りになっています。
（ tabs⇒home⇒settings ）

発生している問題・エラーメッセージ

this.router.navigateByUrl('tabs/home/settings')
で画面遷移を動作させているが、対象ボタンをクリックしても画面遷移しない。
（正しく遷移できるその他画面もあるが、見比べても違いがわかりません。。）

該当のソースコード

home.page.hmtl

html
1<ion-buttons class="settings-button" slot="primary">
2 <ion-button icon-only (click)="selectFavorites()">
3  <ion-icon name="ios-settings"></ion-icon>
4 </ion-button>
5</ion-buttons>

ここで設定画面(settings)へ遷移したい
home.page.ts

ts
1selectFavorites() {
2 this.router.navigateByUrl('tabs/home/settings');
3}

home-routing.module.ts（ボタン押下で、このpath: 'settings'に来ていることは確認済み）

const routes: Routes = [
  {
    path: '',
    component: HomePage
  },
  {
    path: 'settings',
    loadChildren: '../home/fav-settings/fav-settings.module#FavSettingsPageModule'
  }
];

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

settings.module.ts

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    FavSettingsPageRoutingModule
  ],
  declarations: [FavSettingsPage]
})
export class FavSettingsPageModule {}

settings-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: FavSettingsPage
  }
];

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

tabs-routing.module.ts

const routes: Routes = [
{
  path: '',
  component: TabsPage,
  children: [
    {
      path: 'home',
      children: [
        {
          path: '',
          loadChildren: () =>
            import('../home/home.module').then(m => m.HomePageModule)
        },
      ]
    },
    {
      path: '',
      redirectTo: 'home',
      pathMatch: 'full'
    }
  ]
},
{
  path: '',
  redirectTo: 'home',
  pathMatch: 'full'
}
];

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

app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
  {
    path: 'tabs',
    loadChildren: () => import('./tabs/tabs.module').then( m => m.TabsPageModule)
  },
];

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

app.module.ts

@NgModule({
	declarations: [
		AppComponent,
	],
	imports: [
		BrowserModule,
		FormsModule,
		HttpClientModule,
		LinkyModule,
		IonicModule.forRoot({mode:'ios', backButtonText: '', swipeBackEnabled: true}),
		AppRoutingModule,
		TranslateModule.forRoot({
			loader: {
				provide: TranslateLoader,
				useFactory: (createTranslateLoader),
				deps: [HttpClient]
			}
		}),
	],
	bootstrap: [AppComponent],
	providers: [
		Calendar,
		StatusBar,
		SplashScreen,
		InAppBrowser,
		Geolocation,
		Network,
	]
})
export class AppModule { }

ご迷惑をおかけしますが、よろしくお願いいたします。