How to use 'babel-plugin-angularjs-annotate' in GULP

Question

I am getting this error when i try and build with GULP

[18:48:23] 'makeScripts' errored after 2.53 s [18:48:23] Error in plugin "gulp-ng-annotate" Message: metisMenu.js: error: couldn't process source due to parse error Unexpected token (113:8) Details: domainEmitter: [object Object] domain: [object Object] domainThrown: false

it seems to be because in metisMenu.js there is this type of syntax..

class MetisMenu { 
    // eslint-disable-line no-shadow
    constructor(element, config) {
      this.element = element;
      this.config = {
        ...Default,
        ...config,
      };

Which appears to be es6 syntax

In my gulp file i am using this which I found out is deprecated

var ngAnnotate = require('gulp-ng-annotate');

So using this instead

var ngAnnotateNew = require('babel-plugin-angularjs-annotate');

However if I simply replace ngAnnotate with ngAnnotateNew here, I get an error.. "dest.on is not a function"

stream = stream
.pipe(ngAnnotateNew())
.pipe(concat(name + '.min.js'));

All the examples i have seen to use the new plugin are using a babel.rc file, but I have no such file. It just using gulp along with angularJS/NPM etc.

Thanks in advance

score 0 · Answer 1 · answered Dec 16 '21 at 11:05

The issue was var ngAnnotate = require('gulp-ng-annotate'); should not be used on a non angularJS library, so i seperated out the angularJS libs from the non angularJS libs in my gulp file.

It is deprecated but it works, and AngularJS is deprecated anyway.. my project needs to migrate to Angular 10 soon.

How to use 'babel-plugin-angularjs-annotate' in GULP

1 Answers1