In angularJS application reloading the page causes missing dependency errors

Question

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?

Just a side note: no dependency on jQuery or Bootstrap's JavaScript is required for UI Bootstrap to work properly. The only two requierments are Bootstrap's CSS and AngularJS. — PrimosK
– PrimosK, Commented May 15, 2015 at 15:59
Ok, I'll remove bootstrap's JS file, though tinyMCEditor does require jQuery. — awimley
– awimley, Commented May 15, 2015 at 16:02

awimley · Accepted Answer · 2015-06-10 20:16:36Z

1

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.

answered Jun 10, 2015 at 20:16

awimley

7121 gold badge9 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

bjm88 Over a year ago

good call, that was error for me, worked assuming you always starting an angular app root, but once you add html5 mode navigation, push state, initial page could be any level deep, need all references to start at / base

awimley Over a year ago

glad I could help you!

bahadir · Accepted Answer · 2015-05-15 15:27:12Z

0

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

answered May 15, 2015 at 15:27

bahadir

7191 gold badge11 silver badges28 bronze badges

1 Comment

awimley Over a year ago

Seemed like a good suggestion, but this did not work. Perhaps I should stick a setTimeout in the index.html? This seems like a horrible solution but it may work.

Collectives™ on Stack Overflow

In angularJS application reloading the page causes missing dependency errors

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related