AngularJS how to fix error?

Question

Angular

Hello guys, I just can not figure out how to get out of this situation. It throws this error errors.angularjs.org/1.6.6/$injector/strictdi?p0=C... but my code structure is completely different, I provide the code:

import angular from 'angular';
import uiRouter from 'angular-ui-router';
import ngAnimate from 'angular-animate';
import uiBootstrap from 'angular-ui-bootstrap';

 export class CategoryComponent {        
    $http;
    socket;     
   nameCategory = [];

 constructor($http, $scope, socket) {

    this.$http = $http;
    this.socket = socket;

    $scope.$on('$destroy', function() {
      socket.unsyncUpdates('categorys');
    });
  }  

  $onInit() {      
    this.$http.get('/api/categorys')
      .then(response => {
        this.nameCategory = response.data;
        this.socket.syncUpdates('categorys', this.nameCategory);
      })
      .catch(response => 
       console.log('error')
        )
  } 
}

export default angular.module('directives.category', [uiRouter, ngAnimate,uiBootstrap,'UserValidation'])
  //.config(routing)
  .component('category', {
    template: require('./item-category.html'),
    controller: CategoryComponent,
  })
  .name; 
                         /*  <input ng-model="$ctrl.modalData.name">  <input ng-model="$ctrl.modalData.value"><br> */

  angular.module('directives.category')
  .component('myModal', {
    template: `<div class="modal-body">
     <h2 class="h2Modal">Shipping information</h2>
     <img class= "miniImg" src="{{$ctrl.resolve.modalData.img}}"  alt="" />
     <div class="infoModal">
     <form name="myForm">  
     <div class="form-group"><label class="infoCategory">Product: </label> <label class="info" ng-bind="$ctrl.resolve.modalData.name"></label></div>

    <div class="form-group"><label class="infoCategory">Your e-mail:&nbsp </label> <span style="width: 150px;" class="input-group clearfix MainEmail input-group-sm">
  <input id="email" type="email" name="email" ng-model="$ctrl.resolve.modalData.email" ng-model="formData.email"  style="width: 150px;" class="form-control borderStyle"  placeholder="Your Email" required/>
  </span>
<span class="dangeSpan" ng-show="myForm.email.$error.required && myForm.email.$dirty">required</span>
   <span class="dangeSpan" ng-show="!myForm.email.$error.required && myForm.email.$error.email && myForm.email.$dirty">invalid email</span>


</div> 

    <div class="form-group"><label class="infoCategory">Enter the quantity:&nbsp </label> <input style="width: 107px;" type="number" id="quantity" name="quantity"  class="form-control" min="1" max="5" ng-model="$ctrl.resolve.modalData.amount" ng-model="formData.quantity" placeholder="Write number" required/>
  <span class="dangeSpan" ng-show="!myForm.quantity.$error.required && (myForm.quantity.$error.min || myForm.quantity.$error.max) && myForm.quantity.$dirty">quantity ust be between 1 and 5</span>
   

    </div> 
    <div class="form-group"><label class="infoCategory">Price per item:&nbsp<span class="fw">$</span></label> <label class="info" class="form-control" ng-bind="$ctrl.resolve.modalData.price"></label></div>      
     <button class="btn btnModal btn-success btn-lg" type="submit" ng-disabled="!myForm.$valid" ng-click="$ctrl.handleClose()">To Order</button> 
     </div>
     </form>
      <button type="button" class="close btn-lg" ng-click="$ctrl.handleDismiss()" aria-label="Close">
  <span class="spanClose" aria-hidden="true">&times;</span>
</button> 
    </div>
`,
    bindings: {
      modalInstance: "<",
      resolve: "<",
        },
    controller: [function() {
      var $ctrl = this;
    
      $ctrl.$init = function() {
        $ctrl.modalData = $ctrl.resolve.modalData;
      }
/*
    function dataB() {
       var dataBS;
        $ctrl.dataBs = $ctrl.resolve.modalData;
        return dataBs;
      }
      console.log(dataB()); */

      $ctrl.handleClose = function() {
        console.info("in handle close");
        $ctrl.modalInstance.close($ctrl.modalData);
      };

      $ctrl.handleDismiss = function() {
        console.info("in handle dismiss");
        $ctrl.modalInstance.dismiss("cancel");
      };
         
    }]
  });

 angular.module('directives.category')
  .component('myContent', {
    template: '<button type="button" class="btn btnBuy btn-info btn-lg btn-default" ng-click="$ctrl.open($event)">Buy now</button>',
    controller: ['$uibModal','$http', function($uibModal,$http) {
  var $ctrl = this;

      $ctrl.open = function($event) {
       // var target = $event.currentTarget; // где был клик?
        let parent = $event.currentTarget.parentNode.parentNode;
        let parentPrice = " ";
         parentPrice = parent.querySelector('div.price').innerHTML;
     
        // var priceProduct = parseInt(parentPrice.replace(/\D+/g,""));
        // var priceProduct = parseInt(parentPrice.replace(/\D+:\s*\$\s*([\d.]+)/g, ""));
         let priceProduct = parentPrice.match(/\D+:\s*\$\s*([\d.]+)/g).join('').replace(/Price: \$/g, '');
       
         let nameProduct = parent.querySelector('span').innerHTML;
         let imgProduct = parent.querySelector('img').src.replace(/http:\/\/localhost:3000/g, '') ;
         let count=1;
         console.log(priceProduct);
       // console.log(imgProduct);
      //  console.log(parent);
        $uibModal.open({
          component: "myModal",
          resolve: {
        modalData: function() {
                 
      return $ctrl.dataForModal = {
        amount: count,
        price: +priceProduct*count,
        name: nameProduct,
        img: imgProduct,
        email: '', 
        flag:0  
        //CommonAmount: 20
      }
            }
          }
        }).result.then(function(result) {

          //console.info("I was closed, so do what I need to do myContent's controller now.  Result was->");
          //console.info(result);
          console.info($ctrl.dataForModal);
        
     $http.post('/api/orders',$ctrl.dataForModal) 
      .then( res =>
        console.info("vse ok")
      )
      .catch( res =>
        console.info('error')
      );    

        }, function(reason) {
          console.info("I was dimissed, so do what I need to do myContent's controller now.  Reason was->" + reason);
        });
      };
    }] 
       
  });

angular.module('UserValidation', []).directive('validPasswordC', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$parsers.unshift(function (viewValue, $scope) {
                var noMatch = viewValue != scope.myForm.password.$viewValue
                ctrl.$setValidity('noMatch', !noMatch)
            })
        }
    }
})

Answer 1

The CategoryComponent class has no annotations and Angular doesn't know what to pass to the constructor.
do this:

export class CategoryComponent {...}
CategoryComponent.$inject = ['$http', '$scope', 'socket'];

But in general, so as not to suffer like this with each class and function, people use automatic annotators like this: https://github.com/olov/ng-annotate#tools-support