ng-annotate error with Babel and destructuring

Question

Strange error when transpiling to ES6 with Babel, ng-annotate doesn't like destructuring. I copied my source into the online babel compiler and it works fine. Commenting out ng-annotate in my gulp pipe chain gets rid of the error. Removing the /* @ngAnnotate */ comment in the file and injecting manually doesn't change anything either.

Gulp section:

return gulp.src(config.scripts.app)
    .pipe(changed(config.dist + '/scripts'))
    .pipe(plumber())
    .pipe(annotate())

    // Filter out and transpile only .es6.js files
    .pipe(es6)
    .pipe(babel({
        presets: ['es2015'],
        plugins: ['extensible-destructuring'],
        comments: false
    }))
    .pipe(es6.restore)

    .pipe(concat('scripts.js'))
    .pipe(gulp.dest(config.dist + '/scripts'))

Source in question:

var [min, max] = values.map(val => +val);
// let/var doesn't make a difference.

ngModelCtrl.$modelValue = [min, max];

Error is coming from a dependency in ng-annotate:

Error: StringMap expected string key
    at stringmap.set (/Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/node_modules/stringmap/stringmap.js:101:19)
    at Scope.add (/Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/build/es5/scope.js:102:17)
    at /Users/macbookair/Places/app/places/frontend/node_modules/gulp-ng-annotate/node_modules/ng-annotate/build/es5/scopetools.js:38:25
    at Array.forEach (native)
    .... more

stringmap.js function in question:

stringmap.prototype.set = function(key, value) {    
    if (typeof key !== "string") {
        throw new Error("StringMap expected string key");
    }
    if (key === "__proto__") {
        this.hasProto = true;
        this.proto = value;
    } else {
        this.obj[key] = value;
    }
};

Logging out key and value in the above function returns this:

undefined { 
    kind: 'var', 
    node: { 
        type: 'ArrayPattern',
        start: 1178,
        end: 1188,
        loc: { start: [Object], end: [Object] },
        range: [ 1178, 1188 ],
        elements: [ [Object], [Object] ] 
    },
    from: 1215 
}

Clearly the key argument is undefined, but why does it even care?

Reward

I have similar problem, I just simply changed the order in gulp pipe to: babel --> annotate. ng-annotate does not support new JS versions: github.com/olov/ng-annotate/issues/237. – Cashbox

Thanks @illagrenan, yep after some trial and error (keep comments etc) I ended up just piping .es6.js files to babel and skipping implicit ng-annotate. I'm growing to like the explicit annotations anyway :) Someday get all files to es2015 regardless. – Reward

@Cashbox changing the order of tasks worked for me too :) Thanks – Selectman

We were having issues ng Annotate plugin and switched to babel-plugin-angularjs-annotate and fixes the problem. But we are using this plugin with webpack – Karwan

@Cashbox could you put that into answer? it could be tricky to find out solution that works through comments :( – Virtually

Answer 1

I have similar problem, I just simply changed the order in gulp pipe to: babel --> annotate. ng-annotate does not support new JS versions: github.com/olov/ng-annotate/issues/237

Originally answered by @illagrenan in comment section above

Protomorphic