Mocking a service in another service from a different module - angularjs

I have a service that depends on another service from a different module like so:
(function() {
'use strict';
angular
.module('app.core')
.factory('userService', userService);
function authService() {
return: {
userLoggedIn: false
}
}
})();
(function() {
'use strict';
angular
.module('app.services')
.factory('AuthService', authService);
authService.$inject = ['$http', 'userService'];
function authService($http, userService) {
}
I'm trying write tests for my authService but am getting injection errors since it can't find userService
beforeEach(function() {
module('app.services');
});
beforeEach(inject(function(_AuthService_) {
authService = _AuthService_;
}));
How can I overcome this, will using $provide help me here?
UPDATE
I have attempted the following, but still getting the error
beforeEach(function() {
module('app.services');
});
beforeEach(inject(function(_AuthService_, _$provide_) {
authService = _AuthService_;
$provide = _$provide_;
}));
beforeEach(function() {
module(function ($provide) {
$provide.value('userService', function(){
return {
userLoggedIn: false
}
});
});
});
SOLVED
Ok, so I just needed to do the following:
beforeEach(function() {
module('app.dataservices');
module(function ($provide) {
$provide.value('userService', function(){
return {
userLoggedIn: false
}
});
});
});
beforeEach(inject(function(_AuthService_) {
authService = _AuthService_;
}));
Tests are now passing fine for me

Let's say you service uses the $state service and you want to mock id. Specifically the get method. Then you just need to add inside the first describe something like this.
beforeEach(function () {
module(function ($provide) {
$provide.service('$state', function() {
return {
get: function() {}
}
});
});
});
In this gist you can find some interesting examples of mocking services using $provide.

you should be preloading all services in your karma.conf.js (i assume you are using karma).
here is our karma.conf.js file ...
/**
* Karma test runner configuration
*/
'use strict';
module.exports = function (config) {
config.set({
basePath: './',
browsers: ['PhantomJS'],
frameworks: ['jasmine'],
reporters: ['mocha', 'coverage'],
singleRun: true,
preprocessors: {
'src/**/!(*spec)*.js': ['coverage'],
'dest/**/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
stripPrefix: 'dest/',
moduleName: 'ngHtmlFiles'
},
coverageReporter: {
type: 'html',
dir: 'coverage'
},
files: [
'dest/vendor.min.js',
'bower_components/angular-mocks/angular-mocks.js',
'src/**/*.js',
'dest/**/*.html'
]
});
};

Related

AngularJS - Unit Testing Controllers and Services

I'm quite new to unit testing of AngularJS, and have been pulling my hair figuring things out. I am currently testing a simple controller that produces some outputs, which I need to unit test.
controller: SummaryController
(function(app) {
'use strict';
function SummaryController($scope, $stateParams, $state, $interval, $payments, $cashierApp, $window, $banks, $prepaidcards, $flash, $player, $cookies, $rootScope, $filter) {
// lots of stuff going on here, but I only need this part
$scope.showQR = $payments.get('paymentoption').content.field_display_qrcode;
// a basic assignment of a boolean value which I need to check if it is defined
}
app.controller('depositStatusCtrl', ['$scope', '$stateParams', '$state', '$interval', '$payments', '$cashierApp', '$window', '$banks', '$prepaidcards', '$flash', '$player', '$cookies', '$rootScope', '$filter', SummaryController]);
})(angular.module('cashierApp'));
spec (unit test): controller.spec.js
'use strict';
describe('Cashier App: Deposit Status Page', function() {
var service,
ctrl,
scope;
beforeEach(module('cashierApp'));
beforeEach(inject(function($rootScope, $controller, SummaryController) {
scope = $rootScope.$new();
mockSummaryCtrl = SummaryController;
spyOn(mockSummaryCtrl, 'save').andCallThrough();
firstController = $controller('depositStatusCtrl', {
$scope: scope,
SummaryController: mockSummaryCtrl
});
}));
it('should check if qrcode display is enabled', function() {
expect(scope.showQR).toBeDefined();
// expect(scope.showQR).toBe(true);
// expect(scope.showQR).toBe(false);
});
});
I've tried every possible approach I can find on the web, and this one I tried to use was based on an example here.
I cannot get this to work at all. How do you properly test controllers and/or providers in AngularJS? When I run karma start (I'm using karma-jasmine, btw), I always get the same error of:
Error: [$injector:unpr] Unknown provider: SummaryControllerProvider <- SummaryController
EDIT: Here's my karma.conf.js just in case you need to know how I use my dependencies.
'use strict';
module.exports = function(config) {
var configuration = {
autoWatch: true,
frameworks: ['jasmine'],
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/angular-ui-router/release/angular-ui-router.js',
'bower_components/angular-carousel/dist/angular-carousel.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-messages/angular-messages.js',
'bower_components/ngclipboard/src/ngclipboard.js',
'bower_components/angular-qrcode/angular-qrcode.js',
'bower_components/angular-sanitize/angular-sanitize.min.js',
'bower_components/ng-file-upload/ng-file-upload-all.min.js',
'bower_components/ng-device-detector/ng-device-detector.min.js',
'bower_components/re-tree/re-tree.min.js',
'bower_components/angular-timer/dist/angular-timer.min.js',
'bower_components/angular-touch/angular-touch.min.js',
'bower_components/highlightjs/highlight.pack.min.js',
'bower_components/moment/moment.js',
'src/app/app.js',
'src/app/core/cashier.core.js',
'src/app/core/directives/modal/modal.js',
'src/app/pages/deposit/deposit.js',
'src/app/pages/withdrawal/withdrawal.js',
'src/app/paymentoptions/alipaywap/alipaywap.js',
'src/app/paymentoptions/alipaywap/alipaywap.confirm.js',
'src/app/paymentoptions/astropay/astropay.js',
'src/app/paymentoptions/atmotc/atmotc.js',
'src/app/paymentoptions/atmotc/atmotc.confirm.js',
'src/app/paymentoptions/banktransfer/banktransfer.js',
'src/app/paymentoptions/banktransfer/banktransfer.confirm.js',
'src/app/paymentoptions/bitcoin/bitcoin.js',
'src/app/paymentoptions/bitcoinwithdrawal/bitcoinwithdrawal.js',
'src/app/paymentoptions/debitcard/debitcard.js',
'src/app/paymentoptions/lbtwithdrawal/lbtwithdrawal.js',
'src/app/paymentoptions/prepaidcard/prepaidcard.js',
'src/app/paymentoptions/qqpay/qqpay.js',
'src/app/paymentoptions/unionpay/unionpay.js',
'src/app/paymentoptions/wcnp/wcnp.js',
'src/app/paymentoptions/wechat/wechat.js',
'src/app/pages/deposit/deposit.status/deposit.status.controller.js',
'src/app/pages/deposit/deposit.status/deposit.status.controller.spec.js'
],
reporters: ['progress', 'coverage', 'junit'],
ngHtml2JsPreprocessor: {
stripPrefix: 'src/',
moduleName: 'templates'
},
// browsers: ['PhantomJS','Chrome'],
browsers: ['Chrome'],
plugins: [
'karma-chrome-launcher',
'karma-phantomjs-launcher',
'karma-angular-filesort',
'karma-jasmine',
'karma-ng-html2js-preprocessor',
'karma-junit-reporter',
'karma-coverage'
],
junitReporter: {
outputFile: 'target/unittest-results.xml',
suite: ''
},
preprocessors: {
'src/**/*.html': ['ng-html2js'],
'src/**/*.js': ['coverage']
},
coverageReporter: {
reporters: [{
type: 'cobertura',
dir: 'target/coverage/'
},
{
type: 'html',
dir: 'target/coverage/'
}
]
}
};
// This block is needed to execute Chrome on Travis
// If you ever plan to use Chrome and Travis, you can keep it
// If not, you can safely remove it
// https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076
if (configuration.browsers[0] === 'Chrome' && process.env.TRAVIS) {
configuration.customLaunchers = {
'chrome-travis-ci': {
base: 'Chrome',
flags: ['--no-sandbox']
}
};
configuration.browsers = ['chrome-travis-ci'];
}
config.set(configuration);
};
Try to start from this. The reason you get not an error that angular's injector works with only known "types" - controller, services, e.t.c. And in your example you tried to get some function, that it does not now. However, it knows this function by controllers name - depositStatusCtrl.
beforeEach(inject(function($rootScope, $controller, depositStatusCtrl) {
spyOn(depositStatusCtrl, 'save').andCallThrough();
}));
it('should check if qrcode display is enabled', function() {
expect(depositStatusCtrl).toBeDefined();
});

how to inject module dependencies in angular test unit with karma

it's the first time that i use angular application using generator and units tests with karma.
i wanna create some angularjs unit test for my app based on bower, gulp, karma...
this is my controller :
(function() {
'use strict';
angular.module('order', ['common'])
.controller('OrderVehiculesController', function (drivers,Logger) {
var self = this;
this.orderForm = {
id: '',
txt: ''
};
this.msgCtrlError = {
id: ''
};
var logger = Logger.getInstance('OrderVehiculesController');
logger.log(self);
this.getOrder = function (name) {
// A modifier car il serait plus judicieux d'avoir un model d'object et de pouvoir les réinitialiser avec une function
self.msgCtrlError.id = '';
self.msgCtrlError.txt = '';
drivers
.getOrder(name)
.then(function (orderData) {
self.orderData = orderData;
logger.log('orderData='+orderData);
logger.log('orderData name='+orderData.name);
})
.catch(function (err) {
logger.error('status=' + err.status + ' error=' + err.error);
self.msgCtrlError.id = err.status;
self.msgCtrlError.txt = err.error;
});
};
});
})();
and the [common] is like that :
(function() {
'use strict';
angular.module('common', [
'common.drivers-service',
'common.ads-auth-service',
'common.liferay-service',
'common.locale-service',
'common.logging-service'
]);
})();
and I tried to test it like that:
'use strict';
describe('orderModule', function () {
// Set up the module
beforeEach(module('common'));
beforeEach(module('order'));
var scope;
//test controller order
describe('OrderVehiculesController', function () {
var controller;
beforeEach(inject(function ($controller, $rootScope,common) {
scope = $rootScope.$new();
//TODO: how to call common mudule???
//instantiation of controller with its modules
controller = $controller('OrderVehiculesController', {
$scope: scope,
});
}));
it('should be defined', function() {
expect(OrderVehiculesController).toBeDefined();
});
});
});
but finaly, i've this error and i didn't understand it, i need some help please.
thank you.
ERROR is:
> WARN [watcher]: Pattern "C:\Users\src\**\*.mock.js" does not match any file.
> INFO [PhantomJS 1.9.8 (Windows 7)]: Connected on socket 4vwNDK9jjnvHoFW7eeL- with id 39484477
PhantomJS 1.9.8 (Windows 7) orderModule OrderVehiculesController should be defined FAILED
Error: [$injector:unpr] Unknown provider: commonProvider <- common
http://errors.angularjs.org/1.3.15/$injector/unpr?
and my karma config is the default karma.confg.js :
'use strict';
module.exports = function(config) {
var configuration = {
autoWatch : false,
frameworks: ['jasmine'],
ngHtml2JsPreprocessor: {
stripPrefix: 'src/',
moduleName: 'gulpAngular'
},
browsers : ['PhantomJS'],
plugins : [
'karma-phantomjs-launcher',
'karma-jasmine',
'karma-ng-html2js-preprocessor'
],
preprocessors: {
'src/**/*.html': ['ng-html2js']
}
};
// This block is needed to execute Chrome on Travis
// If you ever plan to use Chrome and Travis, you can keep it
// If not, you can safely remove it
// https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076
if(configuration.browsers[0] === 'Chrome' && process.env.TRAVIS) {
configuration.customLaunchers = {
'chrome-travis-ci': {
base: 'Chrome',
flags: ['--no-sandbox']
}
};
configuration.browsers = ['chrome-travis-ci'];
}
config.set(configuration);
};

Unit testing angularjs controller using Node.js, Gulp.js and Mocha

I am trying to unit test an angularjs controller using Node.js. I am using gulp.js and mocha to run the tests, via gulp-mocha.
This is what my gulpfile.js looks like right now:
(function () {
var gulp = require('gulp');
var mocha = require('gulp-mocha');
gulp.task('default', function () {
return gulp
.src('Scripts/Tests/*.js', { read: false })
.pipe(mocha({
ui: 'tdd',
reporter: 'dot',
globals: {
angular: require('./Scripts/angular.js')
}
}));
});
})();
This is the code under test:
(function () {
var application = angular.module('Main');
application.controller('MainController', ['$scope', function ($scope) {
$scope.isDisabled = function () {
return true;
};
}]);
})();
And this is the test file itself:
(function () {
var chai = require('chai');
var assert = chai.assert;
angular.module('Main', []); // Create an empty module
require('../MainController.js'); // Fill the module with the controller
suite('Main Controller', function () {
test('isDisabled always true', function () {
var controllerFactory = angular.injector.get('$controller');
var controller = controllerFactory('MainController', {
'$scope': {}
});
var result = controller.isDisabled();
assert.isTrue(result);
});
});
})();
I need to make angular a global in order for my test and the file I am testing to work. However, the call to require in gulpfile.js is giving me a Reference Error: window is not defined error. That makes sense, since I am running in Node.js.
What do I need to do to load up angular in Node.js?
As #unobf said (and the angularjs documentation says), the trick to testing angular from Node.js was to use Karma. That meant installing karma and karma-mocha, along with karma-chrome-launcher, karma-ie-launcher, karma-firefox-launcher (or whatever) via npm install.
Then I basically had to redo my gulp.js file from scratch:
(function () {
var gulp = require('gulp');
var karma = require('karma').server;
gulp.task('runTests', function (done) {
karma.start({
configFile: __dirname + '/karma.config.js',
singleRun: true
}, done);
});
gulp.task('default', ['runTests']);
})();
I also had to create a karma.config.js file to configure karma to use Chrome, Firefox, IE with mocha. In the same file, I configured mocha to use the tdd UI and the dot reporter:
module.exports = function(config) {
config.set({
browsers: ['Chrome', 'Firefox', 'IE'],
frameworks: ['mocha'],
files: [
'./Scripts/angular.js',
'./Scripts/chai.js',
'./Scripts/*.js',
'./Scripts/Tests/*.js'
],
singleRun: true,
client: {
mocha: {
reporter: 'dot',
ui: 'tdd'
}
}
});
};
I learned you have to specify angularjs, chai.js, etc. first so they are picked up first and in global scope for the other files. Along the same lines, the files for the code being tested have to be listed before the test files.
The code being tested didn't change at all. Once my tests were running, I realized my test was broken, and it ended up looking like this to pass:
(function () {
var assert = chai.assert;
suite('Main Controller', function () {
test('isDisabled always true', function () {
var injector = angular.injector(['ng', 'Main']);
var $controller = injector.get('$controller');
var scope = {};
var controller = $controller('MainController', {
'$scope': scope
});
var result = scope.isDisabled();
assert.isTrue(result);
});
});
})();
The big take away was that the controller simply populates the $scope object. I call isDisabled() on the $scope object instead. Of course, getting at the controller is a lot of work, so it makes more sense to use the inject method provided by angular-mocks.js:
(function () {
var assert = chai.assert;
suite('Main Controller', function () {
var $scope = {};
setup(function () {
module('Main');
inject(function ($controller) {
$controller('MainController', {
'$scope': $scope
});
});
});
test('isDisabled always true', inject(function ($controller) {
var result = $scope.isDisabled();
assert.isTrue(result);
}));
});
})();
Hopefully this is enough to get anyone started who is trying to use Node.js and mocha to test angularjs code.
I am doing this in Grunt, but the same principle applies to Gulp. You need to inject the "angular-mocks.js" file to be able to mock the dependency injection. I am using Karma http://karma-runner.github.io/0.12/index.html to do this and set it up in my karma.conf.js file as follows:
module.exports = function(config){
config.set({
basePath : '../../',
files : [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
...
Then you can inject a $controller into your tests and do things like test your controller initialization. The test below is initializing the scope and then testing that the controller is adding methods to the scope (note, I am using Jasmine, but the same can be done with mocha) but Jasmine comes with some nice builtin spy capabilities.
describe('analysisController', function () {
var scope, state;
beforeEach(function () {
module('analysis');
scope = {
$apply:jasmine.createSpy(),
ws: {
registerCallback:jasmine.createSpy(),
sendMessage:jasmine.createSpy()
}
},
state = {
go : jasmine.createSpy()
};
});
it('should add a bunch of methods to the scope', inject(function ($controller) {
$controller('analysisController', {
$scope : scope,
$state: state
});
expect(typeof scope.colorContrast).toBe('function');
expect(typeof scope.XPathFromIssue).toBe('function');
}));
...

Testing Angular controller with Require and Typescript

I am trying to create a basic test to verify that I can create a controller or service.
My app is is the following directory
app/js/app.js
My controllers are in the following directory
app/js/controllers/
Here is my karma.conf.js file
files: [
'Scripts/jquery-2.1.1.min.js',
'Scripts/require.js',
'Scripts/angular.js',
'Scripts/angular-mocks.js',
{ pattern: 'app/js/*.js', included: false },
{ pattern: 'app/js/**/*.js', included: false },
{ pattern: 'app/js/**/**/*.js', included: false },
{ pattern: 'app/js/**/**/**/*.js', included: false },
{ pattern: 'test/specs/**/*.js', included: false },
'test/test-main.js',
],
// list of files to exclude
exclude: [
'app/js/main.js'
],
test-main.js
var testFiles = [];
for (var file in window.__karma__.files) {
console.log(file);
if (/Spec\.js$/.test(file)) {
testFiles.push(file);
}
}
requirejs.config({
paths: {
// External libraries
'jquery': '../../Scripts/jquery-2.1.1.min',
'angular': '../../Scripts/angular',
'angular-mocks': '../../Scripts/angular-mocks',
'ngRoute': '../../Scripts/angular-route.min',
'angular-animate': '../../Scripts/angular-animate.min',
'angular-cookies': '../../Scripts/angular-cookies.min',
},
baseUrl: '/base/app/js',
shim: {
'angular': {
exports: 'angular',
deps: ['jquery']
},
'angular-mocks': { exports: 'angular-mocks', deps: ['angular'] },
'angular-animate': { exports: 'angular-animate', deps: ['angular'] },
'ngRoute': { exports: 'ngRoute', deps: ['angular'] },
'angular-cookies': { exports: 'angular-cookies', deps: ['angular'] },
},
// dynamically load all test files
deps: testFiles,
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
});
I added this line...
console.log(file)
To make sure the file was loaded into
window.__karma__.files
and it is.
The test lives in test/specs/
define(['angular', 'angular-mocks'], (angular, ngMock: ng.IMockStatic) => {
var module = ngMock.module;
var inject: (...fns: Function[]) => any = ngMock.inject;
describe("Create an Application", function () {
var scope, q, routeParams;
var location;
var app;
beforeEach(function () {
app = angular.module('App', []);
inject(function ($rootScope, $q: ng.IQService, $location: ng.ILocationService) {
scope = $rootScope;
q = $q;
routeParams = {};
location = $location;
});
});
it('Test Application Created', function () {
expect(true).toBe(true);
});
});
});
My app file looks like this....
import angular = require('angular');
import angularRoute = require('angular-route');
import angularAnimate = require('angular-animate');
import ds = require('services/DataService');
var app = angular.module('app', [
'ngRoute',
'ngAnimate',
'ngCookies',
'kendo.directives',
'breeze.angular',
'ui.bootstrap'
]);
export = app;
the error that i get when I try to run the test is
failed to instantiate module app due to: Module 'app' is not available! You either misspelled the module name or forgot to load it.
I am assuming it is not loading but not sure how I can tell. Is this the best way to accomplish my testing?
Any help is greatly appreciated!
Thanks so much!
If you are using Karma with Jasmine, you may be having the problem of Jasmine being too eager.
This can be fixed by making two changes, originally described in an article I wrote when I was doing a similar thing, Combining TypeScript, Jasmine and RequireJS.
In boot.js you need to comment out the env.execute(); method call:
window.onload = function() {
if (currentWindowOnload) {
currentWindowOnload();
}
htmlReporter.initialize();
//env.execute();
};
This is because the window.onload event can happen before require.js has loaded everything.
Once you have loaded the modules you need, you can then call:
// Hai Jasmine - ready to go!
jasmine.getEnv().execute();
This is what it gets compiled with your code and the -m amd switch
describe("Create an Application", function () {
var scope, q, routeParams;
var controller, location;
var route;
beforeEach(function () {
module('app', ['ngRoute', 'ngAnimate', 'ngCookies', 'kendo.directives', 'breeze.angular', 'ui.bootstrap']);
inject(function ($rootScope, $q, $location) {
scope = $rootScope;
q = $q;
routeParams = {};
location = $location;
});
// controller = new controller.ApplicationService(q, scope, route, location, _datasvc, _searchsvc);
});
it('Test Application Created', function () {
expect(true).toBe(true);
});
});
is not a module, and its synchronous
But. in a module works
define(['angular','angular-mocks'],(angular,ngMock:ng.IMockStatic)=>{
var module = ngMock.module;
var inject: (...fns: Function[])=>any = ngMock.inject;
describe("Create an Application", function () {
var scope, q, routeParams;
var location;
var app;
beforeEach(function () {
app = angular.module('App', []);
inject(function ($rootScope, $q: ng.IQService, $location: ng.ILocationService) {
scope = $rootScope;
q = $q;
routeParams = {};
location = $location;
});
});
it('Test Application Created', function () {
expect(true).toBe(true);
});
});
});
Or alternatively in a more TypeScripty w/ES6esque way :
import ngMock = require('angular-mocks');
import angular = require('angular');
var module = ngMock.module;
var inject: (...fns: Function[])=>any = ngMock.inject;
describe("Create an Application", function () {
var scope, q, routeParams;
var location;
beforeEach(function () {
var app = angular.module('app', []);
inject(function ($rootScope, $q: ng.IQService, $location: ng.ILocationService) {
scope = $rootScope;
q = $q;
routeParams = {};
location = $location;
});
});
it('Test Application Created', function () {
expect(true).toBe(true);
});
});
check that you are loading angular as in a script tag
'files:[Scripts/angular.js',... ,
that's why you get
WARNING:tried load angular more than once
Put it in a { pattern: 'Scripts/angular.js', included: false ...],
you need to work out the requirejs.confg until the deps chain are satisfied. in order., and thats one of the reasons why you set the shim config with
'angular-mocks': { exports: 'angular-mocks', deps: ['angular'] },
so when requiring angular-mocks angular is required too ,
have a look at [this github repo](https://github.com/tnajdek/angular-requirejs-
seed),
...And once you have an instance attached to angular.module /mock.module in your spec , check Steve's answer again ,
If you can't find boot.js , you might be using jasmine bundled with the Karma adapter. in that case it should work given you have sorted out the require test-maiin.js / config / "NG_DEFER_BOOTSTRAP!" /resumeBootstrap story

AngularJS Inject service in .run function

In my AngularJS app, using Yeoman, when minifying my app I have this error :
Uncaught Error: [$injector:unpr] Unknown provider: aProvider <- a <- $http <- AuthenticationService
that I obviously do not have before minifying.
Here is the definition of my service in a separate runner.js file :
angular.module('myApp').run(['$rootScope', 'AuthenticationService', 'FlashService', 'SessionService', function ($rootScope, AuthenticationService, FlashService, SessionService) {
//some code
}]);
I thought of course about the typical Injection error when minifying but I am struggling to see what is wrong in my code...
UPDATE
My AutenticationService :
angular.module('myApp').factory("AuthenticationService", ['$http', '$rootScope', '$sanitize', 'SessionService', 'FlashService', 'SETTINGS', function($http, $rootScope, $sanitize, SessionService, FlashService, SETTINGS) {
var cacheSession = function() {
SessionService.set('authenticated', true);
};
var uncacheSession = function() {
SessionService.unset('authenticated');
SessionService.unset('user');
};
var loginError = function(response) {
FlashService.show('warning', response.flash);
};
var loginSuccess = function(response) {
SessionService.set('user', JSON.stringify(response));
FlashService.clear();
};
var logoutSuccess = function(response) {
FlashService.show('success', response.flash);
};
var sanitizeCredentials = function(credentials) {
return {
email: $sanitize(credentials.email),
password: $sanitize(credentials.password)
};
};
return {
login: function(credentials) {
var login = $http.post(SETTINGS.urlBackend+"/auth/login", sanitizeCredentials(credentials));
login.success(cacheSession);
login.success(loginSuccess);
login.error(loginError);
return login;
},
logout: function() {
var logout = $http.get(SETTINGS.urlBackend+"/auth/logout");
logout.success(uncacheSession);
logout.success(logoutSuccess);
logout.error(loginError);
return logout;
},
isLoggedIn: function() {
var checked = $http.get(SETTINGS.urlBackend+"/auth/check");
return (checked && SessionService.get('authenticated'));
}
};
}]);
Try setting mangle: false in the Uglify configuration in your Gruntfile.js:
grunt.initConfig({
// ...
uglify: {
options: {
mangle: false
}
}
});
I've had this happen when using certain packages from Bower. I believe some of the Angular UI suite of tools weren't compatible, for some reason.
I highly recommend an alternative approach to manually setting up the angular minification work around - the wrapping of the "module" - controller, service, factory - in the [] brackets.
Use the ng-min module! It's written by the guys as Angular - namely Brian Ford. But most important it removes this complication in writing Angular modules, they become clean and readable again and the ng-min does the hard work of fixing minification issues.
I know it's not an answer to you question, but it might be a solution to the problem you are facing in general.
// Allow the use of non-minsafe AngularJS files. Automatically makes it // minsafe compatible so Uglify does not destroy the ng references
ngmin: {
dist: {
files: [
{
expand: true,
cwd: '.tmp/concat/scripts',
src: '*.js',
dest: '.tmp/concat/scripts'
}
]
}
},

Resources