Error: [$injector:unpr] Unknown provider: $$rAFProvider - angularjs

Using Karma to test Angular getting error:
Error: [$injector:modulerr] Failed to instantiate module ngMock due to:
Error: [$injector:unpr] Unknown provider: $$rAFProvider
Angular mock, Angular versions error?
I've heard solutions detailing changing of angular-mock version or angular version--which seems like a bad idea since I'd like to test on the same version as the app starts with.
Anyone else have an error like this?

Please check your angular version.
Your angular version and angular-mock version must be same.
To download angular-mock go the below link and replace the X.Y.Z with your angular version and save it
http://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-mocks.js
for example my angular version is 1.2.9
This work for me .

This issue was resolved by making sure the rails asset pipeline, which provides the angular-related assets in my case, was correctly serving assets during testing.

Related

Error: [$injector:modulerr] Failed to instantiate module ng due to: this is null after upgrading to angular 1.5

After upgrading to angular 1.5.7 from 1.4.9, I'm getting the following error:
I have AngularJs as a last script tag to avoid any conflicts with my application code.
Error: [$injector:modulerr] Failed to instantiate module ng due to:
this is null
$CompileProvider#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:7656:3
.bind/<#http://localhost/wro/appJS.js?RESOURCE_VERSION=12345-0:23:968
instantiate#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:4724:14
provider#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:4538:1
supportObject/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:4530:16
ngModule#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:2564:7
invoke#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:4709:16
runInvokeQueue#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:4602:11
loadModules/<#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:4611:11
forEach#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:321:11
loadModules#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:4592:5
createInjector#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:4514:19
bootstrap/doBootstrap#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:1751:20
bootstrap#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:1772:1
angularInit#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:1657:5
#https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.js:31468:5
n.Callbacks/j#http://localhost/wro/jqrJS.js?RESOURCE_VERSION=12345-0:6:46277
n.Callbacks/k.fireWith#http://localhost/wro/jqrJS.js?RESOURCE_VERSION=12345-0:6:47095
.ready#http://localhost/wro/jqrJS.js?RESOURCE_VERSION=12345-0:6:48887
I#http://localhost/wro/jqrJS.js?RESOURCE_VERSION=12345-0:6:49078
prototype.js used in my project was conflicting.
Upgrading it to latest version 1.7.3 and then loading jQuery, Angular and then prototype resolved this issue.

Migrating from Angular 1.2.14 to 1.4.2 breaks whole application

I have angular App defined with following:
var myApp = angular.module('myApp', ['ngRoute','infinite-scroll','geolocation', 'ngAnimate', 'ngTouch','ui.filters', 'AxelSoft','angularLazyImg','wu.masonry','ui.bootstrap','ngSanitize']);
Until now I was using AngularJS version 1.2.14. Now I need to use AngularJS form validations and in order to do that, I have decided to migrate to Angular's latest stable version 1.4.2.
When I have changed the angular version, things got broke and console throws
Uncaught Error: [$injector:modulerr] with following stack trace :
Error: $injector:modulerr
Module Error
Failed to instantiate module myApp due to:
TypeError: Cannot read property 'push' of undefined
at http://localhost:8000/static/mobile/js/angularApp/app.js:6:37
at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:39:156)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:37:328)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:37:452
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:7:322)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:37:229)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:37:398
at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:7:322)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:37:229)
at eb (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js:40:503
I have tried reading and understanding angularJS official migration guide but I coudn't able to figure out what's in it for me as I haven't used $animate in my code(It $animate and $touch are injected only for another plugin to work i.e. sliders and also I have used 'ngROute anywhere')
Does anyone have idea what should be done here as I have no idea about where do I start :)
So here is what was needed to be done to migrate my angular Application.
Migrate ngRoute and ngAnimate with the same version of angular
Remove HTTP interceptors which was in 1.2 and change them to the style of angular 1.4
In my case, removing $httpProvider and migration ngAnimate and ngRoute had solved my problem.

Implement noUiSlider in a view template - AngularJS

I'm new to AngularJS.
I want a range slider(noUiSlider) on a Angular view.
I found these 2 libraries to achieve that:
1) https://github.com/vasyabigi/angular-nouislider (Angular plugin)
2) https://github.com/Yankovsky/nouislider-angular (Angular plugin)
I chose option (2) and followed each steps exactly as mentioned there. But I'm getting this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module fastrankApp due to:
Error: [$injector:unpr] Unknown provider: $stateProvider
Any idea how to solve that? OR can anybody provide steps to implement noUiSlider in AgularJS in detail?
Any help would be appreciated.
do u inject your uislider to your App(same for javascript code in your web footer)?. Btw. its look like that problem is somewhere else.
For slider I use classic Bootstrap Slider
What is your AngularJs version.
Share your code.

Unit testing a service in angularJS

I'm relatively new to unit testing but was now tasked to write tests for a existing code base that I know quite well.
Sadly I'm unable to achieve any progress what so ever nor find really helpful documentation.
The main component of the code base is a service to retrieve data from an api but I'm unable to get an instance of the module the service belongs to:
TypeError: module is not a function in /home/faebser/workspace/GridSense-CMS-App/dev/test/unit/api.test.js (line 13)
karma config: http://sprunge.us/ObSP?js
tests: http://sprunge.us/AJWL?js
karma output: http://sprunge.us/WYHI?bash
What is the problem? why am I not able to get a instance of the module?
UPDATE1:
I'm managed to load my module by reinstalling the same version of angular and angular mocks. But now I run into the following error:
minErr/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:63:12
loadModules/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4138:15
forEach#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:323:11
loadModules#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4099:5
createInjector#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4025:11
workFn#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular-mocks/angular-mocks.js:2425:44
I managed to track the error down to the following:
"[$injector:modulerr] Failed to instantiate module ui.router due to:[$injector:nomod] Module 'ui.router' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.http://errors.angularjs.org/1.3.15/$injector/nomod?p0=ui.routerminErr/<#http://localhost:9876/base/bower_components/angular/angular.js:63:12module/<#http://localhost:9876/base/bower_components/angular/angular.js:1774:1ensure#http://localhost:9876/base/bower_components/angular/angular.js:1698:38module#http://localhost:9876/base/bower_components/angular/angular.js:1772:1loadModules/<#http://localhost:9876/base/bower_components/angular/angular.js:4115:22forEach#http://localhost:9876/base/bower_components/angular/angular.js:323:11loadModules#http://localhost:9876/base/bower_components/angular/angular.js:4099:5loadModules/<#http://localhost:9876/base/bower_components/angular/angular.js:4116:40forEach#http://localho"
Okay, simply forgot to add ui-router to karma-config.
It's looks like angular-mock is not loaded.
Checks well your path. For the moment, for karma it's look like :
-dev
|-test/
|-js/
|-bower_components/
|-karma.conf
Because in karma.conf, you have :
base: '',
Okay, I managed to get this to work.
The main problem was the strange error messages that angular gave me:
minErr/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:63:12
loadModules/<#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4138:15
forEach#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:323:11
loadModules#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4099:5
createInjector#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular/angular.js:4025:11
workFn#/home/faebser/workspace/GridSense-CMS-App/dev/bower_components/angular-mocks/angular-mocks.js:2425:44
To work around this I used the karma debug window and set a breakpoint at angular.js:63 in function minErr(module, ErrorConstructor):
return new ErrorConstructor(message);
that way you can see the arguments and the compiled error message. In the end i just forgot to add a few dependencies in the karma config file.

AngularJS LocalStorageModule is not available

I'm attempting to get a brand new Ionic project working with angular-local-storage with no luck. I'm somehow referencing angular-local-storage incorrectly, but I don't know how.
https://github.com/grevory/angular-local-storage
ionic start myApp tabs
cd myApp
ionic platform add ios
ionic build ios
bower install angular-local-storage
// app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'LocalStorageModule'])
Then
ionic serve
Error
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module LocalStorageModule due to:
Error: [$injector:nomod] Module 'LocalStorageModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
What simple thing am I missing?
I'm not familiar with ionic, but it looks to me like you're missing the script.
Are you sure that you have the script included on the page? I'd confirm that bower did indeed install the script where you think it should be and then make sure its actually referenced before this error is thrown.
Guy should need to check that have you added link to it's script
src="https://rawgit.com/grevory/angular-local-storage/master/dist/angular-local-storage.min.js"
using <script></script> tag in your index file. It might be the issue. For the guys who will see this in future.

Resources