I followed all the steps to install angular-timer and it works correctly in the development build but when I try to do a production build (minified, concatinated) I get an
Uncaught Error: [$injector:modulerr]
Any thoughts?
please just make sure that you are defining your controllers "safe for Minification", you can either definde your dependencies using the $inject service or you can define your dependencies as text in your controller definitions.
I'm quoting the documentation here:
Since Angular infers the controller's dependencies from the names of
arguments to the controller's constructor function, if you were to
minify the JavaScript code for your controller, all of its
function arguments would be minified as well, and the dependency
injector would not be able to identify services correctly.
Using $inject:
function myCtrl($scope, $http) {...}
myCtrl.$inject = ['$scope', '$http'];
app.controller('myCtrl', myCtrl);
Inline annotation
function myCtrl($scope, $http) {...}
app.controller('myCtrl', ['$scope', '$http', myCtrl]);
Related
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.
I don't know why I am getting this error.
The error I am getting is Error: [ng:areq] Argument 'PreviewController' is not a function, got undefined.
Can someone help me out with this?
Also is there any other way to inject services in a controller?
My code is as follows:
(function() {
'use strict';
angular
.module('MyModule')
.controller('PreviewController' ['$scope','Service1','Service2',
function($scope, $http) {
$http.get("https://api.myjson.com/bins/30e2a")
.success(function(response) {
//Dummy data taken from JSON file
$scope.firstName = response.firstName;
$scope.lastName = response.lastName;
$scope.dateAdded = response.dateAdded;
});
//Functions have been defined. Functionality to be added.
$scope.cancelAndBack = function() {
window.history.back();
};
}]);
}());
You are defining you module incorrectly.
`angular.module('MyModule')`
Is looking for an already initialised module called 'MyModule'.
If you are creating a module from scratch you need to empty array. This would be more module dependencies.
`angular.module('MyModule', [])`
This is how angular knows the difference between, 'create an app' and 'get me an app'.
Finally services. Your using angulars array notation. That is so you can minify your javascript.
angularjs injection system works by name, that's how it can find the dependencies your require, that's also why you can list them in any order you like. However minifying your code changes your variable names and so breaks angular's injection.
The solution is to provide an array of strings telling angular the services you wish to inject and the order they are injected in.
So your array values and properties passed into your controller function must match.
Correct:
.controller('test', ["$scope", "$http", "myService", function( $scope, $http, myService){}]);
Incorrect: (myService won't be defined as its missing from the array)
.controller('test', ["$scope", "$http", function( $scope, $http, myService){}]);
I have been struggling to find a solution for this problem:
I am using Angular.js on my site.
I use CoffeeScript to write my JavaScript in Visual Studios 2012. When I save my CoffeeScript - both a minified and un-minified version of the JavaScript file is saved.
While using any minified version of JavaScript files on my webpage I keep getting this error:
Error: $injector:unpr
Unknown Provider
Unknown provider: nProvider <- n
This error results from the $injector being unable to resolve a required dependency. To fix this, make sure the dependency is defined and spelled correctly. For example:
If I don’t use the minified version everything works fine.
Here is how I use angular to declare my App in each JavaScript file
(function() {
var myApp;
myApp = angular.module("myApp", ['uploaddirective']);
myApp.controller("videoController", function($scope, $http, $compile) {
Can anyone help me to resolve this issue?
Use array notation for minification-safe dependency injection:
myApp.controller("videoController", ['$scope', '$http', '$compile', function($scope, $http, $compile) {
Another option is to use build task to automatically annotate injections for you:
// #ngInject
myApp.controller("videoController", function($scope, $http, $compile) {
You will need grunt or gulp plugin for this, like ngAnnotate.
https://docs.angularjs.org/guide/di
When you minifying the above code you will get something like
a.controller("videoController", function(x, y, z) {...
note that $scope, $http, $compile are replaced with x, y, z.
So when angular starts to execute Controller can't find the injectors because $scope, $http, $compile are replaced with x, y, z and there are no inject-able providers as x, y or z, so angular will trigger a error saying Unknown Provider.
solution 1
you can follow Inline Array Annotation as,
myApp.controller("videoController", ['$scope', '$http', '$compile', function($scope, $http, $compile) {...
after minifying this you will get something like
a.controller("videoController", ['$scope', '$http', '$compile', function(x, y, z) {...
minifying process doesn't effect on strings, here angular will use a array with strings that will match the providers. Here angular will match the x with $scope and so on.
solution 2
$inject Property Annotation
var MyController = function($scope, $http, $compile) {
// controller function ...
}
MyController.$inject = ['$scope', '$http', '$compile'];
myApp.controller("videoController", MyController);
additionally check ng-annotate
in my ionic app I want to use cordova-plugin-video-editor plugin but I don't know how to inject it on my controller.
I added the plugin on the terminal like this:
ionic plugin add https://github.com/jbavari/cordova-plugin-video-editor.git
And it is injected with the controller like this (last one):
.controller('VideoCtrl', ['$scope', '$ionicPlatform', '$ionicModal', '$cordovaDialogs', '$cordovaCapture', '$cordovaFileTransfer', '$sce', 'VideoService', '$q', '$http', '$ionicScrollDelegate', '$timeout', '$location', 'VideoEditor', function ($scope, $ionicPlatform, $ionicModal, $cordovaDialogs, $cordovaCapture, $cordovaFileTransfer, $sce, VideoService, $q, $http, $ionicScrollDelegate, $timeout, $location, VideoEditor) {
I get this error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module starter.controllers due to:
Error: [$injector:modulerr] Failed to instantiate module VideoEditor due to:
Error: [$injector:nomod] Module 'VideoEditor' 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 am confused, I am using more plugins but all are official and I didn't have problems as I only had to do:
angular.module('starter.controllers', ['ngCordova'])
And in the html
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
Inside plugin folder there is a js file that has:
var exec = require('cordova/exec'),
pluginName = 'VideoEditor';
function VideoEditor() {
}
VideoEditor.prototype.transcodeVideo = function(success, error, options) {
exec(success, error, pluginName, 'transcodeVideo', [options]);
};
VideoEditor.prototype.createThumbnail = function(success, error, options) {
exec(success, error, pluginName, 'createThumbnail', [options]);
};
module.exports = new VideoEditor();
When I install the plugin should not this js content had gone somewhere in my www folder so then I can imported from html?
Remove the VideoEditor module in your controller configuration. because this VideoEditor have not any relation with angular.
Also you need refer the github document. They use it just like a jquery plugins. not a angular plugins. Does make sense? let me know, if not.
How do I implement it in Angular controller?
You can use it just like a javascript library.
I'm having an issue with angular minification when I release. I've redone my controller to have annotations as recommended, but still get the same error:
Error: Unknown provider: nProvider <- n
Here's my first few lines of code for the controller:
var app = angular.module('myApp', ['ngGrid', 'ui.bootstrap.dialog']);
app.controller('MyCtrl', ['$scope', '$dialog', '$http', function ($scope, $dialog, $http){
UPDATE: sorry, I found that there was another function I was using which was taking in $scope as parameter. That was causing the issue. I basically did the same thing to annotate its parameters, and now it works.