ES6 ng-annotate build problem

[marani]

With yo-rc.json as below, gulp serve:dist shows no awesomething, console shows missing module error, and protractor:dist reports 0 awesomething as well. Basically the problem boils down to ng-annotate unable to annotate Traceur output properly with export class. See this issue

{
  "generator-gulp-angular": {
    "props": {
      "angularVersion": "~1.3.4",
      "angularModules": [
        {
          "name": "angular-animate",
          "module": "ngAnimate"
        },
        {
          "name": "angular-cookies",
          "module": "ngCookies"
        },
        {
          "name": "angular-touch",
          "module": "ngTouch"
        },
        {
          "name": "angular-sanitize",
          "module": "ngSanitize"
        }
      ],
      "jQuery": {
        "name": "jquery",
        "version": "~2.1.1"
      },
      "resource": {
        "name": "restangular",
        "version": "~1.4.0",
        "module": "restangular"
      },
      "router": {
        "name": "angular-ui-router",
        "version": "~0.2.13",
        "module": "ui.router"
      },
      "ui": {
        "name": "bootstrap-sass-official",
        "version": "~3.3.1",
        "key": "bootstrap",
        "module": null
      },
      "bootstrapComponents": {
        "name": "angular-bootstrap",
        "version": "0.12.x",
        "key": "ui-bootstrap",
        "module": "ui.bootstrap"
      },
      "cssPreprocessor": {
        "key": "node-sass",
        "extension": "scss",
        "module": "gulp-sass",
        "version": "~1.1.0"
      },
      "jsPreprocessor": {
        "key": "traceur",
        "extension": "js",
        "srcExtension": "es6",
        "module": "gulp-traceur",
        "version": "~0.14.1"
      },
      "foundationComponents": {
        "name": null,
        "version": null,
        "key": null,
        "module": null
      }
    }
  }
}

Fresh install from 80c87ee (just before 0.8 tag)

[marani]

We could run ./node_modules/mocha/bin/_mocha ./test/test-gulp-task-inception.mocha.js to verify e2e tests as well, all cases with ES6 have this problem, TypeScript also fails.

  1) gulp-angular generator with other promptCase: [angular 1.3.x, ngAnimate, ngCookies, ngTouch, ngSanitize, ZeptoJS 1.1.x, $http, Bootstrap, LESS, ES6 with 6to5] should pass gulp protractor:
     AssertionError: expected promise to be fulfilled but it was rejected with 'Gulp returned with error code 8'


  2) gulp-angular generator with other promptCase: [angular 1.3.x, ngAnimate, ngCookies, ngTouch, ngSanitize, ZeptoJS 1.1.x, $http, Bootstrap, LESS, ES6 with 6to5] should pass gulp protractor:dist:
     AssertionError: expected promise to be fulfilled but it was rejected with 'Gulp returned with error code 8'


  3) gulp-angular generator with other promptCase: [angular 1.3.x, ngAnimate, ngCookies, ngTouch, ngSanitize, $http, ngMaterial, Stylus, TypeScript] should pass gulp protractor:dist:
     AssertionError: expected promise to be fulfilled but it was rejected with 'Gulp returned with error code 8'

[Swiip]

Thanks for the report, I'll check this.

[dsimmons]

I had a similar issue today using 6to5 (think it's probably the same thing). I was able to temporarily fix it by commenting out the uglify step in the html task of build.js:

gulp.task('html', ['wiredep', 'injector:css', 'injector:js', 'partials'], function () {
  var htmlFilter = $.filter('*.html');
  var jsFilter = $.filter('**/*.js');
  var cssFilter = $.filter('**/*.css');
  var assets;

  return gulp.src('src/*.html')
    .pipe($.inject(gulp.src('.tmp/inject/templateCacheHtml.js', {read: false}), {
      starttag: '<!-- inject:partials -->',
      ignorePath: '.tmp',
      addRootSlash: false
    }))
    .pipe(assets = $.useref.assets())
    .pipe($.rev())
    .pipe(jsFilter)
    .pipe($.ngAnnotate())
    // .pipe($.uglify({preserveComments: $.uglifySaveLicense}))
    .pipe(jsFilter.restore())
    .pipe(cssFilter)
    .pipe($.csso())
    .pipe(cssFilter.restore())
    .pipe(assets.restore())
    .pipe($.useref())
    .pipe($.revReplace())
    .pipe(htmlFilter)
    .pipe($.minifyHtml({
      empty: true,
      spare: true,
      quotes: true
    }))
    .pipe(htmlFilter.restore())
    .pipe(gulp.dest('dist/'))
    .pipe($.size({ title: 'dist/', showFiles: true }));
});

With the above, I'm able to run gulp serve:dist and gulp protractor:dist successfully (whereas I wasn't previously).

Haven't had time to figure out a more robust fix yet, but being that my vendor.js is 1.7MB without minification and with comments, it's high on my priority list 😄

[marani]

#206 solved this. We have to use explicit injection

class MainCtrl {
  constructor ($scope) {
    $scope.awesomeThings = <%= technologies %>;
    $scope.awesomeThings.forEach(function(awesomeThing) {
      awesomeThing.rank = Math.random();
    });
  }
}

MainCtrl.$inject = ['$scope'];

export default MainCtrl;

Let's keep this open to track ngAnnotate's solution for the issue.

[dsimmons]

👏

The changes in #206 look pretty much like what I had in mind to try next -- I'll incorporate them locally either today or tomorrow and report back!

[marani]

I've got a very strange error with gulp test on generated project with Traceur: TypeError: Attempted to assign to readonly property.

INFO [karma]: Karma v0.12.28 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Linux)]: Connected on socket -uIdf2Xu5QXyITLWF5iD with id 99635568
PhantomJS 1.9.8 (Linux) ERROR
  TypeError: Attempted to assign to readonly property.
  at /home/marani/gga/ft-app-path/test/t2/bower_components/traceur-runtime/traceur-runtime.js:908



/home/marani/gga/ft-app-path/test/t2/gulp/unit-tests.js:30
      throw err;
            ^
Error in plugin 'gulp-karma'
karma exited with code 1
    at done (/home/marani/gga/ft-app-path/generator-gulp-angular/test/deps/node_modules/gulp-karma/index.js:56:30)
    at ChildProcess.<anonymous> (/home/marani/gga/ft-app-path/generator-gulp-angular/test/deps/node_modules/gulp-karma/index.js:82:7)
    at ChildProcess.emit (events.js:98:17)
    at Process.ChildProcess._handle.onexit (child_process.js:810:12)
marani@lorien:~/gga/ft-app-path/test/t2$ 

Not sure if error is a normal test fails or just traceur-runtime's error or something else...

[dsimmons]

Just reporting back: having made the changes proposed in #206 (explicit injection), I'm able to successfully minify with no changes to build.js (using ES6 classes and 6to5). 👍

[Swiip]

When I first implemented the support of Traceur, I discovered that it write, even in the Node module system, some of its pollyfills. Specially one about object property manipulations. It conflicted with some configuration object manipulation from gulp-autoprefix which was absolutely not directly related in the code.

As your problem also mention object manipulation and Traceur, I'm afraid it's related to the same problem. What I don't really understand is that the tests contains Traceur and Karma so your problem should have been detected...

[marani]

Seems like it's a traceur-rumtime problem, I have reported the issue & they are working on it.

[rootical]

Hey men. google/traceur-compiler#1611 guys from Google say that the've fixed the issue. I've tried upgrading traceur and gulp traceur to the latest versions but tests are still failing as before(

[Swiip]

Not sure what was the problem but with the evolutions of Traceur, and the new compilation mechanisms with Webpack, all the tests passes: karma, karma:dist, protractor, protractor:dist.