Problem initializing router

[rhightower13]

I'm creating a simple application on HCP with the following Component.js file:

jQuery.sap.declare("ui5.Component");


sap.ui.core.UIComponent.extend("ui5.Component",{
  metadata: {
  },

  init: function() {

  jQuery.sap.require("sap.ui.core.routing.History");
        jQuery.sap.require("sap.m.routing.RouteMatchedHandler");

  //call createContent
  sap.ui.core.UIComponent.prototype.init.apply(this, arguments);

  this._router = this.getRouter();

  //initlialize the router
  this._routeHandler = new sap.m.routing.RouteMatchedHandler(this._router);
  this._router.initialize();

  },

  createContent: function() {

  var oView = sap.ui.view({
  id: "app",
  viewName: "ui5.view.App",
  type: "JS",
  viewData: {component: this}
  });

  var oModel = new sap.ui.model.json.JSONModel("model/data.json");
  oView.setModel(oModel);

  return oView;

  }

});

On line 19 I'm getting this error:

Uncaught TypeError: Cannot read property 'attachRouteMatched' of undefined

Turns out this.getRouter() is returning undefined.

Any suggestions?

Thanks,

Ross

[Former Member · Accepted solution]

You are getting the error because you have not defined the Routing configuration in your metadata of component.js.

Inside your metadata you have to provide the configuration.

something like this.

routing : {

  config : {

  viewType : "JS",

  viewPath : "",

  targetControl : "",

  clearTarget : false,

  },

  routes : [

  {

  pattern : "", // which appears in URL, while you navigate

  name : "",     // Name that is used in navTo method

  view : "",   // this is the target view that you are navigating to

  viewPath : "", // path of the target view

  targetAggregation : "" // this defines whether the target view is a

  },

  {

  pattern : "asdasd",

  name : "",

  view : "",

  viewPath : "",

  targetAggregation : ""

  },

  ]

  }

[rhightower13 · Accepted solution]

That was it.  I added the routes and it worked.

Thanks!

[kedarT]

Hi Ross,

Issue is your onInit function of App View controller. Please check if you have used instantiated the router before calling the attachRouteMatched method.

Hope this helps.

[rhightower13]

Thanks for the answer.  I don't have an App view controller and never call attachRouteMatched.

This is my App view.

sap.ui.jsview("ui5.view.App", {

  createContent : function() {

  this.setDisplayBlock(true);

  return new sap.m.SplitApp("splitApp",{});

  }

});

The problem seems to be that this.getRouter() is returning undefined.

[santhu_gowdaz]

you should add pages for that split app right?

see my split app,

createContent: function (oController) {

        // to avoid scroll bars on desktop the root view must be set to block display

        this.setDisplayBlock(true);

        // create app

        this.app = new sap.m.SplitApp();

        // load the master page

        var master = sap.ui.xmlview("Master", "NAMESPACE.Master");

        master.getController().nav = this.getController();

        this.app.addPage(master, true);

        // load the empty page

        var empty = sap.ui.xmlview("Empty", "NAMESPACE.Empty");

        this.app.addPage(empty, false);

        return this.app;

    }