一度遷移したページから戻ると、同じページに遷移できない

トラブルシューティング
#1

お世話になっております。
Ionic4 / Angular8で開発を行っております。

下記のようなサブルートを持つ構成で、
店舗の検索結果一覧画面から店舗画面へ遷移するようなシステムを構築しているのですが、
①検索結果一覧→②店舗画面→③検索結果一覧へ戻る→④店舗画面と遷移すると、④時点でURLは切り替わるものの、表示上ページが切り替わらない(コンポーネントが切り替わっていない)
という現象が発生しております。

<ルート>
/app/app-routing.module.ts

const routes: Routes = [
    {
        path: 'store',
        loadChildren: './components/pages/store-page-components/store-page-route/store-page-route.module#StorePageRoutePageModule',
    }
];

AppComponent(app.component.html)ではを使用しております。

<サブルート>
/app/components/pages/store-page-components/store-page-route/store-page-routing.module.ts

const routes: Routes = [
    {
        path: '',
        component: StorePageRoutePage,
        children: [
            {
                path: 'searchResult',
                loadChildren: '../search-result/search-result.module#SearchResultPageModule',
            },
            {
                path: 'storeDetail/:id',
                loadChildren: '../store-detail/store-detail.module#StoreDetailPageModule',
            }
        ]
    }
];

StorePageRoutePage(store-page-route.page.html)にを使用しております。

解決方法をご存知の方がいらっしゃいましたら、ご教授いただければ幸いです。

#2

<ion-route-outlet>と<router-outlet>を使用しているのが、原因のようですが、
下記のissueが関係していそうですね。
どう解決したら良いのでしょう。


#3

こちらの件ですが、私の場合は下記の流れで動作するようになりました。

①ion-router-outletとrouter-outletの入れ子をやめて、ion-router-outletとion-router-outletの入れ子構造に変更(ページ遷移不具合が解消される)
②2層目のion-router-outletをposition:relativeにして、ion-router-outlet直下の子コンポーネントに付与されるion-pageクラス属性をページがactivateされたタイミングで削除
(子供ページが潰れることなく、表示できるようになる)

app.component.html

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

store-page-route.page.html

<ion-content>
    <ion-router-outlet (activate)='onActivate()' 
        class="second_layer_outlet store_page_second_layer"></ion-router-outlet>
    <app-footer></app-footer>
</ion-content>

store-page-route.page.ts


export class HelpPageRoutePage implements OnInit {

~中略~
 // 子コンポーネントからclass属性のion-pageを削除
    onActivate() {
        const targetElements = document.getElementsByClassName('store_page_second_layer');
        [].forEach.call(targetElements, function (elem) {
            // ページ遷移する度にLazy Loadingで子供が増えていくため、さらにまわす
            [].forEach.call(elem.children, function (child) {
                child.classList.remove('ion-page');
            });
        });
    }
}

variables.scss等

  ion-router-outlet {
    &.second_layer_outlet {
      position: relative;
    }
  }
#4

解決できたと思ったのですが、今度はブラウザバックを行った時に、意図しないページに遷移するようになっていました。
なかなか解決できない。。。

#5

ビルドターゲットがweb（cordovaやcapacitorを使わない）しか経験ないのですが、ion-routerもion-router-outletも使わずにピュアのrouter-outletでやっています。ionicのelementはshadow-DOMを展開します。ion-router-outletも同じくshadow-DOMを展開して、slotからcomponentを設置します。ここからは推測ですが、DOM構造が異なりAngularが適切にDIコンテナの出し入れやライフサイクルのイベント管理できなくなる場面が出てきそうで、避けるようになりました。私もページ遷移する度に子供が増えていく場面があり、それをきっかけに辞めました。

#6

とはいえ、v4は内部的には新規リプレースです。現在も開発が活発です。なので、この件も開発チームが追いきれてないだけの可能性あり、ブラウザバックの件はISSUE報告するのが良さそうな気がします。