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.sstatic.net/ah0kN.jpg) and then crashes. In Firefox, I get the following error: https://i.sstatic.net/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
– Wottensprels, Commented Jun 24, 2014 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
– user3753098, Commented Jun 24, 2014 at 13:55

Josh C. · Accepted Answer · 2016-02-02 15:07:07Z

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 2, 2016 at 15:07

answered Jun 24, 2014 at 14:26

Josh C.

4,3935 gold badges33 silver badges52 bronze badges

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

2 Comments

user3753098 Over a year ago

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: imgur.com/UT3g7wY

user3753098 Over a year ago

Thank you, fixing AngularApp.js to angular.module('AppName', ['ngRoute', 'appRoutes',]); solved my issue

Chris Southam · Accepted Answer · 2014-06-24 13:49:16Z

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, 2014 at 13:49

Chris Southam

5822 gold badges5 silver badges12 bronze badges

1 Comment

user3753098 Over a year ago

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

malvadao · Accepted Answer · 2019-08-15 14:26:39Z

0

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>

answered Aug 15, 2019 at 14:26

malvadao

3,4821 gold badge22 silver badges26 bronze badges

Collectives™ on Stack Overflow

ReferenceError: Angular is not defined

3 Answers 3

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Linked

Related