Initialize ng-admin module in a callback function

Question

I'm trying to configure an ng-admin app. I'd like to load some data from a file before starting the configuration, however when I try to do this in a callback I get the following error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module adminModule due to:
Error: [$injector:nomod] Module 'adminModule' 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.

Here's the code:

$.get('/api/schema', function buildNgConfig(data) {
    var adminModule = angular.module('adminModule', ['ng-admin']);
    adminModule.config(['NgAdminConfigurationProvider', function (nga) {
        var app = nga.application(data.label).baseApiUrl('/api/');
        // ...

If I take the adminModule.config out of the ajax load callback (and use data embedded in the page so I don't need a callback) and put everything in the global scope, it works.

Is there something I need to do if I want to initialize the angular module in a function?

score 3 · Answer 1 · answered Jan 14 '16 at 05:34

Okay, got this sorted out with some help from a friend. The error is a result of Angular's automatic initialization happening before your module has been created. Having:

<body ng-app="myApp">
    <div ui-view></div>

in your HTML tells Angular to initialize itself immediately. Deferring initialization in a callback means your Angular module won't exist and Angular's attempt to initialize it will fail.

Angular's bootstrap process is documented here, along with instructions on how to defer initialization.

To make it work with ng-admin, remove the ng-app from the body:

<body>
    <div ui-view></div>

Then in your app js, you can defer initialization. For example:

angular.element(document).ready(function() {
    var myApp = angular.module('myApp', ['ng-admin']);
    myApp.config(['NgAdminConfigurationProvider', function (nga) {
        var app = nga.application('My App').baseApiUrl('/api/');
        var someEntity = nga.entity(...
        // add entities
        nga.configure(app);
    }]);
    // Now we can manually boostrap
    angular.bootstrap(document, ['myApp']);
});

This waits for page load rather than executing immediately, and everything is in the callback scope rather than global.

Initialize ng-admin module in a callback function

1 Answers1