Q:

Openui5 - Router appending content in Aggregation

I'm creating an app that have Fiori Launchpad style (using Shell component) but only with openui5 components.
Here is a preview of launchpad.
My problem is when I try to navigate using router, the content is appended to the main Shell content aggregation and not cleaning-up the launchpad icons.
Here a preview for this behavior
My index:

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
    <title>Intranet 4success</title>
    <link rel="shortcut icon" href="https://www.4success.com.br/wp-content/uploads/2014/06/favicon.ico" type="image/x-icon" />

    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script
            src="http://openui5.localhost/resources/sap-ui-core.js"
            id="sap-ui-bootstrap"
            data-sap-ui-libs="sap.m"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-compatVersion="edge"
            data-sap-ui-preload="async"
            data-sap-ui-resourceroots='{"4success.sfsf-analytics": ""}'>
    </script>

    <script>
        sap.ui.getCore().attachInit(function () {
            new sap.m.App({
                pages: [
                    new sap.m.Page({
                        showHeader: false,
                        enableScrolling: true,
                        content: [new sap.ui.core.ComponentContainer({
                            name: "4success.sfsf-analytics"
                        })]
                    })
                ]
            }).placeAt("content", "first");
        });
    </script>

</head>
<body class="sapUiBody sapUShellFullHeight" role="application">
<div id="content"></div>
</body>
</html>

My manifest.json:

{
  "_version": "1.1.0",
  "sap.app": {
    "_version": "1.1.0",
    "id": "4success.sfsf-analytics",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "sourceTemplate": {
      "id": "ui5template.basicSAPUI5ApplicationProject",
      "version": "1.32.0"
    }
  },
  "sap.ui": {
    "_version": "1.3.0",
    "technology": "UI5",
    "icons": {
      "icon": "",
      "favIcon": "",
      "phone": "",
      "phone@2": "",
      "tablet": "",
      "tablet@2": ""
    },
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    },
    "supportedThemes": [
      "sap_hcb",
      "sap_bluecrystal"
    ]
  },
  "sap.ui5": {
    "_version": "1.2.0",
    "rootView": {
      "viewName": "4success.sfsf-analytics.view.App",
      "type": "XML"
    },
    "dependencies": {
      "minUI5Version": "1.34.0",
      "libs": {
        "sap.ui.core": {
          "minVersion": "1.34.0"
        },
        "sap.m": {
          "minVersion": "1.34.0"
        },
        "sap.ui.layout": {
          "minVersion": "1.34.0"
        }
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "4success.sfsf-analytics.i18n.i18n"
        }
      }
    },
    "resources": {
      "css": [
        {
          "uri": "css/style.css"
        }
      ]
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "viewPath": "4success.sfsf-analytics.view",
        "controlId": "myShell",
        "controlAggregation": "content",
        "clearTarget": true,
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        }
      },
      "routes": [
        {
          "pattern": "",
          "name": "appHome",
          "target": "launchpad"
        },
        {
          "pattern": "instances",
          "name": "instances",
          "target": "instances"
        }
      ],
      "targets": {
        "launchpad": {
          "viewName": "Launchpad",
          "viewLevel": 1
        },
        "instances": {
          "viewName": "Instances",
          "viewLevel": 2
        }
      }
    }
  }
}

My App.view.xml:

<mvc:View
        controllerName="4success.sfsf-analytics.controller.App"
        xmlns:u="sap.ui.unified"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m"
        class="viewPadding">
    <u:Shell
            id="myShell"
            icon="{/logo}">
        <u:headItems>
            <u:ShellHeadItem
                    tooltip="{i18n>menuConfiguration}"
                    icon="sap-icon://menu2"
                    press="handlePressConfiguration"/>
            <u:ShellHeadItem
                    tooltip="{i18n>menuHome}"
                    icon="sap-icon://home"
                    visible="true"
                    press="onHomePress"/>
        </u:headItems>
        <u:headEndItems>
            <u:ShellHeadItem
                    icon="sap-icon://log"
                    tooltip="{i18n>menuLogoff}"
                    press="onLogout"/>
        </u:headEndItems>
        <u:user>
            <u:ShellHeadUserItem
                    image="sap-icon://account"
                    id="btnUserName"/>
        </u:user>
        <u:search>
            <SearchField
                    search="handleSearchPressed"/>
        </u:search>
        <u:paneContent>
            <Text text="Lorem ipsum"/>
        </u:paneContent>
        <u:content />
    </u:Shell>
</mvc:View>

My Launchpad.view.xml:

<mvc:View
        controllerName="4success.sfsf-analytics.controller.Launchpad"
        height="100%"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m">
    <Page showHeader="false"
          enableScrolling="false"
          id="idPageHome">
        <content>
            <TileContainer height="100%"
                           width="100%"
                           allowAdd="true"
                           id="idTileContainer"
                           tileDelete="handleTileDelete">
                <tiles>
                    <StandardTile title="{i18n>launchpadInstances}"
                                  icon="sap-icon://cloud"
                                  id="idInstances"
                                  press="handleTileNavigation"/>
                </tiles>
            </TileContainer>
        </content>

        <footer>
            <Toolbar>
                <ToolbarSpacer/>
                <Button text="{i18n>menuOrganizeIcons}" press="handleEditPress"/>
                <ToolbarSpacer/>
            </Toolbar>
        </footer>
    </Page>
</mvc:View>

And finally my Instances.view.xml:

<mvc:View
        controllerName="4success.sfsf-analytics.controller.Instances"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns="sap.m"
        height="100%">
    <Page showNavButton="true"
          title="Instâncias SuccessFactors"
          navButtonPress="onNavBack">
        <content>
            <Table id="idProductsTable"
                   inset="false"
                   class="sapUiSmallMarginBottom sapUiResponsiveContentPadding"
                   items="{
   path: '/InstancesCollection',
   sorter: {
    path: 'description'
   }
  }">
                <headerToolbar>
                    <Toolbar>
                        <Title text="Instâncias" level="H2"/>
                    </Toolbar>
                </headerToolbar>
                <columns>
                    <Column width="12em">
                        <Text text="Cliente"/>
                    </Column>
                    <Column minScreenWidth="Tablet"
                            demandPopin="true">
                        <Text text="ID da Empresa"/>
                    </Column>
                    <Column minScreenWidth="Tablet"
                            demandPopin="true"
                            hAlign="Right">
                        <Text text="Usuário"/>
                    </Column>
                    <Column minScreenWidth="Tablet"
                            demandPopin="true"
                            hAlign="Center">
                        <Text text="Servidor"/>
                    </Column>
                    <Column hAlign="Right">
                        <Text text="Status"/>
                    </Column>
                </columns>
                <items>
                    <ColumnListItem>
                        <cells>
                            <ObjectIdentifier title="{description}"/>
                            <Text text="{company_id}"/>
                            <Text text="{username}"/>
                            <Text text="{server_url}"/>
                            <Text text="{status}"/>
                        </cells>
                    </ColumnListItem>
                </items>
            </Table>
        </content>
    </Page>
</mvc:View>

For navigation I'm using this command:

this.getRouter().navTo("instances");

Any ideas for this behavior?

A:

Did you define a root view? Where is it? Which one is it? 
If 'My App.view.xml' is NOT the root view the id of your shell will end up as sth. like '__xmlview1-myShell' and your router will not be able to find it (since you passed 'myShell').
Place the control you want to apply routing on in your root view or ensure a stable id by setting ids on all it's parent XMLViews.
Btw. I have never seen an application structured like this and it does not at all make any sense to me... The structure would usually be more like Component > Shell > App > Page.

