AngularJS Ошибка md-диалога: DialogController не использует явную аннотацию и не может быть вызван в строгом режиме

Question

Я не пользуюсь строгим режимом и не понятно, почему у меня эта ошибка. Вот исходные файлы для моего проекта:

catalog.component. js:

angular.module('catalog').component('catalog', {
    templateUrl: '/catalog/catalog.template.html',
    controller: ['$scope', '$mdDialog', 'Products', 'categoryFilter', 'priceFilter',
    function CatalogController($scope, $mdDialog, Products, categoryFilter, priceFilter) {
        /* ... */

      $scope.showBuy = function(ev) {
        $mdDialog.show({
          controller: DialogController,
          templateUrl: '/catalog/buy.template.html',
          //parent: angular.element(document.body),
          targetEvent: ev,
          clickOutsideToClose: true,
          fullscreen: true
        })
        .then(function(answer) {

        }, function() {

        });
      };

      function DialogController($scope, $mdDialog) {
        $scope.hide = function() {
          $mdDialog.hide();
        };

        $scope.cancel = function() {
          $mdDialog.cancel();
        };

        $scope.answer = function(answer) {
          $mdDialog.hide(answer);
        };
      }
    }]
});

catalog.template. html:

<md-button class="md-raised buy" ng-click="showBuy($event)">{{product.price}}$ kg - buy</md-button>

catalog .module. js:

angular.module('catalog', [
  'core.products',
  'ngMaterial'
]);

buy.template. html:

<md-dialog aria-label="Buy product">
  <form ng-cloak>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>Mango (Fruit)</h2>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="cancel()">
          <md-icon md-font-icon="fas fa-times" aria-label="Close dialog"></md-icon>
        </md-button>
      </div>
    </md-toolbar>

    <md-dialog-content>
      <div class="md-dialog-content">
        Hola!
      </div>
    </md-dialog-content>

    <md-dialog-actions layout="row">
      <span flex></span>
      <md-button ng-click="answer('not useful')">
       Not Useful
      </md-button>
      <md-button class="md-raised" ng-click="answer('useful')">
        Useful
      </md-button>
    </md-dialog-actions>
  </form>
</md-dialog>

ошибка:

angular.js:15570 Error: [$injector:strictdi] DialogController is not using explicit annotation and cannot be invoked in strict mode
https://errors.angularjs.org/1.7.9/$injector/strictdi?p0=DialogController
    at angular.js:138
    at Function.annotate [as $$annotate] (angular.js:4305)
    at injectionArgs (angular.js:5102)
    at Object.invoke (angular.js:5135)
    at $controllerInit (angular.js:11707)
    at MdCompilerService.MdCompilerProvider.MdCompilerService._createController (angular-material.js:3539)
    at Object.linkFn [as link] (angular-material.js:3495)
    at linkElement (angular-material.js:5258)
    at angular-material.js:5134
    at processQueue (angular.js:17948)
(anonymous) @   angular.js:15570
(anonymous) @   angular.js:11849
(anonymous) @   angular-material.js:4964
processQueue    @   angular.js:17948
(anonymous) @   angular.js:17996
$digest @   angular.js:19115
$apply  @   angular.js:19503
done    @   angular.js:13346
completeRequest @   angular.js:13603
requestLoaded   @   angular.js:13508
load (async)        
(anonymous) @   angular.js:13491
sendReq @   angular.js:13291
serverRequest   @   angular.js:13032
processQueue    @   angular.js:17948
(anonymous) @   angular.js:17996
$digest @   angular.js:19115
$apply  @   angular.js:19503
(anonymous) @   angular.js:28958
defaultHandlerWrapper   @   angular.js:3826
eventHandler    @   angular.js:3814

Я не понимаю что я сделал не так Я сделал все согласно этой документации https://material.angularjs.org/latest/demo/dialog#basic -usage Где здесь ошибка?