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!';
}]);
Related
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'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.
I have done a web application based in ASP MVC and angularJS, and everything works fine. Now, I want deploy it. In my bundleConfig I have put BundleTable.EnableOptimizations = true; to minified my scripts.
When I launch the app get a error:
Module 'dataService' is not available! You either misspelled...
In docs I have seen an interesting thing (it fits to error):
Careful: If you plan to minify your code, your service names will get renamed and break your app.
As docs suggests I use Inline Array Annotation. My code is:
app = angular.module("MyApp", ['ui.router', 'ui.bootstrap', 'kendo.directives', 'dataService', 'LoginFactory', 'globalService']);
in module dataService is:
app.service('dataService', ['$http', function($http) {
// service logic
}]);
I thought that would fix the error, but not.
PS: I have seen 3 differents methods of injection dependencies and I have used all. In example I use that because in docs is marked like preferred
replace app.Service with app.service.
No idea what is happening with my Meanjs based app. In my localhost works fine with no error but when I deploy to Heroku, this error appears the console. I've tried many things but cant figure it out because the info is very few. Cant understand what kind of dependency is causing the problem. It just happened whe I had to show the test to the employer.. very sad with heroku... any other place like heroku to deploy a meanjs app? Thanks!
Link with: Meanjs app in Heroku
Are you using the inline array annotation for dependencies injection?
This is what i mean:
someModule.controller('MyController', ['$scope', 'greeter', function($scope, greeter) {
// ...
}]);
If you don't, Heroku will minify your scripts, renaming your dependencies' names and let Angular throw the $Injector error.
I working with Laravel 5 and Angularjs, Laravel 5 uses Gulp for schedule asset's task and all work fine when use gulp's command, but when I use gulp --production's command and gulp minimize the Angularjs library, the console's chrome output:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:unpr] Unknown provider: e
Below my code:
gulpfile.js
First step, I copy all javascripts from bower folder to assets/js
.copy(
'resources/assets/bower_resources/angular/angular.js',
'resources/assets/js/vendor/angular.js')
.copy(
'resources/assets/bower_resources/angular-bootstrap/ui-bootstrap.js',
'resources/assets/js/vendor/ui-bootstrap.js')
.copy(
'resources/assets/bower_resources/ng-busy/src/angular-busy.js',
'resources/assets/js/vendor/angular-busy.js')
.copy(
'resources/assets/bower_resources/angular-ui-notification/dist/angular-ui-notification.js',
'resources/assets/js/vendor/angular-ui-notification.js')
second step, I put together all libraries copied inside one file "libraries.js"
.scripts(['vendor/angular.js',
'vendor/ui-bootstrap.js',
'vendor/angular-busy.js',
'vendor/angular-ui-notification.js',
'app.js'],'public/scripts/libraries.js')
My app.js
var app = angular.module('app', ['ui.bootstrap','ngBusy','ui-notification']);
app.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
});
I try different combination, but not working.
Please help!
Have you tried using inline annotation for dependency injection?
Here's a previous question that solves this problem
"Uncaught Error: [$injector:unpr]" with angular after deployment