Cannot inject ui.bootstrap into my module

Question

I'm trying to inject ui.bootstrap into my module, called 'app'. I already included the ui-bootstrap javascript file into my html, but I get below error no matter what I do:

Uncaught Error: [$injector:modulerr]

If I remove any dependencies to ui.bootstrap, the error goes away.

Order of js imports in head tag, all of which load up fine. (checked in Chrome dev tools)

<script src="/Scripts/angular.min.js"></script>
<script src="/Scripts/angular-route.js"></script>
<script src="/Scripts/angular-ui-router.min.js"></script>
<script src="/Scripts/angular-animate.js"></script>
<script src="/Scripts/ui-bootstrap-tpls-1.2.5.min.js"></script>

Current AngularJS version is 1.5.2

app.js

(function () {
    'use strict';

    var app = angular.module('app', [
        // Angular modules
        'ngRoute',
        'ngAnimate',
        'ui.bootstrap',
        // Custom modules
        // 3rd Party Modules
        'ui.router'
    ]);

    app.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', '$modal', function ($locationProvider, $stateProvider, $urlRouterProvider, $modal) {
        $locationProvider.html5Mode(true);

        $urlRouterProvider.otherwise('/');
        $stateProvider
            .state('home', {
                url: '/',
                controller: 'frontpageController',
                templateUrl: 'app/views/frontpage.html',
                data: {
                    authorize: false 
                }
            })
            .state('login', {
                url: '/login',
                controller: 'loginController',
                templateUrl: 'app/views/login.html',
                data: {
                    authorize: false
                }
            })
            .state('profile', {
                url: '/profile/:userId',
                controller: 'profileController',
                templateUrl: 'app/views/profile.html',
                data: {
                    authorize: true
                }
            })
            .state('error', {
                url: '/error',
                controller: 'errorController',
                templateUrl: 'app/views/404.html',
                data: {
                    authorize: false
                }
            })
    }]);

    app.run(function ($rootScope, loginService) {
        $rootScope.$on('$stateChangeStart', function (event, toState, toParams) {
            var authorize = toState.data.authorize;

            if (authorize && typeof $rootScope.currentUser === 'undefined') {
                event.preventDefault();
                // get me a login modal!
                loginService()
            }
        });

    });

})();

Don't think it's related but you are using both ngRoute and ui.router, I'm guessing you can remove ngRoute since you're using states — Tomer, Mar 29 '16 at 14:00
You are completely right, and i have also tried to remove it, but i makes no difference. I'm keeping both ATM, because im playing around with both states and routes. — Teilmann, Mar 29 '16 at 14:01

score 2 · Accepted Answer · answered Mar 29 '16 at 14:17

2

You cannot inject services in module config, it only allow providers. $modal is renamed as $uibModal in last ui-bootstrap too (to rename in your controllers).

So remove '$modal' from your .config inject it only when you use it.

answered Mar 29 '16 at 14:17

Rogerio Soares

1,613
16
14

score 0 · Answer 2 · answered Mar 29 '16 at 13:49

0

Are you sure ui bootstrap has only one JS file ? Check all folders of ui bootstrap and add if you are missing any other JS files.

answered Mar 29 '16 at 13:49

Venkat

551
6
17

Im pretty sure, but not 100% sure. I have tried importing the ui-bootstrap.js + ui-bootstrap.tpls.js at the same time, in different orderes, but still the same error occurs – Teilmann Mar 29 '16 at 13:56
Also, it looks like the different versions are just the same ui-bootstrap, but with and without templates, and normal and minified. – Teilmann Mar 29 '16 at 13:58

score 0 · Answer 3 · answered Mar 29 '16 at 13:50

0

You have to add tpls and library for ui bootstrap. For example:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap-tpls.js"></script>

and

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.2.5/ui-bootstrap.js"></script>

answered Mar 29 '16 at 13:50

Niezborala

1,857
1
18
27

I cannot find the place on their website, where it tells me to import both. I just tried it, with the same result :/ – Teilmann Mar 29 '16 at 13:53

score 0 · Answer 4 · answered Mar 29 '16 at 14:02

0

It may be the version of your angular. it says on the site requires AngularJS 1.4.x or higher.

answered Mar 29 '16 at 14:02

karmakula

56
4

I also checked that, but forget to mention it in the post. My angular version is 1.5.2 – Teilmann Mar 29 '16 at 14:03

Cannot inject ui.bootstrap into my module

4 Answers4