2

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.

mohsen motamedi
  • 84
  • 4
  • 1
    This error occurs when your dependency is not injected properly or you may write wrong order of dependency. Please verify it carefully. – Dipak Feb 23 '17 at 06:37
  • 2
    @Dipakchavda Yeah I've already checked it very carefully. – mohsen motamedi Feb 23 '17 at 06:38
  • Please review below link, it may helpful probably. http://stackoverflow.com/questions/31627753/how-to-inject-into-angular-class-w-es6 – Dipak Feb 23 '17 at 06:42
  • https://medium.com/@blacksonic86/angular-2-dependency-injection-in-es6-f5551a3d6bf#.f0i6c1t3g – Dipak Feb 23 '17 at 06:42
  • http://stackoverflow.com/questions/36198474/angular-1-5-es6-dependency-injection – Dipak Feb 23 '17 at 06:42
  • http://stackoverflow.com/questions/31627753/how-to-inject-into-angular-class-w-es6 – Dipak Feb 23 '17 at 06:43
  • _"These two share the same module"_ No, they don't. You declare two separate modules. And your code is not ES6. JavaScript has no class properties (yet). – a better oliver Feb 23 '17 at 08:58

0 Answers0