Same code in new project says angular is not defined - angularjs

I have two projects in express with exact same code. One project works fine but the other project says
var app = angular.module('myApp', []);
^
ERROR
ReferenceError: angular is not defined.
What might be the issue?

The error message says that angular is not defined. Most likely you html is missing the script tags for including the angular code.

Related

Ag-Grid Basic AngularJS 1.x Example Not Working

The code from official website is not working, getting blank at Plunker, only two places modified:
script.js, var module = angular.module to var m = angular.module
as Plnkr complains about "Redefinition of module".
index.html, explicitly declare height for gridOptions.
You have <script src="scripts.js"></script> when your file is named script.js
Make sure the file reference is the same as in this plnkr
As a side note, it is best to debug your applications by tackling the errors in the order that they appear, sometimes fixing the 404 not found will fix anything that angular wants to complain about...

AngularJS Error: [$injector:modulerr] came out of nowhere

I was following a tutorial for creating a MEAN stack project with Google Maps integration. I finished the project without any problems, thus, I stopped working on it. When I came back to check on it, it just doesn't work anymore. I didn't change anything with the code. I even pulled a previously working commit from my repository but the error
[$injector:modulerr] http://errors.angularjs.org/1.2.25/$injector/modulerr?p0=scotchApp&p1=Error…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.2.25%2Fangular.min.js%3A18%3A387)
is still there. I really don;t have an idea what went wrong because this was previously working fine. I hope someone could help.
EDIT. Here's a part of the 'gservice' service of my project.
// Creates the gservice factory.
// This will be the primary means by which we interact with Google Maps
angular.module('gservice', [])
.factory('gservice', function($rootScope, $http) {
The problem is here: components.html
<!-- Client Scripts -->
<script src="../app/client/routes/script.js"></script>
<script src="../app/client/service/gservice.js"></script>
<script src="../app/client/service/aservice.js"></script>
Your scotchApp module is defined in script.js as:
var scotchApp = angular.module('scotchApp', ['ngRoute',
'ngCookies',
'controllerStoreDetail', 'controllerStoreCategory',
'controllerStoreQuery', 'controllerUserDetail',
'controllerUserAuthentication', 'geolocation',
'gservice', 'aservice',
'datatables'
]);
It has a dependency on gservice, aservice etc. But those files are loaded after script.js. So while loading your module (script.js), angular is not able to find definition for those services. You need to make sure that all dependencies are loaded before script.js.
#devqon had asked this question:
Is your js file which declares the gservice module included before the
js file which declares the scotchApp module?
To which you answered:
#devqon Yes it is. I really find this case weird as it was really working perfectly for weeks until now.
Which doesn't seem to be the case.
Rectify the sequence in which you are loading JS files and the error will be gone.
I fixed the problem. The cause was a missing 'v=3' in the src of the script for loading the Google Maps API. I still don't why that's the case as the project was previously working properly.

Minified library using Web Essentials having trouble

Currently working on a angular app where I have my application specific angular modules under folder App.
Using Visual Studio extension - Web Essential 2012, created a javascript bundle file for local angular modules and related files(controllers, directives, services) into app.all.js.bundle files under App folder.
Structure looks now like :
Now, when I use app.all.js into my index.html application works fine for me, however when change to `app.all.min.js, I am getting following error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.5/$injector/modulerr?p0=app&p1=Error%3A%20%…0g%20(http%3A%2F%2Flocalhost%3A59405%2FScripts%2Fangular.min.js%3A39%3A222) angular.js:38
when using app.all.min.js I am switching angular.js to angular.min.js.
Do I need to do anything more?
make sure you are injecting the dependency service and controller properly.
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);

Django REST Framework + django-rest-auth: Error during setup of Angular helper module

I'm trying to setup the angular-django-registration-auth AngularJS module to help smooth the login/logout process for my in-progress web app, which has an AngularJS frontend consuming a Django REST Framework API and django-rest-auth for authentication/registration.
The rest-auth endpoints for login and logout work just fine, however I'm having issues injecting the Angular helper module as described on the module's github page. I've added the requisite dependency to my main app declaration:
var app = angular.module('myApp', ['ui.router', 'ngRoute', 'xeditable', 'angularDjangoRegistrationAuthApp']);
But I get several of the following errors on load:
Uncaught Error: [$injector:nomod] http://errors.angularjs.org/1.5.0/$injector/nomod?p0=angularDjangoRegistrationAuthApp
This error seems pretty clear initially- that the app hasn't been declared, however I'm not sure how to do so beyond the injection above (I'm new to a lot of this in general, and definitely the frontend part). Even if I remove the angularDjangoRegistrationAuthApp dependency from the var app = declaration above, I still get instances of the $injector:nomod error, which seem to originate from the included djangoAuth.js file that contains all of the helper functions, and comes straight from the provided module.
The module repo hasn't been active since early last year, but a recently opened issue notes some changes that have to be made for Angular 1.4+ (I'm using 1.5) so it seems that it largely still works. I made those syntax changes but still hit the error. Have I neglected to do something simple as far as declaring the auth helper app?
I know this app has it's own dependencies, so could that be what I missed? I thought the files I added would handle those, so I haven't installed anything outside of angularDjangoRegistrationAuthApp
I ended up figuring this out, I believe it's related to something with my development environment (Windows, Python 3.4, Visual Studio 2015 + Python Tools for Visual Studio).
I simply declared the angularDjangoRegistrationAuthApp at the top of my JS file, above the line where I declared my own app with the registration app as a dependency. So it looks like this:
angular.module('angularDjangoRegistrationAuthApp', []);
var app = angular.module('myApp', ['ui.router', 'ngRoute', 'xeditable', 'angularDjangoRegistrationAuthApp']);
I'm not sure why this is necessary, as the person I'm working with (not using VS + PTVS) doesn't require the extra declaration in order to successfully load the module. I've had to add similar declarations for a couple other Angular modules I'm using, while my friend has had no issue simply adding them as dependencies in the main app declaration.

Angular is not defined Error while testing with Mocha, Chai, Sinonjs

My problem lies here where I am trying to test a controller within angular. This is the error the console throws to me when running the command mocha --compilers coffee:coffee-script/register **/*.spec.coffee to run all testing files within the project.
angular.module('weaver.ui.app');
^
ReferenceError: angular is not defined
I recently added angular-mocks library which makes sure angular is not an unresolved variable, but this doesn't resolve the problem.
My beginning of my testing file looks like this (the code is written is CoffeeScript)
# angular = require 'angular'
angular.module 'weaver.ui.app'
chai = require 'chai'
sinon = require 'sinon'
If I uncomment the require angular the error changes into the following, so I assume this is not the right way.
\npm\node_modules\angular\angular.js:29016
})(window, document);
^
ReferenceError: window is not defined
And if I remove the line angular.module 'weaver.ui.app' completely I get a similar error but this one is about the controller.
angular.module('weaver.ui.app').controller('AppDesignSidebarNewcontentCtrl', function($rootScope, $scope) {});
^
ReferenceError: angular is not defined
I hope someeone here can help me with this problem which is bugging me for quite a while now.
Please do not judge me on the name of the controller ;)

Resources