SAPUI5 Component.getRouter() does not exist

[koebelt]

Hello, I'm working on a TypeScript SAPUI5 app, in a table I need to route the user on the Object Page linked to the row.

Unfortunately, in the view controller when I want to get the Router to proceed with routing, i'm struck with an error: `Property 'getRouter' does not exist on type 'Component'.`

Here's the code : 

onSessionPress(oEvent: any): void {
        const oItem = oEvent.getSource();
        const sSessionID = oItem.getBindingContext().getProperty("ID");
        const oRouter = this.getOwnerComponent()?.getRouter();
        
        oRouter.navTo("SessionObjectPage", {
            ID: sSessionID
        });
    }

In the manifest.json, the routing is defined like this:

"routing": {
      "routes": [
        {
          "name": "SessionsSessionsListPage",
          "pattern": ":?query:",
          "target": "SessionsSessionsListPage"
        },
        {
          "name": "SessionsSessionObjectPage",
          "pattern": "Sessions({SessionsKey}):?query:",
          "target": "SessionsSessionObjectPage"
        }
      ],
      "targets": {
        "SessionsSessionsListPage": {
          "type": "Component",
          "id": "SessionsSessionsListPage",
          "name": "sap.fe.core.fpm",
          "options": {
            "settings": {
              "viewName": "raceanalysis.ext.view.SessionsListPage",
              "contextPath": "/Sessions",
              "navigation": {
                "Sessions": {
                  "detail": {
                    "route": "SessionsSessionObjectPage"
                  }
                }
              }
            }
          }
        },
        "SessionsSessionObjectPage": {
          "type": "Component",
          "id": "SessionsSessionObjectPage",
          "name": "sap.fe.core.fpm",
          "options": {
            "settings": {
              "viewName": "raceanalysis.ext.view.SessionObjectPage",
              "contextPath": "/Sessions"
            }
          }
        }
      },
      "config": {}
    }

The only issue remotely similar I found is this: https://community.sap.com/t5/technology-q-a/navigation-problem/qaq-p/11609343  . But it's quite old and didn't found a clear answer.

Any help is appreciated !

[Noel_Hendrikx]

Hi there, do you have this line in your Component file?

this.getRouter().initialize();

In your code you are referring to getOwnerComponent (which is the Component file in your case). 

[FlorianVogt]

use the generic UIComponent.getRouterFor method.

import UIComponent from "sap/ui/core/UIComponent";

onPress(): void {
        const router = UIComponent.getRouterFor(this);
        router.navTo("detail");
    }    
};

[WouterLemaire · Accepted solution]

I guess something is missing in your project. Have a look at the TS sample here: https://sap-samples.github.io/ui5-typescript-walkthrough/step-30/README.html