Unable to match path using ui routing in angularjs v1.6

Issue

How can I get the ui router in angular to resolve to the correct state?

I’m trying to run an angular application inside a subdirectory of my site but can’t get the app.route.js to properly route the request. I set the “otherwise” directive to “dang” so that it’s obvious to me if it misses.

I’m trying to reach the application at a URL like:
example.us/search

I’m landing at the proper directory in the url because I get routed to example.us/search/#!/dang

The file location for the content (ie app/partials/search.html) is a subfolder of the search folder, which is inside the root folder.

angular.module('example.usApp')
  .config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $urlRouterProvider.otherwise('dang');
    $stateProvider
         .state('home', {
            url: '/',
            templateUrl: 'app/partials/search.html',
            controller: 'searchController',
            resolve: {
                deps: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        insertBefore: '#ng_load_plugins_before', 
                        files: [
                            'app/services/searchService.js',
                            'app/controllers/searchController.js',
                            'css/home.css'
                        ]
                    });
                }]
            }
        })...

EDIT:
The files[] array above does not get loaded obviously because the url doesn’t match. I’m having hard time loading any change because the browser thinks I’m trying to angular route and is not reloading the page at the URL I specify. When I type a change in the url bar and hit enter the URL is rewritten without making a request to the server.

EDIT2:
In answer to a question, yes oclazyload.js is loaded. From the developer tools you can see that all of the following are loaded in this order:

search/
bootstrap.min.css
style.css
angular.min.js
angular-ui-router.min.js
angular-local-storage.min.js
ocLazyLoad.min.js
angular-cookies.min.js
jquery.easing.1.3.js
angular-payments.min.js
app.js
app.constants.js
LoginService.js
app.route.js
bootstrap.min.js
app.constants.js
LoginService.js
app.route.js
bootstrap.min.js

Solution

This state is abstract so you will never hit it. I am assuming your main single page is Index.html right? If so change to this:

angular.module('example.usApp')
  .config(function($stateProvider, $urlRouterProvider,$locationProvider) {
    $urlRouterProvider.otherwise('dang');
    $stateProvider
         .state('home', {
            url: '/search',
            templateUrl: 'app/partials/search.html',
            controller: 'searchController',
            resolve: {
                deps: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        insertBefore: '#ng_load_plugins_before', 
                        files: [
                            'app/services/HomeService.js',
                            'app/controllers/HomeMainController.js',
                            'css/home.css'
                        ]
                    });
                }]
            }
        })...

The url should be example.us/#/search.

Answered By – Valter

Answer Checked By – David Goodson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.