CODEWITHSUNDEEP
javascriptangularjsdependency-injectiongulpbundling-and-minification
Marco Aurélio Deleu
Marco Aurélio Deleu

Reputation: 4367

Gulp uglify causing AngularJS to not solve provider

Although I am familiar with the uglify problem when using Angular, I started running into this problem again now with a specific directive, even though I am using the array-like style for dependency declaration:

angular.module('app.directives').directive('domainImg', ['Endpoint', function (Endpoint) {
    return {
        restrict: 'A',
        controller: function ($scope, $element, $attrs) {
            $attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
        }
    };
}]);

My main file declares the modules separately.

angular.module('app.providers', []).constant('Endpoint', 'http://www.multzfidelidade.com.br/sistema/');
angular.module('app.tools', []);
angular.module('app.services', []);
angular.module('app.resources', []);
angular.module('app.controllers', []);
angular.module('app.directives', []);
angular.module('App', ['ui.mask', 'templates', 'app.providers', 'app.tools', 'app.services', 'app.resources', 'app.controllers', 'app.directives'])

Now, when I use this directive, I get the unknown eProvider <- e problem

Error: [$injector:unpr] http://errors.angularjs.org/1.4.8/$injector/unpr?p0=rProvider%20%3C-%20r

I'm using like this:

<img class="prize-directive-image" ng-src="{{prize.image}}" domain-img/>

If I remove the domain-img tag, the problem goes away. Also, if I just don't uglify the code, the problem also goes away.

gulp.task('default', function () {
    // Concat all JS files into a single one called app.min.js
    gulp.src(['public_html/js/*.js', 'public_html/js/**/*.js', 'public_html/*.js', 'public_html/modules/**/*.js', '!public_html/app.min.js'])
        .pipe(concat('app.min.js'))
        // .pipe(uglify()) // Without this line the problem doesn't happen
        .pipe(gulp.dest('dist/'));

    // Concat all HTML directives into a single one
    gulp.src('public_html/js/**/**/*.html')
        .pipe(htmlmin({collapseWhitespace: true}))
        .pipe(templateCache('templates.min.js', {standalone: true}))
        .pipe(gulp.dest('dist/'));
})

I was hoping I could get some insight on where I could have gone wrong in this specific directive.

Thank you in advance.

Upvotes: 4

Views: 893

Answers (3)

Elger van Boxtel
Elger van Boxtel

Reputation: 1060

Or you can leave it just as you have it now and use GulpJS to do the annotation for you. In my project SkeletonSPA I do exactly the same.

I use the GulpJS plugin gulp-ng-annotate to do this for me. Your Gulp task looks will look like:

// require gulp-ng-annotate plugin
let ngannotate = require('gulp-ng-annotate');

// Concat all JS files into a single one called app.min.js
gulp.src(['public_html/js/*.js', 'public_html/js/**/*.js', 'public_html/*.js', 'public_html/modules/**/*.js', '!public_html/app.min.js'])
  .pipe(ngannotate({gulpWarnings: false})) // annotate angular DI
  .pipe(concat('app.min.js'))
  .pipe(uglify()) // do the minification
  .pipe(gulp.dest('dist/'));

This way you won't have to do it yourself and your Gulp task will do it for you ;-)

Upvotes: 1

Shashank Agrawal
Shashank Agrawal

Reputation: 25797

You need to change the syntax of controller of your directive like this:

controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
        $attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
    }]

Look at this for some more detail.

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

You missed to follow the inline array annotation of DI like for controller of your directive.

Code 

controller: ['$scope', '$element', '$attrs', function ($scope, $element, $attrs) {
      $attrs.$set('ngSrc', Endpoint + $attrs.ngSrc);
}]`

Upvotes: 3

Related Questions