Routing in UI5

[former_member816488]

Hi All!

I am trying to navigate from my view1 to view2 using router in ui5.

But i am getting the following error in console.

2022-11-24 20:26:37.980600 Failed to load component for container content. Reason: TypeError: Cannot read properties of undefined (reading 'initialize') -

component.js

sap.ui.define([
	"sap/ui/core/UIComponent",
	"sap/ui/model/json/JSONModel"
], function(UIComponent, JSONModel){
	return UIComponent.extend("zpractice.Component",{
	metadata: {
		 includes: ["css/style.css"],
			interfaces: ["sap.ui.core.IAsyncContentCreation"],
	         manifest: "json"
			
	},
	init: function(){
		UIComponent.prototype.init.apply(this, arguments);
		var oModel = new JSONModel(sap.ui.require.toUrl("zpractice/product.json"));
		oModel.setSizeLimit(100000);
		this.setModel(oModel);
		
		this.getRouter().initialize();
	}
});
});

controller.js

onPress: function(oEvent){
			var oRouter = this.getOwnerComponent().getRouter();
			oRouter.navTo("flex");
		}

manifest.json

{
  "version": "1.12.0",
  "sap.app": {
    "id": "zpractice",
    "type": "application",
    "applicationVersion": {
      "version": "1.0.0"
    }
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "rootView": {
      "viewName": "zpractice.view.project",
      "type": "XML",
      "id": "myApp",
      "async": true
    },
    "dependencies": {
      "minUI5Version": "1.93",
      "libs": {
        "sap.ui.core": {},
        "sap.ui.layout": {},
        "sap.m": {},
        "sap.f": {}
      },
      "routing": {
        "config": {
          "routerClass": "sap.m.routing.Router",
          "type": "View",
          "viewType": "XML",
          "path": "zpractice.view.",
          "controlId": "myApp",
          "controlAggregation": "pages",
          "async": true
        },
        "routes": [
          {
            "pattern": "",
            "name": "project",
            "target": "project"
          },
          {
            "pattern": "flex",
            "name": "flex",
            "target": "flex"
          }
        ],
        "targets": {
          "project": {
            "id": "project",
            "name": "project"
          },
          "flex": {
            "id": "flex",
            "name": "flex"
          }
        }
      }
    }
  }
}

[rabipanda]

can you try targets as below

			
	"targets": {
          "project": {
            "viewId": "project",
            "viewName": "project",
	    "viewLevel": 1,
	    "title": ""
          },
          "flex": {
            "viewId": "flex",
            "viewName": "flex",
	    "viewLevel": 2,
	    "title": ""
          }
        }

[junwu]

are you following any tutorial?

who tell you to write this?
 "targets": {
          "project": {
            "id": "project",
            "name": "project"
          },
          "flex": {
            "id": "flex",
            "name": "flex"
          }
        }

[former_member816488]

Hi Jun wu

Yes sap ui5 walkthrough step 30

I used that as reference.