angularjslaravelgulpangularjs-injector

angular injector() not working after gulp minify


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/**/*' ]);
});

Solution

  • 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();
    }]);