routing throwing an error Control ID App Could not be found with Target View in SAPUI5

I need to navigate from View1 to view2 via routing. On the click of the event, it's throwing an error. Error: Control with ID app could not be found - Target: View2 I made an empty app.view file and add its ID as "app", but still throwing an error.

manifest.json

"routing": {
  "config": {
    "routerClass": "sap.m.routing.Router",
    "viewType": "XML",
    "async": true,
    "viewPath": "emergencyreport1.view",
    "controlAggregation": "pages",
    "controlId": "app"       
  },
  "routes": [
    {
      "name": "View1",
      "pattern": "",
      "target": ["View1"]
    },
      {
      "name": "View2",
      "pattern": "View2",
      "target": ["View2"]
    }
  ],
  "targets": {
    "View1": {
      "viewType": "XML",
      "transition": "slide",
      "viewId": "View1",
      "viewName": "View1",
      "viewLevel" : 1
    },
    "View2": {
      "viewType": "XML",
      "transition": "slide",
      "viewId": "View2",
      "viewName": "View2",
      "viewLevel" : 2
    }
  }

app.view.xml

   <mvc:View
    controllerName="emergencyreport1.controller.app"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m">
    <App id="app" >
     </App>
    </mvc:View>

View1.xml

<mvc:View
    controllerName="emergencyreport1.controller.View1"
    xmlns:mvc="sap.ui.core.mvc"
    displayBlock="true"
    xmlns="sap.m">
    <App>
 <core:Icon src="sap-icon://display-more" press="ondisplay"  />
 </App>
</mvc:View>

View1.controller

  ondisplay: function ()
             {
                this.getOwnerComponent().getRouter().navTo("View2");
             }