Views loaded twice

Question

All the views in my app are loaded twice.When I checked the network tab I see that the views are loaded twice and the controller loads once.I see this problem for the RootView and all other view.This causes some duplicate id errors in the console when I try to navigate to different views. I think there may be a problem in my router config.

Component.js file:

    sap.ui.define([
    "sap/ui/core/UIComponent",
    "sap/ui/Device",
    "UI5_Module/resources/webapp/model/models"
], function(UIComponent, Device, models) {
    "use strict";

    return UIComponent.extend("UI5_Module.resources.webapp.Component", {

        metadata: {
            manifest: "json"
        },

        init: function() {
            // call the base component's init function
            UIComponent.prototype.init.apply(this, arguments);
            this.getRouter().initialize();
        }
    });
});

index.html file:

<script id="sap-ui-bootstrap"
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
    data-sap-ui-libs="sap.m,sap.viz"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-xx-bindingSyntax="complex"
    data-sap-ui-preload="async"
    data-sap-ui-language="en"
    data-sap-ui-resourceroots='{"UI5_Module.resources.webapp": "../"}'>
</script>
<!--<link rel="stylesheet" href="../css/style.css">-->
<script>
    sap.ui.getCore().attachInit(function() {
        sap.ui.component({
            name:"UI5_Module.resources.webapp",
        //  async:true,
            manifest:true
        }).then(function(oComponent) {
        sap.ui.require([
            "UI5_Module/resources/webapp/localService/mockserver",
            "sap/m/Shell",
            "sap/ui/core/ComponentContainer"
        ], function (mockserver, Shell, ComponentContainer) {
            new Shell({
                app: new sap.ui.core.ComponentContainer({
                    height : "100%",
                    name : "UI5_Module.resources.webapp"
                })
            }).placeAt("content");
        });
    });
    });
</script>

Manifest.json file:

{
"_version": "1.5.0",
"sap.app": {
    "id": "UI5_Module",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
        "version": "1.0.0"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "resources": "resources.json",
    "ach": "ach",
    "sourceTemplate": {
        "id": "hanatemplates.basicSAPUI5ApplicationProject",
        "version": "0.0.0"
    }
},

"sap.ui": {
    "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": {
    "rootView": {
        "viewName": "UI5_Module.resources.webapp.view.RootView",
        "type": "XML"
    },
    "dependencies": {
        "minUI5Version": "1.30.0",
        "libs": {
            "sap.ui.core": {},
            "sap.m": {}
        }
    },
    "contentDensities": {
        "compact": true,
        "cozy": true
    },
    "models": {
        "i18n": {
            "type": "sap.ui.model.resource.ResourceModel",
            "settings": {
                "bundleName": "UI5_Module.resources.webapp.i18n.i18n"
            }
        }
    },
    "resources": {
        "css": [{
            "uri": "css/style.css"
        }]
    },
    "routing": {
        "config": {
            "routerClass": "sap.m.routing.Router",
            "viewType": "XML",
            "viewPath": "UI5_Module.resources.webapp.view",
            "controlId": "RootApp",
            "controlAggregation": "pages",
            "transition": "slide",
            "clearTarget": true,
            "async": true
        },
        "routes": [{
            "pattern": "",
            "name": "default",
            "target": "Main"
        }, {
            "pattern": "List/",
            "name": "List",
            "target": "List"
        }, {
            "pattern": "Details/",
            "name": "Details",
            "target": "Details"
    }]}

RootView file:

<mvc:View controllerName="UI5_Module.resources.webapp.controller.RootView" 
xmlns:html="http://www.w3.org/1999/xhtml" 
        xmlns:mvc="sap.ui.core.mvc"
        displayBlock="true" xmlns="sap.m">
        <App id="RootApp">

        </App>
    </mvc:View>

Answer 1

i think, it is your attachInit block in the index.html => in the first block you load the component but then you never use it in the then part.

Instead, the ComponentContainer inside the new Shell will load your component the second time.