SAPUI5: View doesn't load corresponding Controller after routing in ToolPage Layout

[silvertae]

Hello experts!
I made some simple movie website using ToolPage layout like below.

view/App.view.xml

<mvc:View controllerName="my_namespace.controller.App"
  xmlns:html="http://www.w3.org/1999/xhtml"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns:tnt="sap.tnt"
  xmlns:core="sap.ui.core">
  <App id="app">
    <tnt:ToolPage id="toolPage">
      <tnt:header>
        <core:Fragment fragmentName="my_namespace.view.Header" />
      </tnt:header>
      <tnt:subHeader>
        <core:Fragment fragmentName="my_namespace.view.subHeader" />
      </tnt:subHeader>
      <tnt:mainContents>
        <NavContainer id="toolPageNavContainer">
          <pages></pages>
        </NavContainer>
      </tnt:mainContents>
    </tnt:ToolPage>
  </App>
</mvc:View>

 And I want to fix my header in every page and only switch mainContents using routing. So I wrote routing config in manifest.json file. 

manifest.json

{
 "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "type": "View",
        "viewType": "XML",
        "async": true,
        "viewPath": "my_namespace.view",
        "controlId": "toolPageNavContainer",
        "controlAggregation": "pages",
        "transition": "fade"
      },
      "routes": [
        {
          "pattern": "",
          "name": "home",
          "target": "movieList"
        },
        {
          "pattern": "movie/{movieId}",
          "name": "detail",
          "target": "movieDetail"
        },
        {
          "pattern": "profile",
          "name": "profile",
          "target": "profile"
        }
      ],
      "targets": {
        "movieList": {
          "viewName": "MovieList",
          "viewId": "movieListView"
        },
        "movieDetail": {
          "viewName": "MovieDetail",
          "viewId": "movieDetailView"
        },
        "profile": {
          "viewName": "Profile",
          "viewId": "profileView"
        }
      }
    },
    "rootView": {
      "viewName": "my_namespace.view.App",
      "type": "XML",
      "async": true,
      "id": "app"
    }
}

 The problem is when I refresh browser in my "movieDetail" page and navTo "home" page which targets MovieList.view.xml, the MovieList view shows up fine, but the MovieList.controller.js file doesn't load. However, it works fine in reverse.

refresh in movieDetail pageand navigate to home

And weird thing is when I refresh browser in my Profile page and navTo home page everything works fine.

How can this be possible? I already check every namespace of View and Controller files, but cannot find anything wrong.

I start this project using BAS Multitarget Application Template and attach application information. If you need more source code or some information please tag me. I will reply ASAP.

If you have encountered the same issue or have any idea what might be going wrong, please advise.

Thanks.

[boghyon]

Could you share a minimal reproducible sample? E.g. click on "Fork" in https://plnkr.co/edit/16J1TFICxbqETCzaxuZ0, edit accordingly, save, and share the new URL here.

[silvertae]

@boghyon 
I made simplified example that has a same structure with my app.
https://plnkr.co/edit/9mUKXSbRFRfgcApW
Please check this.

In this demo it seems everything works fine, but problem in real app is when I refresh the browser in my movieDetail page and navBack to home, movieList view loaded without its controller file...

Thank you.

[boghyon]

Is there any relevant error in the console when navigating to the list (2nd screenshot)? Could you double-check if all controllerName="..." are correct in the views?

[martinc_mb38]

@silvertae Did you find the solution to this? I am sitting with exactly the same weird problem. On navigation to the view, the corresponding controller doesn't load, but when refreshing that page or loading it first, the controller loads.