AngularJs Unknown provider error when using angular.bootstrap() - javascript

This is my code:
myApp = angular.module("myApp", []);
myApp.config(['$routeProvider', '$controllerProvider',
'$compileProvider', '$filterProvider',
'routeResolver', myConfigFunction] );
angular.bootstrap(document, ['myApp']);
Whenever I do this, I get the error: Unknown provider: routeResolver from myApp
If however I move the angular.bootstrap before the config function, ie:
myApp = angular.module("myApp", []);
angular.bootstrap(document, ['myApp']);
myApp.config(['$routeProvider', '$controllerProvider',
'$compileProvider', '$filterProvider',
'routeResolver', myConfigFunction] );
Then I don't get any errors, but the config function myConfigFunction is not called. (The function just logs a line to console).
What am I doing wrong?

I am not sure what routeResolver actually is (might be this?)
Since only providers can be injected into the config() block you also need to add the word provider so routeResolver becomes routeResolverProvider and the error will go away.
myApp.config(['$routeProvider', '$controllerProvider',
'$compileProvider', '$filterProvider',
'routeResolverProvider', myConfigFunction] );
Working example on jsfiddle

Related

Ionic/angularjs how to fix Cookie issue of unknown provider?

I am trying to user cookies but I get the following error.
ionic.bundle.js:25642 Error: [$injector:unpr] Unknown provider:
UserServiceProvider <- UserService <- AuthenticationService
I did the following:
1) mentioned this in my index.html
<script src="//code.angularjs.org/1.4.3/angular-cookies.js"></script>
2) in my app.js I added ngCookies
angular.module('app', ['ionic', 'app.controllers', 'app.routes', 'app.services', 'app.directives','app.filters','ngSanitize','ngCookies','base64'])
3) then I created a new service, i referenced it in my index.
<script src="js/authenticationService.js"></script>
4) I included $cookies in my authenticationService.js
(function () {
'use strict';
angular
.module('app')
.factory('AuthenticationService', AuthenticationService);
AuthenticationService.$inject = ['$http', '$cookieStore', '$rootScope', '$timeout', 'UserService','$cookies'];
function AuthenticationService($http, $cookieStore, $rootScope, $timeout, UserService,$cookies) {...
can someone help me with the error?
When I change the angular cookies version to 1.2.20, i get this error instead
ionic.bundle.js:25642 TypeError: $browser.addPollFn is not a function
at Object. (angular-cookies.js:60)
As stated above in the comments. In your authenticationService.js, you have this line AuthenticationService.$inject = ['$http', '$cookieStore', '$rootScope', '$timeout', 'UserService','$cookies'];. This means that there should be injectable components like services / factories / controllers available for Angular when this service is initialized.
In this case all components other than UserService are available either as a part of angular.js or as other packages like angular-cookies.js.
Can you add a definition for UserService.js as well then your app should work.

Dependency injection error in angular

I am getting Uncaught Error: [$injector:modulerr] in a very strange manner.
If I inject dependency in this manner it throws the above error.
'use strict';
var app = angular.module('myRoutes', ['ngRoute']);
app.config(['$routeProvider'], function ($routeProvider) {
});
But if I flip the above snippet in the below way, the error is gone.
'use strict';
var app = angular.module('myRoutes', ['ngRoute']);
app.config(function ($routeProvider) {
//no error
});
I am using Angular v 1.3.1
Scripts including order.
angular.js
angular-routes.js
myroutes.js
myCtrl.js
Considering the minification in production environment, I can't go with the second way.
You have not closed config inline array annotation function correctly
app.config(['$routeProvider'], function ($routeProvider) {
should be
// VVVVVVVVVV removed `]`
app.config(['$routeProvider', function ($routeProvider) {
}]); //<-- close it here
You didn't close it right.
'use strict';
var app = angular.module('myRoutes', ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
}]);
The recommended way of doing this is using the array notation.
Read more here: https://docs.angularjs.org/guide/di

.ns() undefined in google angular maps directive

I am trying to use the angular google maps directive with my app, but I keep getting an "undefined error"
This is my app.js
angular.module('app', ['cs'])
.config(['GoogleMapApiProvider'.ns(), function (GoogleMapApi) {
GoogleMapApi.configure({
// key: 'your api key',
v: '3.17',
libraries: 'weather,geometry,visualization'
});
}])
.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
//routes
}])
and my controller
angular.module('cs.Controllers')
.controller('MapController', ['$rootScope', '$scope', '$window', '$document', 'MenuService', 'GoogleMapApi'.ns(),
function($rootScope, $scope, $window, $document, menuService, GoogleMapApi) {
$rootScope.menuList = menuService.all();
}]);
What could be the problem
For others that got here that had added the missing dependency declaration, see: angular-google-maps , undefined is not a function
It looks like they've gotten rid of the ns() function, but haven't updated the documentation yet:
https://github.com/angular-ui/angular-google-maps/pull/872/
https://github.com/angular-ui/angular-google-maps/issues/821
Update all instances of 'string'.ns() to 'uiGmapstring' in your code and you should be good.
You're missing the dependency declaration in your app.
angular.module('app', ['google-maps'.ns(),'cs.Controllers']
Here's a plunker using one of the project's demo pages. I changed it to use the new provider.
http://plnkr.co/edit/eUbkv2qKu92T9iUp7yAF?p=preview

AngularJS TypeError: undefined is not a function on ng-view directive

I'm trying to wire up a simple AngularJS app and I cannot get past a undefined is not a function error on my view directive. The weird thing is that the first view actually loads up and is rendered to the directive but I am unable to navigate to my 2nd view. The controllers definitely aren't running. I'm not sure what's going on here. Any ideas?
Angular version: 1.2.26 (same error with 1.2.20)
Error
App Code
var app = angular.module('myApp', ['ngRoute', 'ngResource']);
app.controller('Home', ['$scope', function ($scope) {
console.log('Home controller hit.');
}]);
app.controller('About', ['$scope', function ($scope) {
console.log('About controller hit.');
}]);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider.when('/', { templateUrl: 'SiteAssets/views/home.html', controller: 'Home' })
.when('/home', { templateUrl: 'SiteAssets/views/home.html', controller: 'Home' })
.when('/about', { templateUrl: 'SiteAssets/views/about.html', controller: 'About' })
.otherwise({ redirectTo: '/' });
});
You need to inject $document into your controllers like this:
app.controller('About', ['$scope','$document', function ($scope, $document) {
$document.title = 'About Us';
console.log('About controller hit.');
}]);
It might be the $document that is throwing the error, as angular does not know what it is without the injection. However, the error for this issue would be an Error: Unknown provider:
This issue was caused by an error in a script within my Home View. I'm still having an issue with my second view loading up. Thanks to all who helped me on this issue.

Failed to instantiate module [$injector:unpr] Unknown provider: $routeProvider

I received this error upon upgrading from AngularJS 1.0.7 to 1.2.0rc1.
The ngRoute module is no longer part of the core angular.js file. If you are continuing to use $routeProvider then you will now need to include angular-route.js in your HTML:
<script src="angular.js">
<script src="angular-route.js">
API Reference
You also have to add ngRoute as a dependency for your application:
var app = angular.module('MyApp', ['ngRoute', ...]);
If instead you are planning on using angular-ui-router or the like then just remove the $routeProvider dependency from your module .config() and substitute it with the relevant provider of choice (e.g. $stateProvider). You would then use the ui.router dependency:
var app = angular.module('MyApp', ['ui.router', ...]);
adding to scotty's answer:
Option 1:
Either include this in your JS file:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular-route.min.js"></script>
Option 2:
or just use the URL to download 'angular-route.min.js' to your local.
and then (whatever option you choose) add this 'ngRoute' as dependency.
explained:
var app = angular.module('myapp', ['ngRoute']);
Cheers!!!
In my case it was because the file was minified with wrong scope. Use Array!
app.controller('StoreController', ['$http', function($http) {
...
}]);
Coffee syntax:
app.controller 'StoreController', Array '$http', ($http) ->
...

Categories