Module 'ui.bootstrap' is not available - Angularjs

Question

I am facing a strange problem with my angularjs project.

I have a website like - www.server.com/pwm (home page). In the page there is an anchor tag with takes me to another page - www.server.com/publishers. When I load the home page and navigate to the publishers page by clicking the anchor tag, everything works fine. But when I directly type the url in the browser I get the below exceptions (eg. If I load the home page www.server.com/pwm and then type "/publishers" at the end of the url)

[$injector:nomod] Module 'ui.bootstrap' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.2.18/$injector/nomod?p0=ui.bootstrap"

The confusing part is that I have included the necessary libraries and it works fine when I navigate through the webpage. The problem occurs when I try to directly navigate to a child page. I am making use to ngRoute and templates to load the page

var pubsApp = angular.module('pubsApp', ['ngResource', 'ngRoute', 'ui.bootstrap'])

and my script files

<script src="/Scripts/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/Scripts/angular.js" type="text/javascript"></script>
<script src="/Scripts/angular-route.js" type="text/javascript"></script>
<script src="/Scripts/angular-sanitize.js" type="text/javascript"></script>
<script src="/Scripts/angular-resource.js" type="text/javascript"></script>
<script src="/Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/angular-ui/ui-bootstrap.min.js" type="text/javascript"></script>
<script src="Scripts/angular-ui/ui-bootstrap-tpls.min.js" type="text/javascript"></script>
<script src="/js/app.js" type="text/javascript"></script>

Solution 1

All of your script tags are using absolute paths (they start with a /) except for the angular-bootstrap tags; they use relative paths. That means they are relative to wherever you are in the browser.

Your javascript files are all located at www.website.com/Scripts/... because all of your script tags except those two use absolute paths, they will always look for the script in the same place. However, the two angulcar-bootstrap paths will look in different place depending on where you are in the browser.

The reason it works unless you go directly to the child page is because angular only loads javascript files on the initial page load and not on navigation.

So simply change your angular-bootstrap script tags to use absolute paths like the rest of your script tags.

Solution 2

I also had same problem and I resolved it. Detail is below.

Check your {{project_root}}/test/karma.conf.js

And be sure to bower_components/angular-bootstrap/ui-bootstrap-tpls.js in it. In your case, you should put Scripts/angular-ui/ui-bootstrap-tpls.min.js in it.

files: [
  'bower_components/angular/angular.js',
  'bower_components/angular-mocks/angular-mocks.js',
  'bower_components/angular-animate/angular-animate.js',
  'bower_components/angular-cookies/angular-cookies.js',
  'bower_components/angular-resource/angular-resource.js',
  'bower_components/angular-route/angular-route.js',
  'bower_components/angular-sanitize/angular-sanitize.js',
  'bower_components/angular-touch/angular-touch.js',
  'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
  'app/scripts/**/*.js',
  'test/mock/**/*.js',
  'test/spec/**/*.js'
],