OK I'm officially bald now, after having been streching my hair out with this infamous problem: The minfied AngularJS app just doesn't work, with this error thown out:
Error: [$injector:unpr] Unknown provider: aProvider <- a
http://errors.angularjs.org/1.2.6/$injector/unpr?p0=aProvider%20%3C-%20a
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:11492
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26946
at Object.c [as get] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26250)
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:27041
at c (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26250)
at Object.d [as invoke] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:26496)
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:9:910
at Object.f [as forEach] (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:4:11927)
at http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:9:856
at j (http://localhost/my-app/dist/scripts/1bde0e2e.vendor.js:5:27235)
Lots of other people had this problem as well, but looks like it could be fixed by declaring dependencies as an array instead of bare function parameters, like this:
angular.module('my-app').controller('LoginCtrl', [ '$scope', 'HttpService', function($scope, HttpService) { ... }]);
instead of this:
angular.module('my-app').controller('LoginCtrl', function($scope, HttpService) { ... });
But it doesn't work in my case. I checked all of my scripts (coffee and generated javascripts as well), they all use the proper array-style declaration.
The problem doesn't come from extra packages apparently. I tried moving all extra package references out of <!-- bower:js --> block (so that they are not minified by grunt), yet the problem still remains. Which means, it's my code to blame... But then again, I've tried the (seems to be) only fix available, to no avail.
Any hint, even on how to properly debug this?
Thanks in advance!
Finally I've found the problem. And yes, it's a DI bug which I missed.
To all who may be suffering from the same headache: array-format declaration must be done in $routeProvider's resolve options as well. In my case (CoffeeScript ahead):
app.config (['$routeProvider', ($routeProvider) ->
$routeProvider
.when '/',
templateUrl: 'views/main.html'
controller: 'MainCtrl'
resolve:
groups: ['GroupService', (GroupService) -> # I MISSED THIS
return GroupService.getAll()
]
entries: ['EntryService', (EntryService) -> # AND THIS
return EntryService.getAll()
]
# ...
])
Hope this helps!
This behaviour could come if you use implicit injection, instead of explicit declaring your dependencies. In my experience I faced this kind of problem with particular kind of Angular.js services that return instantiable class (for example to create abstract controller Classes or some other particular cases).
For example: AbstractBaseControllerClass
During minification I had the same problem. I solved using internal declaration of dependency injection.
Hope this helps
For the ones that doesn't like CoffeeScript.
I just took some of my code and put it in.
$stateProvider
.state('screen', {
url: '/user/',
templateUrl: 'user.html',
controller: 'UserController',
controllerAs: 'user',
location: "User",
resolve: ['$q', 'UserService', '$state', '$timeout', authenticateUser
]
})
function authenticateUser($q, UserService, $state, $timeout) {
UserService.getLoginStatus().then(function () {
if (UserService.user) {
console.log("is user");
return $q.when();
} else {
console.log("not user");
$timeout(function () {
// This code runs after the authentication promise has been rejected.
// Go to the log-in page
$state.go('login')
});
return $q.reject()
}
});
}
Related
I am having a problem with Angular JS receiving an error
jquery.js:7993 Uncaught Error: [$injector:modulerr] Failed to instantiate module application due to:
Error: [$injector:nomod] Module 'application' 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.
my controller is controller.js as follows
angular.module('application') .controller( 'controller', [ '$scope', 'service', '$uibModal', '$uibModalStack','$rootScope', function($scope, service, $uibModal, $uibModalStack,$rootScope) {}]);
and my service is service.js as follows
angular.module('application').service('service',
[ '$resource', function($resource) {
var requstService = $resource('test', {}, {
});
return requstService;
} ]);
when i load the view page it running perfectly but when i click again on site link it showing above error.Please help.
Your controller should be,
angular.module('siteApplication',[]) .controller( 'siteController', [ '$scope', 'siteService', '$uibModal', '$uibModalStack','$rootScope', function($scope, siteService, $uibModal, $uibModalStack,$rootScope) {
your module is missing []
your controller should be like:
angular.module('siteApplication',[])
also did you not paste the ending part of the controller i.e } ]);
on purpose ?
Use [] in your controller to create module like this.
angular.module('moduleName', [])
and use this in your html page like ng-app="moduleName"
and add dependency js file related to $uibModal.
I have no trouble injecting things like $scope and $location and $routeProvider, why is $compileProvider different?
Based on this answer, I understand that I have to instruct angular to not prefix certain links (sms in my case), but I can't apply the answer in my project. It says I should add this:
angular.module('myModule', [], function ($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);
});
But the chrome console says:
"angular.js:68 Uncaught Error: [$injector:unpr] Unknown provider:
$compileProviderProvider <- $compileProvider"
That "provider-provider" thing made me think that the real name of the service is just $compile (and that angular is tacking on the "provider" suffix:
angular.module('myModule', [], function ($compile) {
$compile.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);
});
But then, predictably, I guess, I get:
angular.js:13550 TypeError: $compile.aHrefSanitizationWhitelist is not a function
That's because you have to add it as a config:
angular.module('myModule').config(['$compileProvider',
function($compileProvider) {
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);
}
]);
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ngCordova', 'ngCookies'])
.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleLightContent();
}
});
})
.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('HomePage', {
url: '/HomePage/:id',
templateUrl: 'templates/HomePage.html',
controller: 'HomePageCtrl'
})
.state('login', {
url: '/login',
templateUrl: 'templates/Login.html',
controller: 'LoginCtrl'
});
$urlRouterProvider.otherwise('/login');
});
controllers.js
angular.module('starter.controllers', [])
.controller('LoginCtrl', function ($scope, LoginService, $ionicPopup, $state, $location, $http, $cookieStore) {
$cookieStore.put('mycookie', 'cookie value');
var favoriteCookie = $cookieStore.get('mycookie');
alert(favoriteCookie);
})
Question:
I am new for Angular JS Ionic.I am trying to use cookie in angularjs.
When i use $cookieStore
I get below exception:
Exception:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ngCookies due to:
Error: [$injector:nomod] Module 'ngCookies' 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.
I added ngCookies to angular.module however it did not work for me.
Where i miss exactly ? How can i use cookie in angular js.
Any help will be appreciated.
Thanks.
I find that $cookies is not working in an Cordova/Phonegap app since the pages are served as a file URL. In an normal desktop browser it is also not working if you serve the pages from the filesystem - it's working when served via a server or localhost.
So I get to the assumption that angular $cookies don't work for Cordova apps.
Maybe theres a workaround for that? I just don't know, maybe someone nows an answer.
probably you have missed to add angular-cookies.js file
If so add it.
My angularjs example app is running fine in my netbeans ide based local server. But when I moved the application to nginx server it gives me the following error in the browser.
Error: [$compile:tpload] Failed to load template: views/login.html
http://errors.angularjs.org/1.3.15/$compile/tpload?p0=views%2Flogin.html
at REGEX_STRING_REGEXP (angular.js:63)
at handleError (angular.js:16133)
at processQueue (angular.js:13248)
at angular.js:13264
at Scope.$get.Scope.$eval (angular.js:14466)
at Scope.$get.Scope.$digest (angular.js:14282)
at Scope.$get.Scope.$apply (angular.js:14571)
at done (angular.js:9698)
at completeRequest (angular.js:9888)
at XMLHttpRequest.requestLoaded (angular.js:9829)
My app.js
appModule
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/',
{
controller: 'loginController',
templateUrl: 'views/login.html'
})
.when('/main',
{
controller: 'dashboardController',
templateUrl: 'views/dashboard.html'
})
.otherwise({redirectTo: '/'});
}])
If you use node.js, try this
app.use(express.static(path.join(__dirname,'yourFolder/invoices')));
I came to find out that my issue was regarding Default $http Headers. I had just recently added a default header for Authorization, and a default Accept for application/json.
SURPRISE!!! It turns out that those $http headers are NOT only applied to $http calls you make to your endpoints... but also to every call made that pulls your Routing html files. And since html files will explode if using those headers, the whole thing fails.
I simply stopped setting the Default $http headers, and wrote a side service that my microservice calls would use since they need app/json. Then my Angular Routing calls went back to using standard headers.
I am using $routeProvider service in my angular js but problem is on templateURl it provides me error
from server here is the error what i received
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
angular.js:11594 Error: [$compile:tpload] Failed to load template: /Testing/TestCompleted
and here is my angular code for app.js
var app = angular.module('app', ['ngRoute']);
app.controller('CreateController', CreateController);
app.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: "/Testing/TestCompleted",
controller:"AppCtrl"
})
});
app.controller("AppCtrl",function ($scope) {
$scope.newmodel = {
}
});
I found the solution the view is only returned by server by using route we can only get html view not cshtml because that is provided when action is called.
The url is giving a ERROR 500. This is that there is something wrong in de code of the page. Please attach your debugger and go to the url "/Testing/TestCompleted" with a browser and check what is wrong.
Edit:
If the url is really the right one. Please try the following:
angular.module('app', ['ngRoute'])
.controller("AppCtrl",function ($scope) {
$scope.newmodel = {}
})
.config(function ($routeProvider) {
$routeProvider
.when('/',
{
templateUrl: "/Testing/TestCompleted",
controller:"AppCtrl"
})
});
So that the controller is registerd before you do your config as in the example from Angular (https://docs.angularjs.org/api/ngRoute/service/$route).
The address of the template is likely wrong. I never had to use a format such as '/....' .
You probably want 'Testing/TestCompleted' if the directory Testing is at the root of your project (or './Testing/TestCompleted' both should work).
EDIT:
In any case you are probably using an html file for the template, with an extension .html . So use 'Testing/TestCompleted.html' for instance.