ReferenceError: Angular is not defined

Question

I've been sitting with this problem for a few hours and found a few answers, none of which have worked for me so far (AngularJs ReferenceError: angular is not defined). For some reason I can't seem to get my app to use Angular.JS. After adding the required js-files, my main file looks like this:

    <!DOCTYPE html>
    <html ng-app="AppName">
  <head>
    <title></title>

    <link rel="stylesheet" href="/stylesheets/main.css">

  </head>
  <body>
    <!-- Wrapper-->
    <div id="wrapper">

      <div id="page-content-wrapper">

        <div class="page-content inset" ng-view>
        </div>

      </div>
    </div>
    <!-- /WRAPPER-->

    <!-- ANGULAR CUSTOM -->
    <script src="libs/angular/angular.js"></script>
    <script src="libs/angular-route/angular-route.min.js"></script>
    <script src="javascripts/AngularApp.js"></script>
    <script src="javascripts/appRoutes.js"></script>
    <script src="javascripts/controllers/MainCtrl.js"></script>
    <script src="javascripts/controllers/SettingsCtrl.js"></script>
    <script src="javascripts/services/SettingsService.js"></script>

  </body>
</html>

When I run the app it never seems to finish loading (see the image: https://i.stack.imgur.com/ah0kN.jpg) and then crashes. In Firefox, I get the following error: https://i.stack.imgur.com/bnBwD.jpg

Does anyone know how I can solve this problem?

--EDIT-- I've updated the position of the scripts in the app.

My AngularApp.js file looks like this:

angular.module('AppName', ['ngRoute', 'appRoutes', 'MainCtrl', 'SettingsCtrl', 'SettingsService']);

Are there any errors thrown when moving the angular script to the top? (You should definetly do so, it doesn't make no sense at all to try to load the controller first. Consider usage of a build tool and concatenate your scripts) — Wottensprels, Jun 24 '14 at 13:45
After moving the libs files to the top I still face the same problem with the page not loading (continuously being processed). After a while firefox throws this back at me: imgur.com/bjTQJvn — user3753098, Jun 24 '14 at 13:55

Josh C. · Accepted Answer · 2016-02-02T15:07:07.363

8

If your module AppName is defined in AngularApp.js, that needs to come before MainCtrl js.

Are your .js files separate angular modules? If so, they should not be listed as modules in your angular.module dependencies.

angular.module('AppName', ['ngRoute']);

edited Feb 02 '16 at 15:07

answered Jun 24 '14 at 14:26

Josh C.

4,303
5
30
51

The order of my scripts are now: 1. angular.js 2.angular-route.min.js 3. AngularApp.js 4.appRoutes.js 5.MainCtrl.js 6.SettingsCtrl.js 7.SettingsService.js I still get the same error when I run my app: http://imgur.com/UT3g7wY – user3753098 Jun 24 '14 at 15:11
Thank you, fixing AngularApp.js to angular.module('AppName', ['ngRoute', 'appRoutes',]); solved my issue – user3753098 Jun 24 '14 at 15:22

score 3 · Answer 2 · answered Jun 24 '14 at 13:49

3

Definitely include any of the libs/ files before your own custom code.
So put <script src="libs/angular/angular.js"></script> and <script src="libs/angular-route/angular-route.min.js"></script> before your other javascripts files and you should find the problem fixed.

answered Jun 24 '14 at 13:49

Chris Southam

582
2
5
12

After moving the libs files to the top I still face the same problem with the page not loading (continuously being processed). After a while firefox throws this back at me: http://imgur.com/bjTQJvn – user3753098 Jun 24 '14 at 13:55

score 0 · Answer 3 · answered Aug 15 '19 at 14:26

I was having the same problem. Declaring the angular script tag in html's <head> tag worked for me. Therefore:

<!doctype html>
<html lang="en" ng-app>
    <head>
        <meta charset="utf-8">
        <title>AngularJS tryout</title>
        <script src="../../node_modules/angular/angular.js"></script>
    </head>
    <body>
        <h1>AngularJS tryout</h1>
        <p>Nothing here so {{ 'far' + '!' }}</p>
    </body>
</html>

ReferenceError: Angular is not defined

3 Answers3