0

I have this app.js file

angular.module('myApp', [
  'myApp.version',
    'ui.router'
]).
config(['$locationProvider','$urlRouterProvider','$stateProvider', function($locationProvider,$stateProvider, $urlRouterProvider, $httpProvider) {

   $urlRouterProvider.otherwise('/view1');
        

  $stateProvider
      .state('view1', {
        url: '/view1',
        templateUrl: 'partials/view1.html'
        //controller: 'view1.MainController'
      })
      .state('view2', {
        url: '/view2',
        templateUrl: 'partials/view2.html'
      })

      .state('view3', {
        url: '/view3',
        templateUrl: 'partials/view3.html'
      })

      .state('view4', {
        url: '/view4',
        templateUrl: 'partials/view4.html'
      });
}]);

I have included "https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js" CDN in my index.html file and it is getting loaded fine.

But even when it is loaded the console is giving an error as

Failed to instantiate module myApp due to: TypeError: $urlRouterProvider.otherwise is not a function

I tried removing this line and then test the code, but then it gives

Failed to instantiate module myApp due to: TypeError: $stateProvider.state is not a function

I have gone through the code multiple times but I am unable to identify the mistake/error.

(angular version is 1.5.8 and angular-ui-router version is 0.3.1 ,if that helps)

Please Help!

Naman Gupta
  • 67
  • 1
  • 1
  • 15
  • Have you seen [this](http://stackoverflow.com/questions/16793724/otherwise-on-stateprovider)? – heringer Nov 03 '16 at 19:05
  • @heringer yeah i have seen this post.. i tried with $urlRouterProvider.otherwise("/") .. still the same error.. i think it has something to do with the angular-ui-router that i am including..i dont think it is getting included in the dependency in the app.js file – Naman Gupta Nov 04 '16 at 07:42

1 Answers1

2

You inverted the parameters: urlRouterProvider and stateProvider.

wrong order:

config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function($locationProvider, $urlRouterProvider,$stateProvider, $httpProvider) {

right order:

config(['$locationProvider','$urlRouterProvider','$stateProvider', function($locationProvider, $urlRouterProvider,$stateProvider, $httpProvider) {

You used that technique to avoid problems with minification, but the order of the "stringed-names" must be the same to the order of the function parameters.

I bet you know that and just mistyped.

heringer
  • 2,698
  • 1
  • 20
  • 33