I'm trying to use es6 with angular 1.x. But I'm not able to inject the Service I've written to a Component's Controller.
Here's the component itself.
import endPointModelService from './endPoints.model.js';
export const EDIT_ASYNC_SELECT_COMPONENT = 'editAsyncSelectControl';
export class editAsyncSelectController {
static $inject = ['$http', 'endPointModelService'];
constructor($http, endPointModelService) {
var self = this;
self.endpoint = endPointModelService;
self.endPointList = [{
link: '/news',
linkTitle: 'News'
}];
self.changeSource = () => {
/* eslint-disable no-console */
return $http({method: 'GET', url: 'https://jsonplaceholder.typicode.com/posts/'}).then((result) => {
console.log(result);
});
/* eslint-enable no-console */
};
self.changeSource();
}
}
export const editAsyncSelectControlComponent = {
template: a Simple template,
bindings: {
test: '=',
},
controller: editAsyncSelectController
};
const editAsyncSelectModuleName = 'stepway.editAsyncSelect.module';
export default angular
.module(editAsyncSelectModuleName, [])
.component(EDIT_ASYNC_SELECT_COMPONENT, [endPointModelService.name, editAsyncSelectControlComponent]);
export const END_POINT_MODEL_ASYNC_SELECT = 'endPointModelService';
export class endPointModelService{
static $inject = [];
constructor() {}
getList(){
return [{
routeAddress: 'news',
name: 'News'
}];
}
}
export const END_POINT_MODEL_ASYNC_SELECT_MODULE = 'stepway.editAsyncSelect.module';
export default angular
.module(END_POINT_MODEL_ASYNC_SELECT_MODULE, [])
.service(END_POINT_MODEL_ASYNC_SELECT, endPointModelService);
These two share the same module and Once I load the file, the service should be available to the Component's controller but it isn't and I get the error that says:
http://errors.angularjs.org/1.6.1/$injector/unpr?p0=endPointModelServiceProvider%20%3C-%20endPointModelService
Please pay attention that $http Service gets injected and works properly but endPointModelService doesn't.
I don't get what I'm doing wrong! Webpack is handling the Bundling btw.
