2

I have added ngDialog to my angularjs app, and upon injecting it to my module this is what I got:

Uncaught Error: Mismatched anonymous define() module: function (a){"use strict";var b=a.module("ngDialog",[]),c=a.element,d=a.isDefined,e=(document.body||document.documentElement).style,f=d(e.animation)||d(e.WebkitAnimation)||d(e.MozAnimation)||d(e.MsAnimation)||d(e.OAnimation),g="animationend webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend",h="a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]",i=!1,j={},k=[],l=!1;return b.provider("ngDialog",function(){var b=this.defaults={className:"ngdialog-theme-default",plain:!1,showClose:!0,closeByDocument:!0,closeByEscape:!0,closeByNavigation:!1,appendTo:!1,preCloseCallback:!1,overlay:!0,cache:!0,trapFocus:!0,preserveFocus:!0,ariaAuto:!0,ariaRole:null,ariaLabelledById:null,ariaLabelledBySelec

What is the reason of this error? Do I have to modify the ngDialog.js code?

Added info : injecting in module.js :

var app = angular.module('myApp', ['...', ...., 'ngDialog']);

*** when I inject ngdialog in my controller like this :

app.controller('myController', ['$scope','$http','ngDialog', function ($scope,$http,ngDialog) { ...

this is the error I get :

Error: [$injector:unpr] Unknown provider: ngDialogProvider <- ngDialog <- inventoryController
sisimh
  • 1,287
  • 3
  • 20
  • 37

1 Answers1

0

I'm guessing you are using RequireJS?

From their common errors page:

  • Be sure to load all scripts that call define() via the RequireJS API. Do not manually code script tags in HTML to load scripts that have define() calls in them.
  • If you manually code an HTML script tag, be sure it only includes named modules, and that an anonymous module that will have the same name as one of the modules in that file is not loaded.
  • If the problem is the use of loader plugins or anonymous modules but the RequireJS optimizer is not used for file bundling, use the RequireJS optimizer.
  • If the problem is the var define lint approach, use /*global define */ (no space before "global") comment style instead.

If you post some code of how you are referencing ngDialog then maybe I can help more.

Buh Buh
  • 7,443
  • 1
  • 34
  • 61
  • Okay you are right I am using RequireJS and there was some hardcoded tries because I lost hope .. I removed them there is no error now , but still ngDialog is not defined @Buh Buh – sisimh Jul 12 '15 at 14:34
  • Ok, good. Post the code of where you are creating your module. And also the code for the controller which uses ngDialog. – Buh Buh Jul 12 '15 at 14:36
  • okay just wait a sec I would like to add something @Buh Buh , here is what I do : I have a list of libraries i am adding to my app .. I am looping through them all then minifying them all into one big file .. .so the result is one file with all libs okay ? after that i include this big js file in index like – sisimh Jul 12 '15 at 14:39
  • yes, that sounds ok, as long as the separate files are still in the correct order inside the big file. You need to load angular.js first, then ngDialog, then your own module. – Buh Buh Jul 12 '15 at 14:41
  • but what do you mean in order ? according to what order? – sisimh Jul 12 '15 at 14:43
  • I edited my question and added some info for the current situation @Buh Buh – sisimh Jul 12 '15 at 14:51
  • All that code looks good now. The only thing I can think is you must not be loading the code the correct order, but I obviously can't check that for you. Try to go "view source" or use Fiddler to double check that angular is loaded first, then ngDialog.js then your myApp.js. After that I am out of ideas, sorry. – Buh Buh Jul 12 '15 at 14:59