AngularJS ngLocale Error

AngularJS, like all frameworks has its warts. Its documentation is spartan but adequate for most purposed.

When AngularJS encounters an error, it tends to cough up a messy hairball of unhelpful information.

For example,

[js]
[$injector:nomod] Module ‘ngLocale’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.2.7/$injector/nomod?p0=ngLocale
[/js]

By all rights I read this as a failure to load ngLocale. It took me some backtracking to determine that the cause of the error has nothing to do with ngLocale.

The Cause

I simply attempted to use a service that exists in a module that hasn’t been loaded. Adding the module to the application module’s dependency list resolved the error.

My druthers would be an error along the line of “Dependency ‘foo’ not found.”

 

15 thoughts on “AngularJS ngLocale Error

  1. Angus2100

    Hi James, how did you work out which module needed to be added to the SAP dependency list?
    Thanks!

  2. James Reuben Knowles Post author

    I check my code into git frequently and simply look at the diffs between when it worked and when it broke. I would like to delve into the code and see if it’s possible to tweak it so it’s more intuitive, but I’m not in a position where I can do that right now.

  3. jamshid (@jamshid)

    FYI I got the below unhelpful stack trace after I added http://vitalets.github.io/angular-xeditable/#checklist to my controller.js:

    angular.module(‘myApp.controllers’, [‘ngGrid’,’ui.bootstrap’,’xeditable’, “checklist-model”])

    Uncaught object angular.js:79
    (anonymous function) angular.js:79
    (anonymous function) angular.js:3810
    forEach angular.js:324
    loadModules angular.js:3776
    createInjector angular.js:3716
    doBootstrap angular.js:1380
    bootstrap angular.js:1395
    angularInit angular.js:1308
    (anonymous function) angular.js:21460
    j jquery.js:3099
    k.fireWith jquery.js:3211
    n.extend.ready jquery.js:3423
    K jquery.js:3453

    When I a log of the error message at the end of minErr() I saw:

    !!![$injector:nomod] Module ‘ngLocale’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    http://errors.angularjs.org/1.2.16/$injector/nomod?p0=ngLocale angular.js:78
    !!![$injector:nomod] Module ‘checklist-model’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    http://errors.angularjs.org/1.2.16/$injector/nomod?p0=checklist-model angular.js:78
    !!![$injector:modulerr] Failed to instantiate module checklist-model due to:
    Error: [$injector:nomod] Module ‘checklist-model’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
    http://errors.angularjs.org/1.2.16/$injector/nomod?p0=checklist-model
    at http://example.com/apps/bower_components/angular/angular.js:79:12
    at http://example.com/apps/bower_components/angular/angular.js:1612:17
    at ensure (http://example.com/apps/bower_components/angular/angular.js:1536:38)
    at module (http://example.com/apps/bower_components/angular/angular.js:1610:14)
    at http://example.com/apps/bower_components/angular/angular.js:3782:22
    at Array.forEach (native)
    at forEach (http://example.com/apps/bower_components/angular/angular.js:324:11)
    at loadModules (http://example.com/apps/bower_components/angular/angular.js:3776:5)
    at http://example.com/apps/bower_components/angular/angular.js:3783:40
    at Array.forEach (native)
    at forEach (http://example.com/apps/bower_components/angular/angular.js:324:11)

  4. James Reuben Knowles Post author

    Jamshid,

    Yes, that’s an example of the unhelpful stack trace that AngularJS spits out.

    The only thing that I’ve been able to do is:

    1) Ensure that all .js files that contain modules are loaded.
    2) Ensure that all dependencies are listed correctly.

    In your case you have:

    angular.module(‘myApp.controllers’, [‘ngGrid’,’ui.bootstrap’,’xeditable’, “checklist-model”])

    Ensure that you have:
    1) angular, angular-grid, angular-bootstrap, and the other modules installed with bower, and
    2) the correct .js files listed in the .html file for loading.

    I also find it useful to remove all dependencies, then add them one by one until the problem dependency is found.

  5. James Reuben Knowles Post author

    Graeme, Thanks for pointing out that bit of unclear text. I mean “single-page application” (SPA) but misspelled it. I edited that sentence so it’s hopefully more clear.

  6. Juha

    You can find out the missing package by:
    – Set a breakpoint to the top line in the “Uncaught object” stack trace (mine is angular.js:78).
    – Reload, it should pop open the debug mode
    – In Local > Message you can see “Module ‘ngLocale’ is not available! …”
    – Hit “Step over” until message refers to something else (2 times in my case). It should tell you the module that is missing.

    This applies for Chrome and angular 2.1.18. I suspect that missing ngLocale is actually expected behavior and is caught internally.

  7. Paks

    i got same error, to solved this issue, i have modify angular.js file, Version 1.3.1.

    In the angular.js, search function called “function publishExternalAPI(angular)”, under that you could below old value, that you need to replace to new value.

    Old : angularModule(‘ngLocale’,);
    New : angularModule(‘ngLocale’,[]);

    Hope this will help.

  8. Liang

    Thanks, Paks!

    Amazingly, for my same issue, the cause was the:
    Old : angularModule(‘ngLocale’,);
    New : angularModule(‘ngLocale’,[]);

    I was using the AngularJS Sample for .net. The angular.js file version was 1.2.18.

Leave a Reply