importing angular services with ES6 and webpack

Question

I'm trying to import $timeout with ES6 and webpack and I keep getting that $timeout is undefined. Can anyone help? If there's a way that doesn't involve using $inject I'd prefer it because I'm gradually trying to get rid of angularjs in my code.

randomTVNames.service.js:

import angular from 'angular';

class RandomTVNames {
    constructor($timeout) {
        this.tv = ['Shield', 'Walking Dead', 'Castle', 'Leftovers'];
        this.timeout = $timeout;
        console.log(this.timeout);
    }

    getName() {
        const totalNames = this.tv.length;
        const rand = Math.floor(Math.random() * totalNames);
        return this.tv[rand];
    }

    getTimeout(){

        this.timeout(function () {
            alert("this is timeout")}, 3000);
    }
}

RandomTVNames.$inject = ['$timeout'];

//todo - try to inject angular argument (such as $timeout) with $inject
var randomTVNames = new RandomTVNames();

export default randomTVNames;

home.controller.js:

import randomTVNames from '../../services/randomTVNames.service';
import mainModule from '../../mainModule';

class HomeController {
    constructor() {
        this.tv = randomTVNames;
        this.name = 'World';
    }

    randomTVName($timeout) {
        this.name = this.tv.getName();
    }

    getCtrlTimeout(){
        this.tv.getTimeout();
    }

}

mainModule.controller('HomeController', HomeController);

Answer 1

ES6 modules are not compatible with the module system from Angular 1.x. This means that export ing and import ing services and controllers won't work, you need to register and inject them using Angular's module system.

randomTVNames.service.js:

import mainModule from '../../mainModule';

class RandomTVNames {
    // ... snip ...
}

RandomTVNames.$inject = [ /* ... snip ... */ ];

mainModule.service('randomTVNames', RandomTVNames);

home.controller.js:

import mainModule from '../../mainModule';

class HomeController {
    constructor($scope, randomTVNames) {
        this.$scope = $scope;
        this.tv = randomTVNames;
    }
}

HomeController.$inject = ['$scope', 'randomTVNames'];

mainModule.controller('HomeController', HomeController);

Then in your main webpack file, make sure to import both of them so they get bundled:

import 'services/randomTVNames.service';
import 'controllers/controller.service';

Answer 2

There is no way to get rid of $inject, unless you are not minifying you code (but i hope you are).

Angular is injecting variables using their names, so when it sees $scope, it know to look for it and inject it, but when minifying your code the variable names are changed ($scope becomes c etc.) and angular does not know what object you want to inject.

That is what $inject is for since strings are not minified.

Answer 3

please take a look at this loader . it helps with what you're trying to do. but mind adding 'ngInject' anywhere in your js file, that injects anything