After gulp minify I receive an error: Uncaught Error: [$injector:unpr] http://errors.angularjs.org/1.5.8/$injector/unpr?p0=nProvider%20%3C-%20n
What can cause this error? I use jScroll for automatic pagination and when I add another page I have to compile added items on the page. It works correctly when run gulp
, but after gulp --production
it doesn't works.
paginationCtrl.js
(function () {
'use strict';
app.controller('paginationCtrl', [
'$scope', '$alert', '$http', '$timeout', '$compile',
function ($scope, $alert, $http, $timeout, $compile) {
$scope.compileElements = function () {
$('.jscroll-inner').each(function () {
var content = $(this);
angular.element(document).injector().invoke(function($compile) {
var scope = angular.element(content).scope();
$compile(content)(scope);
$scope.$apply();
});
});
}
$(document).ready(function(){
$('.scroll-element').jscroll({
loadingHtml: "",
autoTrigger: true,
nextSelector: '.scroll-pagination',
contentSelector: '.scroll-element',
callback: function() {
$('ul.pagination:visible:first').hide();
$scope.$digest();
angular.element(document).ready(function () {
$scope.compileElements();
});
}
});
});
}]);
})();
gulpfile.js
var gulp = require('gulp');
var notify = require("gulp-notify");
var mainBowerFiles = require('main-bower-files');
var elixir = require('laravel-elixir');
require('laravel-elixir-livereload');
require('laravel-elixir-vueify');
gulp.task('bower', function() {
return gulp.src(mainBowerFiles())
.pipe(gulp.dest('resources/assets/js/vendor'))
.pipe(notify("Success: Bower Installments!"));
});
elixir(function(mix) {
mix.sass(['main.scss'], 'public/assets/css/main.css')
.scripts([
'resources/assets/js/vendor/jquery.min.js',
'resources/assets/js/vendor/angular.min.js',
'resources/assets/js/vendor/moment.min.js',
'resources/assets/js/vendor/jquery.pjax.js',
'resources/assets/js/vendor/jquery.timepicker.min.js',
'resources/assets/js/vendor/**/*.js',
], 'public/assets/js/vendor.js')
.scriptsIn('resources/assets/js/app', 'public/assets/js/app.js')
.version([
'assets/css/main.css',
'assets/js/vendor.js',
'assets/js/app.js',
])
.livereload([ 'app/**/*', 'public/build/**/*', 'resources/views/**/*' ]);
});
You have this piece of code:
angular.element(document).injector().invoke(function($compile) {
var scope = angular.element(content).scope();
$compile(content)(scope);
$scope.$apply();
});
before minification you're asking angular to inject $compile
. After minification you're asking Angular to inject n
after which Angular throws an error Unknown provider: nProvider
.
Easiest fix is using the array notation for minification safe dependency injection. So that piece of code becomes:
angular.element(document).injector().invoke(['$compile',function($compile) {
var scope = angular.element(content).scope();
$compile(content)(scope);
$scope.$apply();
}]);