CODEWITHSUNDEEP
javascriptjqueryangularjstwitter-bootstrapurl-routing
awimley
awimley

Reputation: 712

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?

Upvotes: 1

Views: 807

Answers (2)

awimley
awimley

Reputation: 712

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.

Upvotes: 1

bahadir
bahadir

Reputation: 719

it is probably result of some kind of race condition. Your app.js script loads faster than others so it gives you injector error. Try loading dependencies on head and your app.js in body

Upvotes: 0

Related Questions