Why i cannot transpile my js file?

Question

I have a ES6 project. I want to transpile file into ES5. I'have created a gulp task. Here is the my task using babel :

gulp.task('transpile' , function() {
  console.log('Transpile js ');
    return gulp.src(['app/**/*.js'])
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(ngAnnotate())
    .pipe(uglify().on('error', function(e){
        console.log(e);
        }))
    .pipe(gulp.dest('target/'));
});

When i run my task, i have an error :

events.js:141
      throw er; // Unhandled 'error' event
      ^
SyntaxError: /Users/me/myapp/target/tmp/src/content.components/login/login.controller.js: Unexpected token (20:16)
  18 |     }
  19 | 
> 20 |     successAuth = (result) => {
     |                 ^
  21 |         this.$rootScope.$broadcast('authenticationSuccess');
  22 |         this.$location.path('/');
  23 |     };
    at Parser.pp.raise (/Users/me/node_modules/babylon/lib/parser/location.js:22:13)

The problem occurs in my controller :

class LoginController {

    constructor($rootScope, $location, AuthService) {
        this.AuthService = AuthService;
        this.$rootScope = $rootScope;
        this.$location = $location;
    }

    login() {
        this.loading = true;
        this.AuthService.login({
            username: this.username,
            password: this.password,
            rememberMe: this.rememberMe
        }).then(this.successAuth, this.failedAuth);
    }

    successAuth = (result) => {
        this.$rootScope.$broadcast('authenticationSuccess');
        this.$location.path('/');
    };
    failedAuth = (error) => {
        this.error = 'Identifiant ou mot de passe incorrect';
        this.loading = false;
    };
}

LoginController.$inject = ['$rootScope', '$location', 'AuthService']

export default LoginController;

How to resolve my error please ?

Answer 1

The syntax for class methods is methodName(parameters) { body }.

Write your class like this:

class LoginController {

    constructor($rootScope, $location, AuthService) {
        this.AuthService = AuthService;
        this.$rootScope = $rootScope;
        this.$location = $location;
    }

    login() {
        this.loading = true;
        this.AuthService.login({
            username: this.username,
            password: this.password,
            rememberMe: this.rememberMe
        }).then(this.successAuth, this.failedAuth);
    }

    successAuth(result) {
        this.$rootScope.$broadcast('authenticationSuccess');
        this.$location.path('/');
    }

    failedAuth(error) {
        this.error = 'Identifiant ou mot de passe incorrect';
        this.loading = false;
    }

}