The specified class for router or targets 'sap.f.routing.Router' is undefined

Question

I am trying to use https://experience.sap.com/fiori-design-web/flexible-column-layout/ and got the following the error message:

The router configuration on the manifest file:

{
  "_version":"1.9.0",
  "sap.app":{
    "id":"ch.mindustrie.ZMM_CLASSIFICATION",
    "type":"application",
    "i18n":"i18n/i18n.properties",
    "applicationVersion":{
      "version":"0.1.0"
    },
    "title":"{{appTitle}}",
    "description":"{{appDescription}}",
    "sourceTemplate":{
      "id":"servicecatalog.connectivityComponentForManifest",
      "version":"0.0.0"
    },
    "dataSources":{
      "ZMM_CLASSIFICATION_SRV":{
        "uri":"/sap/opu/odata/sap/ZMM_CLASSIFICATION_SRV/",
        "type":"OData",
        "settings":{
          "odataVersion":"2.0",
          "localUri":"localService/ZMM_CLASSIFICATION_SRV/metadata.xml"
        }
      }
    }
  },
  "sap.ui":{
    "technology":"UI5",
    "icons":{
      "icon":"",
      "favIcon":"",
      "phone":"",
      "phone@2":"",
      "tablet":"",
      "tablet@2":""
    },
    "deviceTypes":{
      "desktop":true,
      "tablet":true,
      "phone":true
    },
    "supportedThemes":[
      "sap_hcb",
      "sap_belize"
    ]
  },
  "sap.ui5":{
    "handleValidation":true,
    "rootView":{
      "viewName":"ch.mindustrie.ZMM_CLASSIFICATION.view.App",
      "type":"XML",
      "async":true,
      "id":"app"
    },
    "dependencies":{
      "minUI5Version":"1.56.0",
      "libs":{
        "sap.ui.layout":{

        },
        "sap.ui.core":{

        },
        "sap.m":{

        }
      }
    },
    "contentDensities":{
      "compact":true,
      "cozy":true
    },
    "models":{
      "i18n":{
        "type":"sap.ui.model.resource.ResourceModel",
        "settings":{
          "bundleName":"ch.mindustrie.ZMM_CLASSIFICATION.i18n.i18n"
        }
      },
      "Classification":{
        "uri":"/sap/opu/odata/sap/ZMM_CLASSIFICATION_SRV/",
        "type":"sap.ui.model.odata.v2.ODataModel",
        "settings":{
          "defaultOperationMode":"Server",
          "defaultBindingMode":"OneWay",
          "defaultCountMode":"Request"
        },
        "dataSource":"ZMM_CLASSIFICATION_SRV",
        "preload":true
      }
    },
    "resources":{
      "css":[
        {
          "uri":"css/style.css"
        }
      ]
    },
    "routing":{
      "config":{
        "routerClass":"sap.f.routing.Router",
        "viewType":"XML",
        "viewPath":"ch.mindustrie.ZMM_CLASSIFICATION.view",
        "controlId":"idClassLayout",
        "bypassed":{
          "target":[
            "master"
          ]
        },
        "async":true
      },
      "routes":[
        {
          "pattern":"",
          "name":"search",
          "target":[
            "characteristic",
            "search"
          ],
          "layout":"TwoColumnsBeginExpanded"
        },
        {
          "pattern":"search/{classnum}/{classtype}",
          "name":"characteristic",
          "target":[
            "search",
            "characteristic"
          ],
          "layout":"TwoColumnsMidExpanded"
        }
      ],
      "targets":{
        "search":{
          "viewName":"Search",
          "viewLevel":1,
          "viewId":"search",
          "controlAggregation":"beginColumnPages"
        },
        "characteristic":{
          "viewName":"Characteristic",
          "viewLevel":2,
          "viewId":"characteristic",
          "controlAggregation":"endColumnPages"
        }
      }
    }
  },
  "sap.platform.abap":{
    "uri":"/sap/bc/ui5_ui5/sap/zmm_classifi/webapp",
    "_version":"1.1.0"
  }
}

What does it not recognize sap.f.routing.Router? What am I doing wrong?

Answer 1

In order to make use of the router class "sap.f.routing.Router", the corresponding library sap.f needs to be preloaded. For example, in manifest.json:

"sap.ui5":{
  "dependencies" : {
    "libs": {
      "sap.ui.core": {},
      "sap.m": {},
      "sap.f": {},

Note that the Router class from sap.f is available as of UI5 1.46. You can press Ctrl+Shift+Left Alt / Left ⌥+P to see which UI5 core version the app is currently running with.