CODEWITHSUNDEEP
angularjs
user3871
user3871

Reputation: 12708

Unknown provider: eProvider <- e

I'm updating a legacy Angular JS 1.7 app and adding an AngularJS Material Popup modal. The app uses Webpack and compresses when deploying to production (See below: drop_console = true).

Webpack:

new TerserPlugin({
    terserOptions: {
        compress: {
            drop_console: (isProduction) ? true : false, // true
        },
    },
}),

I'm aware that Angular requires the injected dependencies to be quoted, .controller('myCtrl', ['$scope', function($scope) {, since minification changes the names of the dependencies, which may result in the error I'm getting:

[$injector:unpr] Unknown provider: eProvider <- e ...

But the way this modal works is by binding a controller function as such:

Factory Service:

angular.module('MODULE').factory('myService', ['$mdDialog', 
 function ($mdDialog) {
  return {

   ...

      $mdDialog.show({
        controller: DialogController, // bound to dialog controller below
        ...
      });

      function DialogController($scope, $mdDialog) { // dependencies injected here
        ...

How do I provide quotes around the dependencies when they're inside a module, function DialogController($scope, $mdDialog) {?

Upvotes: 1

Views: 452

Answers (1)

Maxim Shoustin
Maxim Shoustin

Reputation: 77904

Try:

 $mdDialog.show({
    controller: ['$scope', '$mdDialog', DialogController]
    ...
  });

 function DialogController($scope, $mdDialog) {/* ...*/}

As a side note, please avoid defining the dialogs inside services/factories.

Upvotes: 3

Related Questions