"Unknown provider: ngDialogProvider"

Question

In my app.js I have

 var app = angular.module("atlas", ["ngRoute", "ngDialog"]); 

for my controller I have

 app.controller("nodeController", function ($scope, $http, ngDialog) 

ngDialog makes an error:

>Error: [$injector:unpr] Unknown provider: ngDialogProvider <- ngDialog <-nodeController

also i used overridden css and js files

 <link rel="stylesheet" href="~/Content/ngDialog-custom-width.css" /> <link rel="stylesheet" href="~/Content/ngDialog-theme-default.min.css" /> <link rel="stylesheet" href="~/Content/ngDialog-theme-plain.min.css" /> <link rel="stylesheet" href="~/Content/ngDialog.css" /> <script src="~/Scripts/jquery-2.1.3.min.js"></script> <script src="~/Scripts/angular.js"></script> <script src="~/Scripts/angular-route.js"></script> <script src="~/Scripts/ngDialog.js"></script> 

I tried all the answers on stackoverflow and none of them work for me

Answer 1

the problem was ngDialogProvider configuration

after var app = angular.module("atlas", ["ngRoute", "ngDialog"]);

we must use:

 app.config(["ngDialogProvider", function (ngDialogProvider) { ngDialogProvider.setDefaults({ className: "ngdialog-theme-default", plain: false, showClose: true, closeByDocument: true, closeByEscape: true, appendTo: false, preCloseCallback: function () { console.log("default pre-close callback"); } }); }]); 

Answer 2

I got the same error message when I first tried to add ngDialog to my application, and I tried the ngDialogProvider fix described above. This did not work for me. Then I realized that my application was divided into two modules; a top-level module defining a controller and a main module defining a service with some lower-level code. My code is structured this way because I started with the angular -phonecat tutorial as a template. I injected ngDialog into the controller and tried to use it in the service. As soon as I fixed the injection in the correct module, the problem was resolved.