undefined is not a function when minified

[zachariahtimothy]

This works great when running code in dev mode, but when I run grunt (ngmin, uglify, etc), I receive the following error: undefined is not a function.

I have removed all references to growlNotifications througout my code, with the exception of my main angular module. When I remove growlNotifications from the main module, everything works fine.
If I skip ngmin and just uglify, I get
Uncaught Error: [$injector:modulerr] Failed to instantiate module choiceAdminApp due to: Error: [$injector:unpr] Unknown provider: a
I glanced at your source code and did not see any obvious offenders.
Any tips on getting growlNotifications working when ngmined and uglified?

[zachariahtimothy]

Also I have tried angular 1.3 beta, and angular 1.2.16 which act the same.

[jvandemo]

Hi @zachariahtimothy, we use the minified version in several projects without issues.

However, we use the minified version that comes with the package: dist/growl-notifications.min.js.

I assume that you are minifying dist/growl-notifications.js in your custom grunt task?

Is there a way for me to have a look at the actual page you are referring to so I can dig into it?

Thanks!

[zachariahtimothy]

Sorry for the delay, had to work on something else. This is a secure internal application so no link. What is interesting is if I replace the contents of dist/growl-notifications.js with the already minified version, it works just fine. Clearly the issue is with my uglify/usemin task, but I am pretty much using the standard angular-generator Gruntfile. Have you used this library with usermin instead of standard uglify?

[jvandemo]

I'm afraid not @zachariahtimothy, I only use the standard uglify.

Let me know if this causes further issues.

Thanks!!

[scorphus]

Hello, @jvandemo. I'm having a similar problem. Here is the Gruntfile.js. Please let me know if you need any further information.

Thanks.

[jvandemo]

This should all be fixed in v2.

[davisford]

+1 -- just discovered this the hard way. Using ng-min to minify all sources, and it is blowing up with

Error: [$injector:unpr] Unknown provider: tProvider <- t
http://errors.angularjs.org/1.3.0-build.3102+sha.a9371a1/$injector/unpr?p0=tProvider%20%3C-%20t
    at http://localhost:3000/vendors.min.js:1:697
    at http://localhost:3000/vendors.min.js:1:16989
    at Object.r [as get] (http://localhost:3000/vendors.min.js:1:16198)
    at http://localhost:3000/vendors.min.js:1:17086
    at r (http://localhost:3000/vendors.min.js:1:16198)
    at i (http://localhost:3000/vendors.min.js:1:16522)
    at Object.o [as instantiate] (http://localhost:3000/vendors.min.js:1:16668)
    at http://localhost:3000/vendors.min.js:2:2651
    at http://localhost:3000/vendors.min.js:1:26588
    at o (http://localhost:3000/vendors.min.js:1:1185)

I guess I'll try to minify the .min.js file instead. Would be great to see a hotfix for this on the regular .js file? I am on v 2.0.0

[jvandemo]

@davisford Thanks for the report, I have reopened the issue.

I will investigate it and update the code to fix it asap.

Will let you know when the fix is up so you can try again.

[davisford]

Thanks @jvandemo -- I am experimenting with it now to see if I can resolve it too. Will update you. This is the gulp task(s) I use to minify the production build:

gulp.task('vendors-dist', function () {
  var files = bowerFiles();
  var vendorJs = fileTypeFilter(files, 'js');
  var vendorCss = fileTypeFilter(files, 'css');
  var q = new queue({objectMode: true});
  if (vendorJs.length) {
    q.queue(gulp.src(vendorJs).pipe(dist('js', 'vendors')));
  }
  if (vendorCss.length) {
    q.queue(gulp.src(vendorCss).pipe(dist('css', 'vendors')));
  }
  return q.done();
});

This is called through:

/**
 * Concat, rename, minify
 *
 * @param {String} ext extension, e.g. 'css', 'js', etc.
 * @param {String} name file name, e.g. 'vendor' || bower.name
 * @param {Object} opt options for plugins
 */
function dist (ext, name, opt) {
  isDistributionBuild = true;
  opt = opt || {};
  log('building dist for => ', ext, name, opt);
  return lazypipe()
    .pipe(plugins.concat, name + '.' + ext, {newLine: '\r\n'})
    .pipe(gulp.dest, './dist/app')
    .pipe(opt.ngmin ? plugins.ngmin : noop)
    .pipe(opt.ngmin ? plugins.rename : noop, name + '.annotated.' + ext)
    .pipe(opt.ngmin ? gulp.dest : noop, './dist/app')
    .pipe(ext === 'js' ? plugins.uglify : plugins.minifyCss)
    .pipe(plugins.rename, name + '.min.' + ext)
    .pipe(gulp.dest, './dist/app')();
}

// build distribution for production
gulp.task('dist', ['clean', 'server-dist', 'jade-dist', 'vendors-dist', 'assets-dist', 'styles-dist', 'bootswatch-dist', 'scripts-dist'], function () {

  return gulp.src('./src/app/index.jade')
    // inject vendors.min.js, vendors.min.css into index.jade
    .pipe(plugins.inject(gulp.src('./dist/app/vendors.min.{js,css}'), {ignorePath: 'dist/app', starttag: '<!-- inject:vendor:{{ext}} -->'}))
    // inject our .js, .css into index.jade
    .pipe(plugins.inject(gulp.src('./dist/app/' + bower.name + '.min.{js,css}'), {ignorePath: 'dist/app'}))
    // write to dist/app
    .pipe(gulp.dest('./dist/app'));
});

I know that's a lot to try to un-wrangle, but it has been working for me up to this point. Investigating...

[davisford]

And this is the jade I have on index.jade

    growl-notifications
    div(ng-repeat='(id, n) in notifications track by id', class='growl-container')
      growl-notification(ng-class="{'success': n.type === 'success', 'warning': n.type === 'warning', 'error': n.type === 'error', 'growl': true}", ttl='n.ttl || 5000')
        i.fa.fa-exclamation-triangle(ng-if="n.type === 'error'")
        p {{n.msg}}

[davisford]

More info, when the dist build is made, and I trigger a notification, I notice that it does not insert within the <growl-notifications> element, but hangs as a sibling.

This is of course, accompanied by the errors thrown (listed above about provider) -- likely the cause of the misplacement, since the directive is responsible for placing the child elements in <growl-notifications>

This is what it looks like when I run un-minified:

[davisford]

SOLVED -- the issue ended up being tooling: ng-min vs. ng-annotate, refer to this thread for comparison

Running both tools and comparing output: the main difference was in the directive growlNotification, which defines a controller property.

Here is the ng-min version:

controller: function (e, r) {
  this.timer = null, thos.remove = function () { t.leave(r), this.timer && this.timer.cancel && this.timer.cancel() }
},

Here is the ng-annotate version:

controller: ["$scope", "$element",
  function(e, r) {
     this.timer = null, this.remove = function() {
        t.leave(r), this.timer && this.timer.cancel && this.timer.cancel()
     }
  }
],

Hope this helps somebody -- I burned half a day on this one, unfortunately.

[jvandemo]

Thank you @davisford, your efforts are much appreciated!

I will update the repository tomorrow and release it as a fix.

Thanks again!!