How to resolve the error: "The target [...] no viewName defined"?

user_13957966 0
Viewed 109

I'm pretty new in SAPUI5 and started to learn the subject on Routing and navigation as you can see in their documentation: https://ui5.sap.com/#/topic/e5200ee755f344c8aef8efcbab3308fb

Now I did all the changes like they do in their documentation but I have an error that I don't understand why it is being thrown:

The target overview no viewName defined. - EventProvider sap.m.routing.Target

Link to the image of SAPUI5 Routing Error

Here is the manifest:

{
  "...": "...",
  "sap.ui5": {
    "_version": "1.1.0",
    "resources": {
      "css": [
        {
          "uri": "css/style.css"
        }
      ]
    },
    "dependencies": {
      "minUI5Version": "1.60",
      "libs": {
        "sap.m": {}
      }
    },
    "...": "...",
    "rootView": {
      "viewName": "sap.ui.startApp.view.App",
      "type": "XML",
      "async": true,
      "id": "app"
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "type": "View",
        "viewType": "XML",
        "path": "sap.ui.startApp.view",
        "controlId": "app",
        "controlAggregation": "pages"
      },
      "routes": [
        {
          "pattern": "",
          "name": "overview",
          "target": "overview"
        },
        {
          "pattern": "detail",
          "name": "detail",
          "target": "detail"
        }
      ],
      "targets": {
        "overview": {
          "id": "overview",
          "name": "Overview"
        },
        "detail": {
          "id": "detail",
          "name": "Detail"
        }
      }
    }
  }
}
sapui5
1 Answers

Solution

  • Either add "async": true to /sap.ui5/routing/config/ in manifest.json

  • Or preferably add "sap.ui.core.IAsyncContentCreation" to the application's UIComponent:

    sap.ui.define([
  "sap/ui/core/UIComponent",
  // ...
], function(UIComponent/*,...*/) {
  "use strict";

  return UIComponent.extend("my.Component", {
    metadata: {
      interfaces: [
        "sap.ui.core.IAsyncContentCreation", // Available since 1.89.0
      ],
      manifest: "json",
    },
    // ...
  });
});

Analysis

The /sap.ui5/routing/targets properties viewName, viewId, viewPath, and viewLevel are regarded as legacy syntax since UI5 1.58.0 (as part of the initiative to support routing with nested components) and thus it is correct to declare name, id, path, and level respectively instead of viewName, etc.. *

The error "[...] no viewName defined" actually comes from sap/ui/core/routing/sync/Target.js. The /sync part indicates that the views are created synchronously which should be avoided because it's blocking the UI thread of the browser during the routing process. Instead, targets should be created asynchronously which, however, requires an additional flag as shown above.

If the targets are created asynchronously, the error will be gone.

* In case existing apps still need to migrate to the new name, id, path, and level syntax:

user_58460450
Related