SAPUI5/OpenUI5 view not rendered after router navTo

Question

I'm creating SAPUI5 sample app with simple routing (SAPUI5/OpenUI5 v.1.22).

My main problem, which I'm trying to understand, why URL pattern changes and the onInit of target view controller is fired, but after nothing happens (onAfterRendering not fired), and I'm able to go to another page only after page reload.

Routing setup. Compontent.js, where router is initialized, is structured in following way:

sap.ui.define([
    "sap/ui/core/UIComponent"
], function (UIComponent) {

    return UIComponent.extend("sge.apps.app.Component", {

        metadata:{
            name : "Sample App",
            version : "1.0",
            includes : [],
            dependencies : {
                libs : ["sap.m", "sap.ui.layout"],
                components : []
            },

            rootView: "sge.apps.app.view.App",

            config: {
                resourceBundle: "i18n/i18n.properties"
            },

            routing : {
                config : {
                    routerClass : sap.ui.core.routing.Router,
                    viewType : "XML",
                    viewPath : "sge.apps.app.view",
                    targetControl: "app",
                    targetAggregation: "pages",
                    transition: "slide",
                    clearTarget : false,
                    bypassed: {
                        target: "notFound"
                    }
                },
                routes: [{
                    pattern: "",
                    name: "appHome",
                    view: "Home"
                },{
                    pattern : ":all*:",
                    name : "catchallDetail",
                    view : "NotFound",
                    transition : "show"
                },{
                    pattern: "notFound",
                    name: "appNotFound",
                    view: "NotFound",
                    transition : "show"
                }]
            }
        },

        init : function() {
            UIComponent.prototype.init.apply(this, arguments);

            var mConfig = this.getMetadata().getConfig();

            // always use absolute paths relative to our own component
            // (relative paths will fail if running in the Fiori Launchpad)
            var rootPath = jQuery.sap.getModulePath("sge.apps.app");

            // set i18n model
            var i18nModel = new sap.ui.model.resource.ResourceModel({
                bundleUrl : [rootPath, mConfig.resourceBundle].join("/")
            });
            this.setModel(i18nModel, "i18n");

            // set device model
            var deviceModel = new sap.ui.model.json.JSONModel({
                isTouch : sap.ui.Device.support.touch,
                isNoTouch : !sap.ui.Device.support.touch,
                isPhone : sap.ui.Device.system.phone,
                isNoPhone : !sap.ui.Device.system.phone,
                listMode : sap.ui.Device.system.phone ? "None" : "SingleSelectMaster",
                listItemType : sap.ui.Device.system.phone ? "Active" : "Inactive"
            });
            deviceModel.setDefaultBindingMode("OneWay");
            this.setModel(deviceModel, "device");

            this.getRouter().initialize();
        }
    });
});

I have Home.controller.js of the Home.view.xml from where I try to navigate to another view, by pressing the button with event onDisplayNotFound:

sap.ui.define([
    "sge/apps/app/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("sge.apps.app.controller.Home", {
        onDisplayNotFound : function (oEvent) {
            this.getRouter().navTo("appNotFound");
        }
    });
});

BaseController.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/routing/History"
], function (Controller, History) {
    "use strict";

    return Controller.extend("sge.apps.app.controller.BaseController", {        
        getRouter: function () {
            return sap.ui.core.UIComponent.getRouterFor(this);
        },
        onNavBack: function (oEvent) {
            var oHistory, sPreviousHash;

            oHistory = History.getInstance();
            sPreviousHash = oHistory.getPreviousHash();

            if(sPreviousHash !== undefined) {
                window.history.go(-1);
            } else {
                this.getRouter().navTo("appHome", {}, true /*no history*/);
            }
        }
    });
});

NotFound.controller.js of target view NotFound.view.xml:

sap.ui.define([
    "sge/apps/app/controller/BaseController"
], function (BaseController) {
    "use strict";

    return BaseController.extend("sge.apps.app.controller.NotFound", {
        onInit: function () {
            console.log("onInit NotFound.view.xml");
        },
        onAfterRendering: function () {
            console.log("onAfterRendering NotFound.view.xml");
        }
    });
});

Answer 1

I had the same problem and I solved by adding this line in the configuration of the routing :

    "routerClass" : "sap.m.routing.Router",

And it has worked perfectly navigation.

"routing": {
        "config": {
            "routerClass" : "sap.m.routing.Router", 
            "viewPath": "es.seidor.view",
            "controlId": "App",
            "async" : "true",
            "clearTarget" : "true"
        }

Answer 2

The solution is simple, just use some part of TDG best practice:

Create the file MyRouter.js

sap.ui.define([
    "sap/ui/core/routing/Router",
    "sap/m/routing/RouteMatchedHandler"
], function (Router, RouteMatchedHandler) {
    "use strict";

    return Router.extend("sge.apps.notespese.MyRouter", {
        constructor : function() {
            sap.ui.core.routing.Router.apply(this, arguments);
            this._oRouteMatchedHandler = new sap.m.routing.RouteMatchedHandler(this);
        },
        destroy : function() {
            sap.ui.core.routing.Router.prototype.destroy.apply(this, arguments);
            this._oRouteMatchedHandler.destroy();
        }
    });
});

Inject it in your Component.js, as follows:

sap.ui.define([
    "sap/ui/core/UIComponent",
    "sge/apps/notespese/MyRouter"
], function (UIComponent, MyRouter) {
    "use strict";

    return UIComponent.extend("sge.apps.notespese.Component", {
    ...

In Component metadata section replace

routing : {
                config : {
                    routerClass : sap.ui.core.routing.Router,

with

routing : {
                config : {
                    routerClass : sge.apps.notespese.MyRouter,

Hope to do not forget other this question related things.

Answer 3

sap.ui.define is a feature of UI5 v1.30

Either update the version you're using to 1.30.x or remove the sap.ui.define code and replace it with code that works with the earlier versions.

Pre-sap.ui.define code looks something like this:

jQuery.sap.require("sap.m.Button");
//use jQuery.sap.require to require any controls or other files
sap.ui.controller("my.controller", {

    onInit: function(){
        //your code here
        //doing something with sap.m.Button, won't work without the require
        //var oBtn = new sap.m.Button("myBtn", {text: "Click me"});
    },

    onAfterRendering: function(){
        //more code
    }
});

Try that.