Nested route doesn't resolve when using local storage

[mrnatelantz]

UI Router 1.0.0-beta.1 Angular 1.5.8 Built with NG6 Starter Kit https://angularclass.github.io/NG6-starter/

using local storage for pretty uri's $locationProvider.html5Mode(true).hashPrefix('!');

I changed the url/uri names in my examples to be more relevant to whomever reads this

Error Message in Browser: Cannot GET /stores/management/status/1 URL : http://localhost:3000/stores/management/status/1

Routes / (home/default) /stores (placeholder, does not resolve to anything) /stores/management (parent component, shows a list of stores, has a named view in template) /stores/management/status/1 (child component of stores, uses parent named view)

While using local storage for uri's the end user can view a list of stores found in uri /stores/management . From there the end user can click on a store and view the status of the store which results in the uri being /stores/management/1 . If the end user refreshes the page, or sends the url to another end user to view they will see a white screen and an error message.

If the end user follows the same steps stated above, but while the application is not using locat storage for uri's ( #! ), everything works as expected without any errors.

Parent Component Route

            .state('stores/management', {
                url: '/stores/management',
                component: 'storesManagement'
            });

Child Component Route

           .state('stores/management/status', {
                url: '/status/{id}',
                parent: 'stores/management',
                views: {
                    'content': {
                        component: 'status'
                    }
                }
            });

[christopherthielen]

What you've described is in the FAQ, here: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

Basically, when a browser fetches a URL, the server returns a HTML page which has <script> tags that load angular.js, angular-ui-router.js, etc. When you use HTML5Mode, the browser asks the server for some URL such as /stores/management. The SERVER has to be configured to serve up the same HTML page that it serves for the / URL. UI-Router isn't even loaded into the browser at this point.

FYI, Local Storage means something else (and doesn't concern URLs). We call this "HTML5 mode" or "pushState".