New menu items always opening root page #1242

Hello everyone,

I just started to create a new application using ABP. My last ASP.NET application is quite a while in the past, so I first started with some AngularJS tutorials to learn some of the basics. Anyway, I feel a bit like an absolute beginner, because web development seems to have changed a lot over last few years. So please have some patience if I ask some silly questions. ;)

I tried to add a new entry called 'Reports' to the menu and created a reports.cshtml and reports.js file for that page accordingly in /App/Main/views/reports.

I updated the main menu in AppNavigationProvider.cs like this:

public override void SetNavigation(INavigationProviderContext context)
        {
            context.Manager.MainMenu
                .AddItem(
                    new MenuItemDefinition(
                        "Home",
                        new LocalizableString("HomePage", AppConsts.LocalizationSourceName),
                        url: "#/",
                        icon: "fa fa-home"
                        )
                ).AddItem(
                    new MenuItemDefinition(
                        "Tenants",
                        L("Tenants"),
                        url: "#tenants",
                        icon: "fa fa-globe",
                        requiredPermissionName: PermissionNames.Pages_Tenants
                        )
                ).AddItem(
                    new MenuItemDefinition(
                        "Users",
                        L("Users"),
                        url: "#users",
                        icon: "fa fa-users",
                        requiredPermissionName: PermissionNames.Pages_Users
                        )
               ).AddItem(
                    new MenuItemDefinition(
                        "Reports",
                        new LocalizableString("Reports", AppConsts.LocalizationSourceName),
                        url: "#/reports",
                        icon: "fa fa-line-chart"
                        )
                ).AddItem(
                    new MenuItemDefinition(
                        "About",
                        new LocalizableString("About", AppConsts.LocalizationSourceName),
                        url: "#/about",
                        icon: "fa fa-info"
                        )
                );
        }

and the app.js file like this:

$stateProvider
                .state('home', {
                    url: '/',
                    templateUrl: '/App/Main/views/home/home.cshtml',
                    menu: 'Home' //Matches to name of 'Home' menu in AppNavigationProvider
                })
                .state('reports', {
                    url: '/reports',
                    templateUrl: '/App/Main/views/reports/reports.cshtml',
                    menu: 'Reports' //Matches to name of 'Reports' menu in AppNavigationProvider
                })
                .state('about', {
                    url: '/about',
                    templateUrl: '/App/Main/views/about/about.cshtml',
                    menu: 'About' //Matches to name of 'About' menu in AppNavigationProvider
                });

The new menu item is displayed on the page, but instead of opening /#/reports it opens the root page at /#/. The about menu item is still working as expected.

What am I doing wrong? Is there any other place that needs to be adapted?

Thanks for your help!