CODEWITHSUNDEEP
angularjsangular-ui-routerclosuressession-state-provider
j-terranova
j-terranova

Reputation: 659

Angularjs ui-router: Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:Error: State 'frameworks'' is already defined

My application is failing with the error in the title. This error is occurring when I define too many states for my ui-router. Previously when I posted this problem I was told that this is the same as the error discussed by the posting, “Angular “state already defined” error after running concat/uglify”. I changed my code as indicated by the post, wrapping it in a closure. After the change the code continued to act the same way. That is to say that with all of the defined states the code failed with stated error. When I reduced the number of states the code ran fine. I have included the code below but I am only showing one state defined to minimize code. My current code has 40 states and I will more than double the number of states by the time the application is complete. Each state has 6 views. The commented code is what I was originally using. The uncommented code is what I believe was described as the solution in the previous post. Appreciate if someone could provide suggestions for fixing this code or for better architecting the application if that is what I need to do.

(function (angular) {

angular
    .module('app',['ngResource', 'ui.router','xeditable', 'inputDropdown'])
    .config(function($logProvider, $stateProvider, $locationProvider, $urlRouterProvider ){

// var  app = angular.module('app',['ngResource', 'ui.router','xeditable', 'inputDropdown']);
// angular.module('app').config(function($logProvider, $stateProvider, $locationProvider, $urlRouterProvider ){
$logProvider.debugEnabled(true);
var routeRoleChecks = {
    admin: {auth: function(flAuth){
        return flAuth.authorizeCurrentUserForRoute('admin')
    }},
    user: {auth: function(flAuth){
        return flAuth.authorizeAuthenticatedUserForRoute()
    }}
};

$locationProvider.html5Mode({
        enabled: true,
        requireBase: false, //required to specify base of application in our HTML
        rewriteLinks: true  //Angular will rewrite URLs as necessary (add# to older browsers)
});


$stateProvider
    .state('home', {
        url: '/',
        views: {
            'content-header': {
                templateUrl: '/app/main/main-header',
                controller: 'flMainCtrl',
                caseInsensitiveMatch: true
            },
            'content-banner': {
                templateUrl: '/app/main/main-carousel',
                controller: 'flMainCtrl',
                caseInsensitiveMatch: true
            },
            'content-main': {
                templateUrl: '/app/games/game-searchList',
                controller: 'flGameSearchButtonCtrl',
                //controllerAs: 'games:id',
                caseInsensitiveMatch: true
            },
            'content-left': {
                templateUrl: '/app/games/game-menu-left',
                controller: 'flGameSearchButtonCtrl',
                //controllerAs: 'games:id',
                caseInsensitiveMatch: true
            },
            'content-right': {
                templateUrl: '/app/games/game-menu-right',
                controller: 'flGameSearchButtonCtrl',
                //controllerAs: 'games:id',
                caseInsensitiveMatch: true
            },
            'content-footer': {
                templateUrl: '/app/main/main-footer',
                controller: 'flMainCtrl',
                caseInsensitiveMatch: true
            }
        }
    })

    $urlRouterProvider.otherwise('home');
});

angular.module('app').run(function($rootScope, $location){
$rootScope.$on('$stateChangeError', function(evt, current, previous, rejection){
    if (rejection === 'not authorized'){
        $location.path('/');
    }
});
});

})(window.angular);

Upvotes: 0

Views: 2725

Answers (1)

Ankur Radadiya
Ankur Radadiya

Reputation: 235

Please try this example: this is working my example

include angularjs library: 

<script src="assets/js/angularjs-min.js"></script>
<script src="assets/js/angular-ui-router.js"></script>
<script src="app/app.js"></script>
<script src="app/routes.js"></script>

add ng-app in your html body part:

<html lang="en" ng-app="myApp" ng-cloak=""></html>

app.js

var app = angular.module("myApp", ['ui.router']);

routes.js

app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("home", {
    url: "/home",
    templateUrl: './view/home.php',
    controller: 'homeCtrl'
}).state("login", {
    url: "/login",
    templateUrl: './view/login.php',
    controller: 'loginCtrl'
}); 
$urlRouterProvider.otherwise('home'); });

Upvotes: 1

Related Questions