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!
Related
when I have an module error injection, the message is not readable, is probably double escaped like in picture:
What I need to solve, is not injection problem (which is solved), but unreadable message, with double escaping.
module.config code:
angular.module("App").config(["$compileProvider", "$locationProvider",
"$injector", function ($compileProvider, $locationProvider, $injector) {
$compileProvider.debugInfoEnabled(true);
$locationProvider.html5Mode(false).hashPrefix('!');
//compatibility with angular 1.6;
if ($compileProvider.preAssignBindingsEnabled) compileProvider.preAssignBindingsEnabled(true);
}
Can you please add snip of code here.
May be problem is with ngStorage service you are trying to add here.
use ngstorage as below
var myApp = angular.module('app', ['ngStorage']);
myApp.controller('Ctrl1', function($scope, $localStorage){
})
As i see your module should have empty dependencies injected as follows,
angular.module("App",[])
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) { ... }]);
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);
};
});
nHello,
I am trying to use parameters in my router as follows :
my url call in my html file:
Edit
And my router :
packApp
.config(['$routeProvider', '$httpProvider', '$translateProvider', '$stateParams',
function ($routeProvider, $httpProvider, $translateProvider, $stateParams) {
$routeProvider
.when('/itemlist/:listId', {
templateUrl: 'views/itemlists.html',
controller: 'ItemlistController',
resolve:{
resolvedHikelist: ['Hikelist', function (Hikelist,$stateParams) {
return Itemlist.get({id: $stateParams.listId});
}]
}
})
}]);
But when i run my app, I have this error :
Error: [$injector:unpr] Unknown provider: $stateParams
Do you know where it can come from?
Thank you.
You have included or using both ui-router and angularjs standard $route service which are incompatible as both do the same thing. You would have to choose one of them.
See documentation on ui-router to understand how routes are setup if you go the ui-router way.
Else look at $routeProvider documentation and use $routeParams instead of $stateParams
Update: Based on the comments, the issue is that config method cannot be injected with services but only provider, so you cannot inject $routeParams in .config method so remove from there.
If you want to inject routeparams use
resolvedHikelist: ['Hikelist','$routeParams', function (Hikelist,$routeParams) {
return Itemlist.get({id: $routeParams.listId});
}]
If you use $stateParams in ItemlistController don't forget to inject it to that controller as well.
I'm having troubles using the ui-router plugin of AngularJS:
angular.module('myApp', []).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
});
}])
I then get this error at startup:
Unknown provider: $stateProvider
I've included the javascripts in this order:
<script src="/Scripts/libs/angular/angular.js"></script>
<script src="/Scripts/libs/angular/angular-resource.js"></script>
<script src="/Scripts/libs/angular/angular-ui-states.js"></script>
What could be the issue ?
[EDIT]
I've got rid of the error message by adding 'ui.compat' as a dependency of myApp. I saw that in the sample code of ui-router but nowhere in the documentation. What is this about ?
Nevertheless, it still does not work. I've added ui-view to a div in the application index file. But the page remains blank.
The following piece of code should do the job. At least in my case, so let me know if it works or not.
angular.module('myApp', ['ui.compat']).
config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
$stateProvider
.state('mandats', {
url: '/domiciliations/mandats',
templateUrl: 'domiciliations/views/mandats.html',
controller: 'mandatsCtrl'
});
}])
Now about your issue with the page being empty. For sure the URL you have in the browser is not matched with any defined in your state. Try this '#/domiciliations/mandats' in your browser and see if the view gets rendered appropriately. Not that you absolute url should be something similar with http://[HOST_NAME]/home.html#/domiciliations/mandats.
You just need to include ui-router module as dependency.
like following
angular
.module('myApp', ["ui.router"])
.config(['$routeProvider', '$stateProvider', function($routeProvider, $stateProvider) {
...
}]);
Including the angular-ui v0.0.2 will fix the problem.