Could not resolve '[subMenuItem.route]' from state 'datapoint'

Question

I have added a submenu.

NavigationProvider

vm.menuItems = [
            createMenuItem(App.localize("HomePage"), "", "home", "home"),

            createMenuItem(App.localize("Tenants"), "Pages.Tenants", "business", "tenants"),
            createMenuItem(App.localize("Users"), "Pages.Users", "people", "users"),
            createMenuItem(App.localize("Roles"), "Pages.Roles", "local_offer", "roles"),
            createMenuItem("Some Title", "", "menu", "", [
                    createMenuItem(App.localize("DataPoint"), "Pages.Users", "compare_arrows", "datapoint")
                ])
        ];

app.js

$stateProvider
                .state('datapoint', {
                    url: 'datapoint',
                    templateUrl: '/App/Main/views/datapoint/index.cshtml',
                    menu: 'DataPoint'
                });
            $urlRouterProvider.otherwise('/datapoint');

in sidebar-nav.js

vm.menuItems = [
            createMenuItem(App.localize("HomePage"), "", "home", "home"),
            createMenuItem(App.localize("Values"), "Pages.Users", "assessment", "values"),

            createMenuItem(App.localize("Tenants"), "Pages.Tenants", "business", "tenants"),
            createMenuItem(App.localize("Users"), "Pages.Users", "people", "users"),
            createMenuItem(App.localize("Roles"), "Pages.Roles", "local_offer", "roles"),
            //createMenuItem(App.localize("About"), "", "info", "about"),

            createMenuItem("ASP.NET Boilerplate", "", "menu", "", [
                    createMenuItem(App.localize("DataPoint"), "Pages.Users", "compare_arrows", "datapoint")
                ])
        ];

The menu item shows nicely but I keep getting the error Could not resolve '[subMenuItem.route]' from state 'datapoint' in console and the page does not link. Any idea what might be wrong please?

Answer 1

If anyone is facing the same issue, this is a bug in boilerplate. In sidebar-nav.cshtml,

<a ui-sref="[subMenuItem.route]" class="toggled" ng-if="!subMenuItem.items && subMenuItem.route.indexOf('http') != 0">
                    <i ng-if="subMenuItem.icon" class="material-icons">{{subMenuItem.icon}}</i>
                    <span>{{subMenuItem.name}}</span>
                </a>

If you notice [subMenuItem.route] is not formatted correctly. It should be {{subMenuItem.route}} instead. This has to be changed for both subMenu and subSubMenu.