DirPagination Unknown provider error [Minified issue] - angularjs

I have implemented DirPagination in angularJs and it is working fine locally, but when I deployed it on server, it throws error
[$injector:unpr]
I assume this is minified version related issue, as on server my all js files including controller and app are using minified version,
Implementation
Simply indluded dirPagination.js file and pagination html file
Then after
var App= angular.module('App', ['ngRoute', 'use', 'ngMessages', 'angularUtils.directives.dirPagination']);
Then
In View
<li dir-paginate="u in list| filter:q | itemsPerPage: pageSize" current-page="currentPage">
And it is working with non-minified version.
Update
I confirmed this is minified version issue, as when I removed app and controller js min to non min files, it is working.
Any help how to fix this

You probably didn't use the synthax to keep your code right when minified.
When minifying, all the injections are remplaced with shorter names.
Let's take an example.
myApp.controller('MyCtrl', function($scope, $location) { ... });
When minified will be transform to:
myApp.controller('MyCtrl', function(a, b) { ... });
As you can see, you lost the dependancies names.
JavaScript variables are renamed, but strings stay unchange. You should change it to this synthax (as advice by the Angular team):
myApp.controller('MyCtrl', ['$scope', '$location', function($scope, $location) { ... }]);

Related

debugging angular 'unknown provider'

I'm trying to get this fileuploader plugin working on a page (it's actually .cshtml, but hopefully that's not the source of the problem). I don't know how to debug angular references to find out what's missing.
The fileuploader does work in a different place in the app:
markup: Views\Shared_MasterClientLayout.cshtml
<script src="#Html.GetContentPathAbsolute()/Content/lib/angular-file-upload/angular-file-upload.min.js"></script>
<body id="ng-app" ng-app="clientPortal"
controller: www\public\app\disabilities\disabilities.app.js
(function () {
'use strict';
var app = angular.module('disabilities', ['angularFileUpload']);
app.controller('disabilitiesController', ['$scope', '$rootScope', '$routeParams', '$fileUploader', disabilitiesController]);
function disabilitiesController($scope, $rootScope, $routeParams, $fileUploader) {
}
})();
But it does not work on my page:
markup: Views\Referral\ThankYou.cshtml
<script src="#Html.GetContentPathAbsolute()/Content/lib/angular-file-upload/angular-file-upload.min.js"></script>
<div id="ng-app" ng-app="cmorApp">
controller: ReferralContent\app\CreateReferral\cm.attachmentUploadCtrl.js
var AttachmentUploadCtrl = ['$scope', '$http', '$fileUploader',
function ($scope, $http, $fileUploader) {
I get
Uncaught Error: [$injector:unpr] Unknown provider: $fileUploaderProvider <- $fileUploader
I can see on the Sources tab in Dev tools that angular-file-upload-min.js has been loaded.
The worst part about this is a lack of consistency of implementation across pages that the various components are spread across. I know of no way to debug angular empirically.
I literally have no way to tell which of several apps is running, which controller is attached to a page and which is referring to what page.
Is there any way of inspecting a page and exposing what objects are loaded on it?
Can I write console.log(ng-app) and have it return 'cmorApp'?
Or console.log(app.controller) and have it return 'AttachmentUploadCtrl'?

angular multiple dependency injection

This is a general dependency injection question. Obviously I am doing it wrong.
I am trying to get angular-xeditable working in my app.
https://vitalets.github.io/angular-xeditable/
I've installed it using bower, and added the appropriate script link to my head.
Now I'm trying to inject it.
The docs say
var app = angular.module("app", ["xeditable"]);
so, in my app: I do this:
portalApp.controller('portalController',
['$scope', '$http','$filter', 'xeditable',
function($scope, $http, $filter, xeditable) {
but I get the provide error, meaning it can't find xeditable.
angular.js:13642Error: [$injector:unpr] http://errors.angularjs.org/1.5.6/$injector/unpr?p0=xeditableProvider%20%3C-%20xeditable%20%3C-%20portalController
What am I doing wrong?
OK, duh. It should be
var portalApp = angular.module("portalApp", ['xeditable']);
portalApp.controller('portalController', ['$scope', '$http','$filter', function($scope, $http, $filter) {
I'm still getting lots of errors, but at least not that one.

Using ngCookies in a ionic project

I am trying to include ngCookies in a project. The angular cookies library is included in my index.html after the ionic.bundle.
I can see on the network tab of the developer tools that it is actually loading. Angular doesn't show any error when loading the page, as it usually does when a module is missing. The problem is that, when in my code I try to access the functions of the $cookies service, the $cookies variable is actually pointing to an empty object.
Here are some relevant code snippets:
On the definition of my app.js
angular.module('myApp', [
'ionic',
'ngCookies',
'ngMessages',
'rt.eventemitter',
'myApp.views']);
On my factory:
angular.module('myApp.views')
.factory('UserStore', ['$rootScope', '$q', '$cookies', '$timeout',
function($rootScope, $q, $cookies, $timeout){
var user = {};
function setSessionId(sessionId){
console.log(">> setting sessionId to:",sessionId);
user.sessionId = sessionId;
$cookies.put('sessionId', user.sessionId);
}
return{ setSessionId:setSessionId}
}
]);
In this case, when I try to call the setSessionId method I get an error that $cookies.put is not a function since, as I mentioned above, $cookies is just an empty object.
Any Ideas?
it depends on which angular version you use!
they changed a lot in angular 1.4.. in angular 1.3 when you set a cookie you can just assign it:
$cookies.sessionId = user.sessionId;

Angularjs - factory not working in an external file

So this issue only seems to happen when I move a factory to an external file, and I'm really confused as to why. Extracting directives, controllers, and filters to external files does not break my app. I'll show what I'm doing below.
I create my app.js, name the module, inject my various dependencies, continue with my config, and create my factory.
---- app.js -----
angular
.module('myApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',])
.config(function ($routeProvider, $locationProvider, $httpProvider) { ... })
.factory('myFactory', function($http){ ... });
// also works with .factory('myFactory', ['$http', function($http) { ... }]);
I have no issue accessing my factory in my controller this way.
---- controller.js ------
angular.module('myApp')
.controller('myController', function(myFactory){
myFactory.method() // works just fine
});
Alternatively :
---- controller.js ------
angular.module('myApp')
.controller('myController', [ 'myFactory', function(myFactory){
myFactory.method() // also works just fine
}]);
Not sure which syntax is "right" but I try both always and they both work just fine.
...Now, if i remove .factory from app.js and move it to myFactory.js (which is linked in index.html) is where the problem happens.
----- myFactory.js -----
angular.module('myApp')
.factory('myFactory', function($http) { ... }); // also attempted with [ ] syntax
The app now fails to load after refresh, and I receive a pnpr error.
I've attempted:
Removing $http from the factory, and also leaving the factory empty to ensure I wasn't returning bad code from within the factory.
Changing myFactory.js's angular.module to read
angular.module('myFactory', []);
angular.module('myFactory').factory('api', [ '$http', function($http){ ... });
then in app.js injecting 'myFactory' as a dependency... I get some different error all together:
Uncaught Error: [$injector:modulerr] Failed to instantiate module crema.app due to: Error: [$injector:modulerr] Failed to instantiate module myFactory due to: Error: [$injector:nomod] Module 'myFactory' 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. errors.angularjs.org/1.3.15/$injector/nomod?p0=myFactory
Loading myFactory.js 1st, 2nd, 9th, last... in index.html, thinking maybe the load order might matter? It did not.
And various other minor syntactical changes. Nothing seems to really help, or change my error.
Not really sure what else to try. Like I said, the factory functions as intended when inside of app.js, and all my controllers, directives, etc. work just fine in external files... just not this factory. Any help would be appreciated.
The problem is that AngularJS does not allow you to register factories after its bootstrap. In order to make it work, you should do the following in your config function:
var app = angular.module('app', [...]);
app.config(function($provide) {
app.factory = function(name, factory) {
$provide.factory(name, factory);
};
});

angularjs closure compiler ngRoute: Unknow Provider when minified

Yet another post about angularjs, minify and ngRoute...
However, I really have no idea why the minified code is failing while the normal version isn't:
I've isolated the issue to this file (appRoutes.js) containing the appRoutes module.
Not Minified:
angular.module('appRoutes', ['ngRoute'])
.config(
['$routeProvider', '$locationProvider', '$httpProvider', '$logProvider',
function($routeProvider, $locationProvider, $httpProvider, $logProvider) {
$routeProvider.when('/', { ... });
$httpProvider.response... );
$locationProvider.html5Mode(true);
$logProvider.debugEnabled(true);
}])
.run(['$rootScope', '$http', function($rootScope, $http){ ... })]);
Minified
angular.module("appRoutes",["ngRoute"])
.config(
["$routeProvider","$locationProvider","$httpProvider","$logProvider",
function(a,d,e,f){
a.when("/",{
etc...
And I'm being given this error:
Unknown provider: aProvider <- a <- $http
Sorry, but I can't figure what the h*ll's wrong with that... ?
The only systematic issue is that the minified version "a" of $routeProvider is the source of the issue... it's just sometimes called b or c...
It works NOT minified, but doesn't work minified...
I tried without the inline annotation.
I tried to use Gulp Closure Compiler and the compiler.jar directly by command line.
I tried to change the order in which the modules are called.
I've got a file called app.js; it's the main angularjs file that calls all dependencies, and appRoutes is in it...
Thaks for your help!

Resources