Angular.js only loading half the times

Question

I am having an issue with an angular application. I am using bower. When I startup the server, I sometimes get this error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to: Error: [$injector:modulerr] Failed to instantiate module ui.router due to: Error: [$injector:nomod] Module 'ui.router' is not available! You either misspelled the modul......2)

Then I sometimes get this error:

Uncaught SyntaxError: Unexpected identifier angular.js:573

Uncaught TypeError: Cannot read property 'module' of undefined angular-route.js:24

Uncaught SyntaxError: Unexpected token ILLEGAL angular-ui-router.js:455

Uncaught ReferenceError: angular is not defined ui-bootstrap-tpls-0.11.0.js:8

Uncaught ReferenceError: angular is not defined app.js:4

Uncaught ReferenceError: angular is not defined

Sometimes the css doesn't load completely either, but don't get a console error. Other times it works perfectly fine.

Here is my code setup

<body ng-app="myApp" class="ng-scope">
<div>
  <div ui-view>
  </div>
</div>

  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script> 
  <script src="js/app.js"></script>
  <script src="js/services.js"></script>
  <script src="js/controllers.js"></script>
  <script src="js/filters.js"></script>
  <script src="js/directives.js"></script>
  <script src="js/create.js"></script>
  <script src="js/view.js"></script>
  <script src="js/header.js"></script>
  <script src="js/form-service.js"></script>
  <script src="js/form-directive.js"></script>
  <script src="js/field-directive.js"></script>
  <script src="js/jquery.dcjqaccordion.2.7.js"></script>

</body>

here is my app.js where the app lives

var myApp = angular.module('myApp', [

  'ui.bootstrap.tabs',
  'ui.bootstrap.accordion',
  'ui.bootstrap.collapse',
  /*
  '$strap.directives',
  */
  'ui.router',
  'myApp.filters',
  'myApp.services',
  'myApp.directives',
  'myApp.controllers'


]);

Not too sure what to do. I thought loading angular then loading the other scripts after a time delay would fix it, but that wouldn't work.

And if you include your javascript src in the head instead of body ?? — Hackerman
Looks at your network tab of dev tools, see if the files are returning correctly. Also, its recommended to include jquery before angularjs. — TheSharpieOne

Jordan.J.D Jordan.J.D · Accepted Answer · 2014-08-05T19:23:38

Your problem is not using absolute URLs to .js files. Include a / in front of each path and it should fix your problem. For instance change:

    <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/angular-ui-router/release/angular-ui-router.js">

To

<script src="/bower_components/angular/angular.js"></script>
  <script src="/bower_components/angular-route/angular-route.js"></script>
  <script src="/bower_components/angular-ui-router/release/angular-ui-router.js">

Do this for all files.

Angular.js only loading half the times

1 Answers