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.
Related
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!';
}]);
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 want to use $templateCache service to add some html into the cache. In Angular documentation example, it only shows the case of using it in run:
var myApp = angular.module('myApp', []);
myApp.run(function($templateCache) {
$templateCache.put('templateId.html', 'This is the content of the template');
});
However, when I am trying to add some templates through myApp config, there seems to be injector error. Is there a way to use templateCache not in RUN?
Thanks
run is the correct place to use the $templateCache. Since $templateCache is a service, it's not accessible in the configuration phase, because it hasn't been created yet. config is used to configure services (like $templateCache) using their providers. You can only inject providers to config.
My opinion is that, most of the time, you shouldn't be writing code that accesses $templateCache directly at all. What you should be doing is using a build system such as gulp and a plugin such as gulp-angular-templatecache.
Then your templates are simply a bunch of .html files, your editor recognises them as html and does the appropriate linting while you edit, and all you have to do is ensure your app declares a dependency on the template module.
So the code you gave above would become:
var myApp = angular.module('myApp', ['myappTemplates']);
and the use of $templateCache inside .run() is pushed down to automatically generated code that you never see.
I always give up on testing because I find it is more work than actually writing code that works well, but I'm working on a project I hope to open-source, so am committed to writing tests this time.
I have this angular app, and when I define it I include the dependencies
var app = angular.module('app', [
'ngResource',
'ngSanitize',
'ngRoute',
'ui.ace'
]);
When I try to test a controller, I start with
beforeEach(angular.mock.module('app'));
beforeEach(angular.mock.inject(function($rootScope,$controller){
scope = $rootScope.$new();
$controller('FileSystemCtrl',{$scope:scope});
})
);
When I run jasmine, I get
Failed to instantiate module app due to:
Failed to instantiate module ui.ace due to:
Module 'ui.ace' is not available!
I don't want to have to list all the dependencies every time I mock or instantiate 'app' in a test, as that would mean when I add a new dependency, I'd have to go back and change all the already existing test.
This seems very inefficient to me.
Can somebody explain why I'm getting this error, and how to get around it?
If you're not using a test runner such as Karma, I'd highly recommend using that. Here's the link. What karma allows you to do is to define all of your required files in one main configuration file so you can maintain it in one central location. Plus there's a jasmine plugin for karma.
it seems that from angular's point of view the order of registering of a service provider and the module configuration code is important: in order for the configuration code to find the provider, the provider should be registered before.
This was a total surprise for me, as I thought that angular first processes all provider registrations, to make them available for DI, and then calls config callbacks, like this:
module.config(function(myServiceProvider) {...});
Please see here a very short test that demonstrates the problem. It fails on "unknown provider", you can see it in the JS console: http://plnkr.co/edit/jGJmE2Fq7wOrwubdlTTX
Am I missing anything here? Is it an expected angular behavior?
Thanks.
Looks like this behavior has changed in more recent versions of Angular (not sure when exactly). I modified your Plunker to point from 1.0.7 to 1.3.0 and it worked without error as you had originally expected.
Similar example of code that works:
var myModule = angular.module('myModule', []);
myModule.config((myServiceProvider) => {
});
myModule.service('myService', () => {
});
Running a config for a provider before the provider is registered with the module should work just fine as you were expecting.
Reference
For reference, this reported issue appears to be the one to have fixed it: https://github.com/angular/angular.js/issues/6723
The Angular documentation for module state that:
Recommended Setup
While the example above is simple, it will not scale to large applications. Instead we recommend that you break your
application to multiple modules like this:
A service module, for service declaration
A directive module, for directive declaration
A filter module, for filter declaration
And an application level module which depends on the above modules, and which has initialization code.
As you are using a single module that you call app, you are creating a dependency between that module's config and declaration of a provider. What you should have done is to place all your providers into a separate module, such as:
var appr = angular.module('appr', [])
.provider('myService', function() {
this.$get = function() {};
})
Then you declare the dependency of your app using:
var app = angular.module('plunker', ['appr']);
Check out the updated Plunker: http://plnkr.co/edit/Ym3Nlsm1nX4wPaiuVQ3Y?p=preview
Also, instead of using the generic provider, consider using more specific implementation of provider such as controller, factory or service. Take a look at Module API documentation for more detail.