Search code examples
javascriptjqueryangularjstwitter-bootstrapurl-routing

In angularJS application reloading the page causes missing dependency errors

I have an angularJS application that uses the ui.bootstrap directives. The ui.bootstrap module is included in index as follows: 

<!-- JQuery first -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

    <!-- Then bootstrap it -->
    <script src="/lib/js/tinymce/tinymce.min.js"> </script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>

    <!-- Then let AngularJS take the wheel -->
    <script src="/angular/angular.js"></script>
    <!-- add dependencies -->
    <script type="application/javascript" src="lib/angular-bootstrap/ui-bootstrap.js"></script>
    <script type="application/javascript" src="lib/angular-bootstrap/ui-bootstrap-tpls.js"></script>
    <script type="text/javascript" src="/lib/angular-ui-tinymce/src/tinymce.js"></script>
    <script src="/lib/angular-route.min.js"></script>

    <!-- App client -->
    <script src="/app.js"></script>

    <!--Controllers-->

This works as I'm clicking through the site normally, but when the browser's reload button is hit, I recieve the following error: 

Uncaught Error: [$injector:modulerr] Failed to instantiate module reviewModule due to:
Error: [$injector:modulerr] Failed to instantiate module ui.bootstrap due to:
Error: [$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.3.15/$injector/nomod?p0=ui.bootstrap

Is this just a quirk of angular? I've had issues like this before with reloading. Is there a way to prevent the default action of reload events and handle them with routeProvider manually?

Solution

  • Notice the src="lib/angular-bootstrap/ui-bootstrap.js" does not begin with a slash. This causes the script to be referenced from the current directory, not the root directory. Changing all script tags to include the initial slash like this: src="/lib/angular-bootstrap/ui-bootstrap.js" fixes the problem by referencing your script's paths from the applications root directory.