Uncaught TypeError: Cannot read property 'oTargetControl' of undefined

2
votes

When loading my application, I receive this error:

Uncaught TypeError: Cannot read property 'oTargetControl' of undefined"

I'm using Routing configurations (this is SAPui5 Application).

    "routing": {
        "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "myNav.view",
            "controlId": "app",
            "controlAggregation": "pages"

        },
        "routes": [{
            "pattern": "",
            "name": "first",
            "target": "first"

        }, {
            "pattern": "",
            "name": "second",
            "target": "second"

        }],
        "targets": {
            "first": {
                "viewName": "First"
            },
            "second": {
                "viewName": "Second"

            }
        }

    }

My Component.js Code is

    UIComponent.prototype.init.apply(this, arguments);
    this.setModel(models.createDeviceModel(), "device");
    this.getRouter().initialize();

This is a simple navigation example and I have two Views (First and Second View).

How do I fix this?

3
javascriptnavigationsapui5router

3 Answers

3
votes

Did you specify a root view?

You specified a controlId 'app' and a controlAggregation 'pages' for your routing. That means your Router will search for the control with the id 'app' and will try to replace the aggregation 'pages' of this control with the matching route.

I guess oTargetControl is the not-found control 'app' and that's why the error occurs.

Sth. like this should go in your applications config:

"rootView": "my.app.Root"

Secondly as Nabi already mentioned routing works strictly first match, first served, meaning that your view Second will NEVER be used. You either have to adapt patterns or use the greedy flag.

see https://sapui5.hana.ondemand.com/sdk/#docs/guide/cf3c57c89ef0491793d1ce327ab4f9b2.html

0
votes

Your 2 routes have the same pattern. Which of the routes do you expect to be matched in case of the empty hash (pattern="")? I guess this is causing the issue. Either make sure you have different patterns or use the greedy feature which is supported by the underlying library crossroads.js

0
votes

In my case I added "async" : true property into routing

`

"routing": {
            "config": {
                "routerClass": "sap.m.routing.Router",
                "viewType": "XML",
                "viewPath": "sap.sapx5Exercise03_1.view",
                "controlId": "menu",
                "targetControl" : "app",
                "transition": "slide",
                "controlAggregation": "pages",
                "bypassed": {
                    "target": "notFound"
                },
                "async" : true

            },

`...... and remember that "controlId": "menu", value of property should be into your view

`

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="sap.sapx5Exercise03_1.controller.Menu"
    xmlns:html="http://www.w3.org/1999/xhtml"
    xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1"
    >
    <App id="menu">

`......