I following this tutorial to implement push notifications with SignalR and toastr
before implement it my app.js is like:
(function () {
'use strict';
var app = angular.module('myPortal', ['common.core', 'common.ui'])
.config(config)
.run(run);
/* Setup global settings */
app.factory('settings', ['$rootScope', function ($rootScope) {
// supported languages
var settings = {....
when I update it as tutorial I have something like this:
(function () {
'use strict';
var app = angular.module('myPortal', ['common.core', 'common.ui'])
.config(config)
.run(run);
$(function () {
$.connection.hub.logging = true;
$.connection.hub.start();
});
$.connection.hub.error(function (err) {
console.log('An error occurred: ' + err);
});
angular.module('app')
.value('notification', $.connection.notification)
.value('toastr', toastr);
/* Setup global settings */
app.factory('settings', ['$rootScope', function ($rootScope) {
// supported languages
var settings = {...
but now my app crash and chrome console throw these issues:
angular.js:68 Uncaught Error: [$injector:nomod] Module 'app' 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.
and
Uncaught Error: [$injector:unpr] Unknown provider: settingsProvider <-
settings
What am I doing wrong? Regards
Related
Hopefully this question doesn't get erroneously marked as a duplicate.
I am attempting to extend the AngularJS $routeProvider, as suggested as a response to a previous question. Unfortunately, this is not working, and I may have the syntax incorrect.
Here is a sanitized version of my "top-level" module:
// app.js
angular.module('app', ['ngRoute', 'ngSanitize'
, 'main'
])
.provider('appRoute', ['$routeProvider', function($routeProvider) {
this.$get = function($http) {
console.log("Instantiaing $rmaRouteProvider");
var universalResolves = {authorize: function($http) {
return $http.get('/svc/authorize/view?urlPath=' + path)
.then(function(response) {
var data = response.data;
if (response.data.result === 'NOT_AUTHORIZED') {
throw "NOT_AUTHORIZED";
}
console.log("finished authorized()");
return data;
});
}
};
var rmaRouteProvider = angular.extend({}, $routeProvider, {
when: function(path, route) {
route.resolve = (route.resolve) ? route.resolve : {};
angular.extend(route.resolve, universalResolves);
$routeProvider.when(path, route);
return this;
}
});
return rmaRouteProvider;
}
}]);
Here is my main.js, where I am attempting to define routes using the appRoute provider instead of the $routeProvider:
angular.module('admin', ['ngRoute', 'ngSanitize', 'ngCsv'])
.config(['appRouteProvider', function(appRouteProvider) {
appRouteProvider.when('/route', {
templateUrl: 'pageTemplate.tmpl.html',
controller: 'pageCtrl'
}
]);
Unfortunately, I get the following error:
Error: [$injector:modulerr] Failed to instantiate module app due to:
[$injector:modulerr] Failed to instantiate module main due to:
[$injector:unpr] Unknown provider: appRouteProvider
http://errors.angularjs.org/1.5.8/$injector/unpr?p0=%24appRouteProvider
minErr/<#https://localhost:8443/js/angular/angular.js:68:12
createInjector/providerCache.$injector<#https://localhost:8443/js/angular/angular.js:4511:19
getService#https://localhost:8443/js/angular/angular.js:4664:39
injectionArgs#https://localhost:8443/js/angular/angular.js:4688:58
invoke#https://localhost:8443/js/angular/angular.js:4710:18
runInvokeQueue#https://localhost:8443/js/angular/angular.js:4611:11
loadModules/<#https://localhost:8443/js/angular/angular.js:4620:11
forEach#https://localhost:8443/js/angular/angular.js:321:11
loadModules#https://localhost:8443/js/angular/angular.js:4601:5
loadModules/<#https://localhost:8443/js/angular/angular.js:4618:40
forEach#http…
As I said, I'm hoping this is an error with my syntax.
Edit: I realize that instatiation of providers is load-order specific. The app.js is the first <script> imported in the application index.html file and should be loaded first.
Edit 2: I have updated this question to the following: Custom Route Provider when is not a function
I am working on an angular application. It was a working application on windows.
Now i switched to mac and trying to build the same but after the build when I am opening the application on browser it is throwing console error: Uncaught Error: [$injector:unpr]
https://code.angularjs.org/1.7.8/docs/error/$injector/unpr?p0=$cookieStoreProvider%20%3C-%20$cookieStore
Here is the app.js:
angular
.module('xyz', [
'ui.router',
'Commons' ,
'ngCookies',
'ngMask',
'ui.bootstrap.datetimepicker',
'btorfs.multiselect',
'oitozero.ngSweetAlert'
])
.constant('GLOBAL_CONSTANTS', {
})
.config(['$urlRouterProvider', '$httpProvider', '$stateProvider', initializeConfigurationPhase])
.run(['$rootScope', '$cookieStore', 'httpService', 'notificationService', initializeRunPhase]);
function initializeRunPhase($rootScope, $cookieStore, httpService, notificationService) {
$rootScope.currentItem = 0;
$rootScope.baseUrl = "someurl";
// $rootScope.baseUrl = "http://localhost";
$rootScope.loggedIn = false;
if($cookieStore.get('access_token')) {
$rootScope.loggedIn = true;
notificationService.connect();
}
if(!$cookieStore.get('userCountryCode')) {
fetchUserCountry();
} else {
$rootScope.userCountryCode = $cookieStore.get('userCountryCode');
}
function fetchUserCountry () {
httpService.getWithoutData(url, true).then(function(response){
$cookieStore.put('userCountryCode',response.country_code);
$cookieStore.put('city',response.city);
$cookieStore.put('region_name',response.region_name);
});
}
}
Let me know if i am missing something or doing something wrong.
As already said by #Petr Averyanov, $cookieStore is deprecated from angular 1.6
look here
$cookieStore is now deprecated as all the useful logic has been moved
to $cookies, to which $cookieStore now simply delegates calls.
install angular 1.5 and you won't get that error
I have a Provider defined in an angular module say A, and I am trying to use it in the config of another angular module say B, as shown in the following code snippet:
var A = (function(ng){
'use strict';
var a = ng.module('A',[]);
a.provider('MyProvider', function(){
this.$get = ['$q', function($q){
return new myService($q);
}]
});
function myService($q){
var data = // Some data
this.getAllData = function(){
return $q(function(resolve,reject){
resolve(data)
});
}
}
//ng.bootstrap(a);
return a;
})(angular);
and app B is as follows:
//IIFE pattern for modularization
var B = (function(angular) {
'use strict';
// initialize the Angular app
var b = angular.module('B', ['ui.router', 'A']);
b.config(config);
function config($stateProvider, $urlRouterProvider, myProvider){
myProvider.getAlldata().then(function(data){
//do some processing on data related to routes...
}, function(err){
//handle Err
});
}
return b;
})(angular);
Now I am getting the err as:
angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module ngApp due to:Error: [$injector:unpr] Unknown provider: RouteProvider
Can someone please help me crack this? Thank you.
Apparently the myProvider should be referenced as myProviderProvider in the config function. its about naming the provider. And then you can use myProvider as a dependency to any other service/factory, and here the instance returned in the $get method of the myProvider(any provider for that matter) will be made available for use in the dependant service/factory.
If not so clear, Someone who understood can develop the answer. I 'll mark the best one as the answer. Thank you.
The current task is to write a client for an API. The $resource module is not getting injected correctly. I have injected ngResource to the module, and then also passed it into the factory declaration. However inside the controller, if I try to console.log($resource), I get the following error:
TypeError: 'undefined' is not a function (evaluating '$resource('https://ourlink.nl',options)')
I am convinced the issue is happening/not happening in app.js, but receptive to input if you have other ideas. Can you help me spot the problem?
restClient.js
function restClient ($resource) {
'use strict';
var options = {};
init();
return {
endpoint: self.endpoint,
sendRequest: sendRequest
};
function init () {
self.endpoint = 'https://ourlink.nl';
}
function sendRequest () {
$resource('https://ourlink.nl', options);
return true;
}
}
module.exports = restClient;
app.js
var angular = require('angular');
// imports
require('angular-resource');
(function (angular, config, loaders, controllers, services, providers) {
'use strict';
angular
.module('at.annabel', [
'ngLocale',
'ngRoute',
'ngResource',
'ngSanitize',
'pascalprecht.translate',
'ui.bootstrap'
])
// constants
.constant('translations', config.translations)
// config
.config([
'$locationProvider',
'config.BASE_PATH',
providers.locationProvider
])
// services
.factory(
'restClient',
['$resource', services.restClient]
)
// controllers
.controller(
'PlaceholderController',
[controllers.PlaceholderController]
)
;
}
))(
angular,
// config
{
menu: require('./config/menu').config
...
}
},
// loaders
{
localeLoader: require('./config/locale-loader')
},
// controllers
{
PlaceholderController: require('./modules/placeholder/placeholder-controller')
},
// services
{
restClient: require('./services/restClient')
},
//providers
{
locationProvider: require('./config/location-provider')
}
);
It turned out to be there the whole time. Since the app does not invoke restClient.js in the browser, I was only seeing the module invoked in test. The test runner wasn't properly set up for $resource, and $resource needed to be injected into the module by the test. Thanks to everyone who took the time to read and investigate. I got caught up on the app.js file, because it is so unconventional, but turns out the whole file is legit.
io with my own angular service. I'm using yeoman and angular workflow: http://yeoman.io/ I need to make io recognised by karma so the test does not fail?
'use strict';
angular.module('publicApp')
.factory('socket', function ($rootScope) {
var socket = io.connect();
return {
on: function on(eventName, callback) {
socket.on(eventName, function () {
var args = arguments;
$rootScope.$apply(function () {
callback.apply(socket, args);
});
});
},
emit: function emit(eventName, data, callback) {
socket.emit(eventName, data, function () {
var args = arguments;
$rootScope.$apply(function () {
if (callback) {
callback.apply(socket, args);
}
});
});
}
};
});
angular.module('publicApp')
.controller('MainCtrl', function ($scope, socket) {
$scope.awesomeThings = [
'HTML5 Boilerplate',
'AngularJS',
'Karma'];
socket.on('person:added', function (data) {
$scope.person = data;
});
});
angular.module('publicApp', [])
.config(function ($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.otherwise({
redirectTo: '/'
});
});
'use strict';
describe('Controller: MainCtrl', function () {
// load the controller's module
beforeEach(module('publicApp'));
var MainCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));
it('should attach a list of awesomeThings to the scope', function () {
expect(scope.awesomeThings.length).toBe(3);
});
});
io is part of window, I've tried using angulars $window object but had no luck. The error I'm getting from karma is:
Running "karma:unit" (karma) task
WARN [karma]: Port 8080 in use
INFO [karma]: Karma v0.10.2 server started at http://localhost:8081/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/michaeljames/Documents/Projects/StackOverflow/public/test/mock/**/*.js" does not match any file.
INFO [Chrome 29.0.1547 (Mac OS X 10.8.2)]: Connected on socket LmbsWIC-97zMEi76FmiE
Chrome 29.0.1547 (Mac OS X 10.8.2) Controller: MainCtrl should attach a list of awesomeThings to the scope FAILED
ReferenceError: io is not defined
at Object.$get (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/scripts/services/socket.js:5:16)
at Object.invoke (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:3000:28)
at /Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:2838:37
at getService (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:2960:39)
at invoke (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:2978:13)
at Object.instantiate (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:3012:23)
at /Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:4981:24
at null.<anonymous> (/Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:14:16)
at Object.invoke (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular/angular.js:3000:28)
at workFn (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular-mocks/angular-mocks.js:1795:20)
Error: Declaration Location
at window.jasmine.window.inject.angular.mock.inject (/Users/michaeljames/Documents/Projects/StackOverflow/public/app/bower_components/angular-mocks/angular-mocks.js:1781:25)
at null.<anonymous> (/Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:12:14)
at /Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:3:1
TypeError: Cannot read property 'length' of undefined
at null.<anonymous> (/Users/michaeljames/Documents/Projects/StackOverflow/public/test/spec/controllers/main.js:20:31)
Chrome 29.0.1547 (Mac OS X 10.8.2): Executed 1 of 1 (1 FAILED) ERROR (0.306 secs / 0.067 secs)
Warning: Task "karma:unit" failed. Use --force to continue.
Aborted due to warnings.
I'd mock the entire socket service, since this is a means of going to some sort of server and these unit tests should be about testing your UI code only (the reason for $httpBackend in ngMock).
Here are some clever guys that figured it out:
https://github.com/btford/angular-socket-io-seed/issues/4#issuecomment-14505212.
In your karma.config.js files section inject the server side socket.io.js
files: [
'test/unit/**/*.js',
'any/other/included/files/*.js',
'http://localhost:8080/socket.io/socket.io.js' //just only inject it
],