I apologize if this issue has been resolved somewhere, but every other question I looked at with a similar name was unable to resolve my problem. I have a plunker with a barebones layout of a web app I am working on, but for some reason am receiving an Uncaught Error: [$injector:modulerr] when I try to run it.
I have attached the Plunk below, hopefully someone can point out what the issue is, because I cannot find it. I am using ui-router and ui-bootstrap with twitter-bootstrap styling.
Plunk: http://plnkr.co/edit/EbGJAqxdjHRCMjjC6waA?p=info
(Never shared a plunk before, so hopefully I did it correctly.)
You didnt include your app file in the script srcs
forked plnkr
<script src="app.js"></script>
You are never including your app.js file, so your Angular module is never actually defined.
I tried adding this line to your plunk and it worked fine.
<script src="app.js"></script>
Related
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...
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.
I am trying to implement a 'remember me' option on my login page and have ventured down the path of using ngCookies to store a local cookie to handle this. However, in trying to follow the instructions from angular documentation I am unable to get the module working in my Web Application.
I am using AngularJS version 1.4.8 and have made sure my angular-cookies.min.js is running the exact same version. I have made sure to add my <link> tags in the correct order:
<script src="../vendor/jquery/dist/jquery.min.js"></script>
<script src="../vendor/angularjs/angular.min.js"></script>
<script src="../vendor/angularjs/angular-cookies.min.js"></script>
However, when I try to load the module into my application:
var EdgeApp = angular.module('EdgeApp', [
'ngCookies',
'ngAnimate',
....
])
I get an $injector:modulerr error:
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=EdgeApp&p1=Error%3A…2Fdrake-monitor%2FRestApi%2Fvendor%2Fangularjs%2Fangular.min.js%3A19%3A463)
All other modules and dependencies load correctly and work fine.
Based on the advice from #WonderGrub, I stripped my project back to the bear basics and worked from the ground up.
To start with, I installed all of my external modules correctly using Bower (something I wasn't doing before), then I added one module at a time to see if I had any conflicts.
I also reverted back to using .js files instead of .min.js files for my development to help me identify errors more accurately.
I'm unsure what the actual cause of my issue was, but going through the procedures above and the advice from my initial post has worked for me without errors.
I try to define angular services of an angular module in serperate files.
While Chrome only mentions an Uncaught Object, Firefox throws this message:
Error: [$injector:modulerr] http://errors.angularjs.org/1.2.9/$injector/modulerr?p0=LaRa&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.2.9%2F%24injector%2Fnomod%3Fp0%3DLaRa%0AF%2F%3C%40http%3A%2F
This tells me nothing. See my jsfiddle failing here.
I looked up the "recommended Setup" article in the angularjs documentation for modules. When i copy their example to my jsfiddle i get the same error. see jsfiddle here.
Their plunkr example works thou.
Now jsfiddle includes the javascript inline, plunkr uses a file and there are certain other differences. Sure. But is that really it?
I never read anything about angularjs only working if you put your javascript in an external file.
If i copy from their tutorial, it should work instead of giving a weird error shouldn't it?
What am i doing wrong here?
EDIT:
If i change from onLoad to wrap-in-head it works. Yet i do not know why.
Works as expected when you actually attach the angularjs 1.2.1 in head
<div ng-controller="myController">
{{ greeting1.value }}!
{{ greeting2.value }}!
</div>
http://jsfiddle.net/Sa95B/4/
I am trying to get going with angular-strap directives, but encountering a module initialization error with the simplest setup. I have double checked a zillion times but can't see exactly what I might be missing.
Here is a plunker link: http://plnkr.co/edit/H1VrF63GeSQWLXHDVIW7
The error I get is:
Error: [$injector:modulerr] Failed to instantiate module mgcrea.ngStrap due to:
Error: [$injector:nomod] Module 'mgcrea.ngStrap' is not available! You either misspe... <omitted>...1)
I read this response, but it didn't answer my question as I am not using ngSanitize or routes. This is as simple as it gets.
Thanks
Your plunk needs angular-animate, which angular-strap depends on.
http://plnkr.co/hsqT3FLEjXwdnXrxn4hx
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-animate.min.js"></script>