AngularJS unknown provider after code refactoring - angularjs

I have an app which worked great, until I decided to refactor the code and use Gulp for my project. Here is the error I get:
Error: [$injector:unpr] Unknown provider: _Provider <- _ <- utilsFactory <- storageService <- httpRequestInterceptor <- $http <- $templateFactory <- $view <- $state
Since I'm not sure how to read this error and if they all have an issue or if it's only one of them, here are the two places where I use some of these providers when I start my app:
app.run(function($rootScope, $state, storageService, modalsFactory, appFactory, _) { ... }
And:
angular.module("mediaControl").controller("loginCtrl", function ($state, $translate, authService, utilsFactory, appFactory, storageService) { ... }
In my index.html file, I have:
<!-- inject:js -->
<script src="src/mediaControl.js"></script>
...
<script src="src/login/providers/httpRequestInterceptor.service.js"></script>
...
<script src="src/common/providers/utils.factory.js"></script>
<script src="src/common/providers/storage.service.js"></script>
...
<script src="src/login/login.controller.js"></script>
...
<!-- endinject -->
What I checked/did:
Check if Gulp put all of the necessary js files in index.html and in the good order (seems ok to me)
Check the names of the providers (I didn't change them during the refactoring though)
Try to remove my custom providers from loginCtrl and app.run (I still have the same error when I'm doing this)
I read the documentation and some SO questions, but I don't see anything that I would do wrong, considering that my app worked before the refactoring (which consists in reorganizing my file structure, renaming the files, and starting to rewrite the code using ES6 standards). Any idea about what could be wrong here?

As noticed by #shaunhusain, the lodash provider was missing in my index.html. I fixed my Gulpfile so that the file is injected as well, and it works.

Related

Cannot load my ui-calendar module

When i try to load my ui-calendar in my angular.module i am getting Uncaught Error: Injector error. How will i include my ui-calendar. I am using npm install.
This is my error:
Uncaught Error: [$injector:modulerr]
at angular.js:38
at angular.js:4408
at n (angular.js:336)
at g (angular.js:4369)
at eb (angular.js:4294)
at d (angular.js:1655)
at yc (angular.js:1676)
at Zd (angular.js:1570)
at HTMLDocument.<anonymous> (angular.js:28683)
at j (jquery.js:3148)
This is my module were i am including ui-calendar:
var ebsapp = angular.module("ebs", ['ui.bootstrap', 'angular.filter', 'toastr', 'ui.calendar']);
Or is there any other script tags that needed to be included. if so please give me the script tags.
My injector error got resolved. I want to get a full calendar view.
I am using this div code:
<div ui-calendar ng-model="eventSources"></div>
How to get a simple calendar view??
Is these are the scripts i need to load ??
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
I tried to implement form https://jsfiddle.net/yy1rud17/326/ website where in i got the following out;
Whether i need to initialise my calendar??

Angularjs - Unknown provider: $cordovaGeolocationProvider

I am trying to use $cordovaGeolocation but it give below error. Any one can help?
"Error: [$injector:unpr] Unknown provider: $cordovaGeolocationProvider <- $cordovaGeolocation <- GeoCtrl
I used sample in here
You seem to be missing a little setup. First, download ngCordova.js and include it in your index.html right before all your Angular scripts. Then, include the 'ngCordova' dependency when you declare your app module like this: angular.module('yourAppName', ['ngCordova', ...])

ngDrive not defined?

This question is a follow up to Definition for gapi in an Angular controller? which is posted yesterday.
User pinoyyid pointed me to his git repo ngDrive (https://github.com/pinoyyid/ngDrive)
I was working through the quit start and ran into an error saying 'ngDrive' is not defined in my console.
This was the code that cause this error
angular.module('ngm.ngDrive')
.provider('OauthService', ngDrive.Config)
.config(function (OauthServiceProvider) {
OauthServiceProvider.setScopes('https://www.googleapis.com/auth/drive.file');
OauthServiceProvider.setClientID('2231299-2bvf1.apps.googleusercontent.com');
OauthServiceProvider.setTokenRefreshPolicy(ngDrive.TokenRefreshPolicy.ON_DEMAND);
OauthServiceProvider.setNoAccessTokenPolicy(999); // 0 = fail, > 0 = retry after x
});
Specifically the ngDrive.Config
I had no issue when injecting the service into my app.js file as shown below
angular
.module('App', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'ui.sortable',
'firebase',
'angular-toArrayFilter',
'ngm.ngDrive'
])
I have also placed the script tag for the library as specified:
<!-- build:js({.tmp,app}) scripts/scripts.js -->
<script src="bower_components/ngDrive/build/module.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/login_controller.js"></script>
<script src="scripts/controllers/view_resources_ctrl.js"></script>
<!-- endbuild -->
I'm not quite sure what I'm doing wrong here. I don't see anything in the guide that I might have accidentally skipped.
Thanks for your time.
I did bower install ngDrive --save, included <script src="../bower_components/ngDrive/build/module.js"></script> (my index.js is in an app folder) before app.js, injected the ngm.ngDrive, copy-pasted the .provider('OauthService', ngDrive.Config). Then I added into config,
OauthServiceProvider.setScopes('https://www.googleapis.com/auth/drive.file');
OauthServiceProvider.setClientID('2231299-2bvf1.apps.googleusercontent.com');
OauthServiceProvider.setTokenRefreshPolicy(ngDrive.TokenRefreshPolicy.ON_DEMAND);
OauthServiceProvider.setNoAccessTokenPolicy(999);
Nothing complained about ngDrive.Config. But I do get errors:
Failed to load resource: the server responded with a status of 404 (Not Found): http://localhost:3000/bower_components/ngDrive/build/module.js.map (resource that I did not explicitly request for loading)
OauthServiceProvider.setNoAccessTokenPolicy is not a function. (In 'OauthServiceProvider.setNoAccessTokenPolicy(999)', 'OauthServiceProvider.setNoAccessTokenPolicy' is undefined). (checked the source and It seems this method does not exist in the current version of the module)
I tried but can't reproduce your error.
The 'ngDrive' is not defined is caused by module.js failing to load. If you look at the network tab, you'll see a 404.
Also, there is a bug in the documentation, setNoAccessTokenPolicy is no longer a feature, so you should delete that line. Version 0.1.10 fixes the documentation.

Angular using ui.router injection issue

I have built a simple angular and am trying to implement ui-router and specifically, $UrlRouteProvier.otherwise to redirect to a certain url if something nonexistent is entered. I am getting the following exception when trying to load my page now and can't seem to find the error. All help is appreciated. Code and error below.
Angular app:
var app = angular.module('myApp', ['ui.router','ngAnimate', 'ui.bootstrap']);
app.config(['$urlRouterProvider', '$stateProvider', function($urlRouterProvider, $stateProvider){
$urlRouterProvider.otherwise('/browse/overview.html');
}])
error:
Failed to instantiate module myApp due to:
Error: [$injector:nomod] http://errors.angularjs.org/1.3.4/$injector/nomod?p0=gcIm...
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:6:416
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:21:334
at a (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:20:483)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:21:218
at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:35:76
at r (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:7:302)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:34:428)
at Lb (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:38:146)
at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js:17:339
note: everything works fine if I remove ui.router from the list of dependencies
It looks like you don't have ui-router code loaded. Try to include:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.18/angular-ui-router.js"></script>
Try writing your config line like this:
.config(function($stateProvider, $urlRouterProvider) {

grunt-html2js and injecting the 'templates-xxx' module (a dash in the module name)

With grunt-html2js I'm getting a views.js which contains:
angular.module('templates-dist', ['../views/attachment-modal.html', ...
...
angular.module("../views/attachment-modal.html", []).run(["$templateCache", function($templateCache) { ...
(etc. all the views)
I've added this module to my app.js, like this:
angular.module('myApp', [
'ngRoute',
'ui.bootstrap',
'templates-dist', // <--- there it is.
'ui.select']);
I want to add this module also to my routes.js, using array notation:
angular.module('myApp')
.config(['$routeProvider', 'templates-dist', function($routeProvider, X) { ... }
But, as you can see, I don't know how to do that, because of the "-" sign
Question: In the previous piece of code, what should I put in the X?
I think that putting templates-dist without quotes will be evaluated in javascript as a substraction
Also, bonus question: after injecting the templates-dist module, the loading of the views will automatically be from templateCache ?
There is no reason to add this to the config phase of your myApp module. There is no provider associated with templates-dist and it will throw an error because of that. You can inject it as a dependencies to a module like you did above
angular.module('myApp', [
'ngRoute',
'ui.bootstrap',
'templates-dist', // <--- there it is.
'ui.select']);
but you cannot do anything with it and therefore shouldn't include it in the config phase of your application.
In regards to your $templateCache cache question. I see in your example above you have
angular.module('templates-dist', ['../views/attachment-modal.html', ...
Usually with Grunt html2js it will create a module with dependencies of your templates as modules, i.e. attachement-modal.html and the module would look something like this:
angular.module("attachement-modal.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("step.html", "YOUR HTML HERE");
}]);
So yes that is now stored and served from $templateCache

Resources