When running the task with add and remove, an empty line is places before every $inject line.
Run the task 100 times (file watcher) and you will have 100 empty lines.

Hi,
As a grunt / angular newbie, I am struggling to set up ngAnnotate in my gruntfile. I have

ngAnnotate: {
      options: {
          // Task-specific options go here.
      },
      cdapp: {
        files: {
          'assets/js/app/app.min.js': [
            'assets/js/app/app.js',
            'assets/js/app/controllers.js',
            'assets/js/app/directives.js',
            'assets/js/app/filters.js',
            'assets/js/app/services.js'
          ]
        }
      }
    },

This works and outputs a single file when i use grunt ngAnnotate. However, it doesn't seem to be minified? (perhaps I am misunderstanding this plugin?)

Also, I cannot get this task to automate with grunt watch despite adding grunt.loadNpmTasks('grunt-ng-annotate'); with all the other tasks and adding 'ngAnnotate' in the Registered tasks

  grunt.registerTask('default', [
    'clean',
    'sass',
    'uglify',
    'ngAnnotate',
    'version'
  ]);
  grunt.registerTask('dev', [
    'watch'
  ]);

EDIT: I added

      angular: {
        files: [
          'assets/js/app/*.js'
        ],
        tasks: ['ngAnnotate']
      },

to watch: { and now this works correctly. (although I don'y know if it should be labelled as angular)

Thanks

Hey all, I'm hoping to get some help with a grunt build that is being aborted by ngAnnotate. Here is what I receive in terminal:

Running "ngtemplates:dist" (ngtemplates) task
File .tmp/templateCache.js created.
Added .tmp/templateCache.js to

Running "concat:generated" (concat) task
File .tmp/concat/scripts/vendor.js created.
File .tmp/concat/scripts/scripts.js created.

Running "ngAnnotate:dist" (ngAnnotate) task
Generating ".tmp/concat/scripts/scripts.js" from: ".tmp/concat/scripts/scripts.js"...ERROR

error: couldn't process source due to parse error
Unexpected token (407:5)
Warning: Task "ngAnnotate:dist" failed. Use --force to continue.

Aborted due to warnings.

I'm still fairly green when it comes to this stuff, but I can provide any other details that you need. Please let me know if you think you can help, and thanks in advance!

Hi, my javascript files are in different folders and subfolders. How can I config it to annotate all files in a folder, like use something "src/*/.js"?

I get errors parsing some files. There should be a force option that allows it to skip errors with particular files. For now, I will just exclude bad files from the files listing.

The task keeps appending to the end of the target file. It should overwrite the entire file instead.

I am trying to concat, then annotate, then minify and I need to create source-map along the way but not sure I can pass a source-map to ng-annotate. Is this possible?

Hi,

Currently I'm migrating a project that is using ngmin to ng-annotate.
After check the documentation I saw there should not be problem by renaming my old ngmin task to ng-annotate after proper installation was done.
However I noted Less plugin ( grunt-contrib-less ) is failing whenever ng-annotate runs in the same grunt task, it's returning this error:

Fatal error: builder is not defined
ReferenceError: builder is not defined

I've done several tests where not using ng-annotate will result in no problem for Less task to run.

Could you please help me on this?
Thanks in Advance!

The same problem like this
olov/ng-annotate#231

I'm trying to use this, and my files don't seem to be annotated when I view them.

ngAnnotate: {
      options: {
        singleQuotes: true
      },
      dist: {
        files: [{
          expand: true,
          cwd: '.tmp/concat/scripts',
          src: '*.js',
          dest: '.tmp/concat/scripts'
        }]
      }
    },

However, if I add:

          ext: '.annotated.js',

Then I can see the annotation in the file. What's the deal here?

It seems that $uibmodal resolve can not be annotated.

I use yeoman's generator-angular 0.15.1

help me please~

Hi there I've been playing around with a scaffolded AngularJS + Yeoman app and out of the box ng-annotate does work locally. However when deploying to a Heroku instance with buildpack running same version of node: 0.10.32 npm 1.4.28 it gives me this:

-----> Found Gruntfile, running grunt heroku:production task
[31m>> [39mLocal Npm module "grunt-ng-annotate" not found. Is it installed?
[33mWarning: Task "ngAnnotate" not found. Use --force to continue.[39m
[31mAborted due to warnings.[39m

Similar issue encountered while using imagemin. Problem being dependencies for the module not being met or broken.

Using version ^0.4.0 on package.json.
Thank you.

Is it possible to add a new option to use single quotes instead of double quotes?

The current release isn't compatible with current version of Node since the ng-annotate module is out of date. What is the ETA on an update?

In this code:

angular.module('xxxx')
    .provider('$foo', function foooo() {
        var loadTemplateFunction = function($route, $test) {
            return $test.load({
                customerApiKey: $route.customerApiKey,
                hash: $route.hash,
                lang: $route.lang,
            });
        };
        this.bar = {
            template: '<div></div>',
            controller: 'bar',
            resolve: {
                templatesLoaded: loadTemplateFunction,
            },
        };

I should add this code:

angular.module('xxxx')
    .provider('$foo', function foooo() {
        var loadTemplateFunction = ['$route', '$test', function($route, $test) { // <<< here!
            return $test.load({
                customerApiKey: $route.customerApiKey,
                hash: $route.hash,
                lang: $route.lang,
            });
        }];

        this.bar = {
            template: '<div></div>',
            controller: 'bar',
            resolve: {
                templatesLoaded: loadTemplateFunction,
            },
        };

The latest release is 0.10.0 so it won't be used because ~0.9.9 is defined in the package.json.

Hey there!

I have this Grunt task:

ngAnnotate: { options: { separator: ';', singleQuotes: true }, dist: { files: [{ expand: true, cwd: '.tmp/concat', src: '**/*.js', dest: '.tmp/concat' }] } },

But for some reason, I end up having a problem in the resulting vendor.js file. I get that line:

angular.module("ui.bootstrap.carousel").run(function(){!angular.$$csp()&&angular.element(document).find("head").prepend('<style type="text/css">.ng-animate.item:not(.left):not(.right){-webkit-transition:0s ease-in-out left;transition:0s ease-in-out left}</style>')})(function(a,b){"object"==typeof

Look close to the end before the last function --> there is no comma separator. That causes my angular module not to run anymore.

I attempted to use the "outputFileSuffix" configuration to prep my angular files before minification. I was expecting to be able to use the "outputFileSuffix" to append the suffix ".annoated"

I expected the following transformation:
homePageController.js -> homePageController.annotated.js

Instead the following occurred:
homePageController.js -> homePageController.js.annotated

Essentially I had expected the transformation to append my suffix to the name of the file not to the full file + extension. Is there a way to accomplish this with the current implementation? Or am I missing something?

I am trying to generate a sourcemap so that my huge file with all the client code can be mapped back to the individual files. My config is:

  config.ngAnnotate = {
    options: {
      ngAnnotateOptions: {
        sourcemap: true,
        sourceroot: '/client'
      }
    },
    clientApp: {
      src: config.files.clientApp,
      dest: 'client/dist/app.js'
    }
  };

Unfortunately it does not work and no sourcemap indications appear in the produced app.js file
And yet ngAnnotate should support those options....

I think that i didnt got the idea of this plugin / it is not working as expected..

test.js

myApp .factory('accountService', ['$rootScope', function($rootScope) { var obj = {}; obj.load = function() { $http.get('/api/getUser').success(function(data) { console.log(data); }); }; }]);

hope that it will add $http and replace "$rootScope" with '$rootScope'. but it's keep file the same.

grunt task:
ngAnnotate: { options: { singleQuotes: true, }, myApp: { files: { 'test.js': ['test.js'], }, }, },

grunt results:

`Running "ngAnnotate:myApp" (ngAnnotate) task

1 file successfully generated.

Done, without errors.`

The following code which is inside a directive's link function does not get annotated:

// Compile new element
$injector.invoke(function($compile) {
  $compile(myElement)(scope);
});

Hello,

That's a nice tool if you isn't using grunt since beginning of project, like me!

But I have a big problem, I'm using https://github.com/laurelnaiad/angular-couch-potato to lazy load my stuffs. But, the guys from couch pota, was changed default names, I think the reason for it was conflicts of names.

Take a look whats couch potato do with declarative functions:

        svc.registerValue = registerValue;
        svc.registerConstant = registerConstant;
        svc.registerFactory = registerFactory;
        svc.registerService = registerService;
        svc.registerFilter = registerFilter;
        svc.registerDirective = registerDirective;
        svc.registerController = registerController;
        svc.registerDecorator = registerDecorator;
        svc.registerProvider = registerProvider;

Almost every function has a clone, I tryed rename but its made a lot of function conflicts.

And for this reason I'm not able to use grunt ng-annotate.

There is a way to mapping this functions?

something like:

options: {
 mapping: {
  'directive': 'registerDirective'
  'controller ': 'registerController'
  ...
}

It would be great!

Thanks

for reference only, see: olov/ng-annotate#231

I'm hoping to get some help with a grunt build that is being aborted by ngAnnotate. Here is what I receive in terminal:

I'm still fairly green when it comes to this type of stuff, but I can provide any other details that you need. Also I am attaching screenshot of script file of a specified line. Please let me know if you think you can help, and thanks in advance!

Script.js

Has anyone encountered this problem? For example I have the following sample code:

function MeRoutes($stateProvider) {
    $stateProvider.state('/main', {
      url: '/main',
      views: {
        'content': { 
           controller: function($location) { ... }
        }
      }
    });
 }
 angular.module('me.routes', []).config(MeRoutes);

The above controller is not being min inject. I've also encountered few other edge cases. Wondering if I'm doing something wrong or if this is expected.

My ngannotate config is simply:

var config = {
        dist: {
            files: [
                {
                    expand: true,
                    src: ['dist/**/*.js'],
                }
            ]
        }
    };
    grunt.config('ngAnnotate', config);

I have troubles to configurate my task. I have a project based on https://github.com/ngbp/ngbp with the following task in the Gruntfile:

    ngmin: {
      compile: {
        files: [
          {
            src: [ '<%= app_files.js %>' ],
            cwd: '<%= build_dir %>',
            dest: '<%= build_dir %>',
            expand: true
          }
        ]
      }
    },

As you can see, a cwd and dest directory is given. Is it possible to rewrite this task to work with ng-annotate instead of ngmin?

after running yo angular:route popular,
I run grunt build but it run into error

here is the error

And here is my script.js file

.when('/popular', {
  templateUrl: 'views/popular.html',
  controller: 'PopularCtrl',
  controllerAs: 'popular'
})
'use strict';
/**
 * @ngdoc overview
 * @name cineAngularApp
 * @description
 * # cineAngularApp
 *
 * Main module of the application.
 */
angular
  .module('cineAngularApp', []);

'use strict';

/**
 * @ngdoc function
 * @name cineAngularApp.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the cineAngularApp
 */
angular.module('cineAngularApp')
  .controller('MainCtrl', function () {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

'use strict';
/**
 * @ngdoc function
 * @name cineAngularApp.controller:PopularCtrl
 * @description
 * # PopularCtrl
 * Controller of the cineAngularApp
 */
angular.module('cineAngularApp')
  .controller('PopularCtrl', function () {
    this.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

This produces an Angular unknown provider error when minified:

export class SomeClass
{
    /* @ngInject */
    constructor(dep1, dep2)
    {
        this.dep1 = dep1;
        this.dep2 = dep2;

        this.Init = () => console.log('SomeClass.Init');
        this.Init();
    }
}

This works fine when minified:

export class SomeClass
{
    /* @ngInject */
    constructor(dep1, dep2)
    {
        this.dep1 = dep1;
        this.dep2 = dep2;

        this.Init = () => console.log('SomeClass.Init');
        this.Init();
    }

    static FakeMethod()
    {
        return new SomeClass();
    }
}

The angular-ui bootstrap team have moved away from the $modal name space, therefore ng-annotate v1.1.0 or newer is required to automate dependency injection for grunt projects using angular-ui bootstrap.

The may release provided ng-annotate 1.0.1. Would you mind re-releasing with a newer version?

Thanks :)
Mat

When using grunt-ng-annotate like this:

ngAnnotate: {
  app: {
    files: {
      "concat.js": ["a.js", "b.js", "c.js"]
    },
  },  
}

...if you have "use strict'' statements in those source files the concatenated file then contains multiple repetitions of the statement.

An option to prevent this would be great for cleanup purposes.

If there is any code after the $inject statement, ngAnnotate will create 2 $inject statements using the aliases for the 2nd one.

Before ngAnnotate:

angular
        .module('core')
        .service('models.menu', MenuModel);

    MenuModel.$inject = ['ui.alertService', 'models.users', '$q'];

    var myVar;

   function MenuModel(alerts, users, $q) {}

After ngAnnotate:

angular
        .module('core')
        .service('models.menu', MenuModel);

    MenuModel.$inject = ['ui.alertService', 'models.users', '$q'];

    var myVar;

    MenuModel.$inject = ['alerts', 'users', '$q'];

   function MenuModel() {}

It's a really really strange behaviour, I caught it by luck. This issue ate up my whole day.

Am I the only one experiencing this?

Regards,
Andrei.

Current version doesn't support angular 1.5 component's controller annotation.
see commit 5bfb3b1 in ng-annotate.

How am I suppose to use sourceMap?

I have a following configuration in place:

ngAnnotate: {
            options: {
                add: true,
                singleQuotes: true,
                sourceMap: true // it neither works for the string parameter 'dist/bundle.js.map'
            },
            dist: {
                files: {
                    'dist/bundle.js': [ 'app/modules/*/*.js', 'app/*.js']
                }
            }
        },

The error doesn't make any sense. I'm crating a SINGLE bundle file and I want its source map.
Please help :)

Hello,

I am trying to move from ngmin to ng-annotate. Like I saw on one issue, I did

ngmin: {
        dist: {
            files: [{
                expand: true,
                cwd: '.tmp/concat/scripts',
                src: '*.js',
                dest: '.tmp/concat/scripts'
            }]
        }
    },

to

ngAnnotate: {
        dist: {
            files: [{
                expand: true,
                cwd: '.tmp/concat/scripts',
                src: '*.js',
                dest: '.tmp/concat/scripts'
            }]
        }
    },

But I am getting a Unknown provider: aProvider <- a <- ClientGroup

ClientGroup is an entity of mine, but the file vendor is the one with angular, jquery and such.. Specifically it is pointing to angular $LogProvider.

Do you know what might be causing this issue?

Hi,

Just upgrade my current project to 2.0.1 :

"grunt-ng-annotate": "2.0.1"

After "npm install" :

├─┬ [email protected]
│ └── [email protected] 
├─┬ [email protected]
│ └─┬ [email protected]
│   └── [email protected] 
├─┬ [email protected]
│ └─┬ [email protected]
│   └─┬ [email protected]
│     └─┬ [email protected]
│       ├─┬ [email protected]
│       │ └─┬ [email protected]
│       │   └── [email protected] 
│       └── [email protected] 
└─┬ [email protected] 
  ├── [email protected] 
  └─┬ [email protected] 
    ├── [email protected] 
    ├─┬ [email protected] 
    │ └── [email protected] 
    ├─┬ [email protected] 
    │ └── [email protected] 
    └── [email protected] 

Here is my Grunt conf :

        ngAnnotate : {
            appJs : {
                files : [ {
                    expand : true,
                    cwd : '<%= yeoman.tmp %>/scripts',
                    src : [ 'app.js' ],
                    dest : '<%= yeoman.tmp %>/scripts'
                } ]
            }
        }

Here is the result for the CLI "grunt ngAnnotate:appJs --debug --verbose" :

Running tasks: ngAnnotate:appJs

Running "ngAnnotate:appJs" (ngAnnotate) task
[D] Task source: /Volumes/chine/mfg_WECHAT_POC/node_modules/grunt-ng-annotate/tasks/ng-annotate.js
Verifying property ngAnnotate.appJs exists in config...OK
Files: .tmp/scripts/app.js -> .tmp/scripts/app.js
Options: (none)
Warning: customizer is not a function Use --force to continue.

Aborted due to warnings.

Also, I'm working on node 5.3.0 :

# node -v
v5.3.0

It was working perfectly with "1.0.1".

Getting this error with

Node version 5.0.0
grunt-ng-annotate version latest
[INFO] Running 'grunt local' in /Users/farhan/Documents/projects/bizi/bizi-admin [ERROR] [ERROR] /Users/farhan/Documents/projects/bizi/bizi-admin/node_modules/grunt-ng-annotate/tasks/ng-annotate.js:11 [ERROR] const path = require('path'); [ERROR] ^^^^^ [INFO] Loading "ng-annotate.js" tasks...ERROR [INFO] >> SyntaxError: Use of const in strict mode. [INFO] Warning: Task "ngAnnotate:main" not found. Use --force to continue. [INFO] [INFO] Aborted due to warnings.

Hi!

I have a css file that get's loaded only if the user has picked a language that is written from right-to-left. It looks like that:

<link rel="stylesheet" href="assets/css/bootstrap-rtl.min.css" ng-if="lang.dir == 'rtl'" />

But ng-annotate takes it when building the app and puts it into app.css of course. Then all languages get written right-to-left, which is wrong. What's the best way to avoid that?

I don't know if this is a ng-annotate error specifically but all my other plugins work. This plugin works on another development machine but I set up a new machine and it doesn't.

I'm struggling with NodeJS, NPM, and ng-annotate versions. I'm trying my best to install the latest of each but I admit to know knowing anything about uninstalling and re-installing. I'm stumbling through this.

When the ng-annotate task runs I get the following error:
"Warning: Unable to write "" file (Error code: ENOENT). Use --force to continue.
Aborted due to warnings."

I've stumbled through node, npm, and plugins for several hours and I'm just not sure what to try next.

Thanks,
Bob

I'm not sure how you would use ngAnnotate in multiple folders with multiple files inside that folder.

Currently i'm trying to get 2 different types of ng-annotate functions going. 1 for my development and 1 for my distribution. My distribution will get 1 js file after combining and uglifying all my files but it seems i need ng-annotate in between to make sure i have all proper injections.
But for my development i also want to use annotate for cleaning up the code.

I've got a few folders and files to annotate but i'm not sure how to easily do this. Can you help me?

Current config that doesn't work:

ngAnnotate: {
    dev: {
        options: {
            add: false,
            remove: true,
            singleQuotes: true
        },
        files: ['app.js', 'controllers/*.js', 'services/*.js']
    },
    dist: {
        options: {
            add: true,
            remove: false,
            singleQuotes: true
        },
        files: ['app.js', 'controllers/*.js', 'services/*.js']
    }
}

I'm trying to ignore files while globbing. I tried this but it doesn't work?

'annotated.js':[ 'src/blah/**/*.js', '!src/blah/**/*.Spec.js']

that's the way I do it for other grunt configs. I'm trying to ignore my spec files and I don't want to put them in a separate folder because I hate looking for things.

When concatenating files, I want to insert a single semicolon in between files/modules, in case of iife that has no semicolon at the end. Thanks.

My project is built with angular and jquery files, I want to know how ng-annotate check if it need annotate? I wonder if it will annotate on my jquery files.

Hi thanks for all your work on this project!
Was curious about when ~2.0.0 would be available on npm? npm currently show 1.0.1 available.

After running via grunt, my app is failing to init a module because of a dependency injection issue. Yet, if I run the ng-annotate cli through my files, it runs perfectly. Is the cli a different build?