How can I declare the dependencies of lazy loaded (ocLazyLoad) features (e.g. ngAnimate, ui-bootstrap,..)?

Question

I want to load angular-animate and angular-ui-bootstrap only for a certain view and for this reason I use oc.lazyLoad. In most cases it works properly.

In the following example I have some troubles (Errror: [$injector:nomod] Module 'ngAnimate' is not available!):

That's my module:

angular.module('myApp.whatEver', ['oc.lazyLoad', 'ngAnimate', 'ui.bootstrap'])

.controller('WhatEverController', ['$ocLazyLoad', function($ocLazyLoad) {
    $ocLazyLoad.load('icons_and_fonts');  // works
    $ocLazyLoad.load('angular-animate');  // does not work
    $ocLazyLoad.load('angular-ui-bootstrap'); // does not work
 }]);

The problem is, it is too early to declare dependencies at the top ('ngAnimate' and 'ui-bootstrap') because they are placed in the controller below and will be lazy-loaded.

What/how is the correct way to do that?

The following example runs without errors and ng-Animate and ui-boostrap have been loaded, but not available in the view because of missing dependencies.

angular.module('myApp.whatEver', ['oc.lazyLoad'])

.controller('WhatEverController', ['$ocLazyLoad', function($ocLazyLoad) {
    $ocLazyLoad.load('icons_and_fonts');  // works
    $ocLazyLoad.load('angular-animate');  // is loaded but not available
    $ocLazyLoad.load('angular-ui-bootstrap'); // is loaded but not available
 }]);

It currently works only then if I integrate script files directly (in the main view - index.html) and I forgo lazy loading (what is not my purpose):

Excerpt: index.html

<script src="components/angular-ui-bootstrap/ui-bootstrap-tpls-0.14.1.min.js"></script>  
<script src="components/angular-animate/angular-animate.min.js"></script>

Excerpt: Whatever.js

    angular.module('myApp.whatEver', ['oc.lazyLoad', 'ngAnimate', 'ui.bootstrap'])

.controller('WhatEverController', ['$ocLazyLoad', function($ocLazyLoad) {
    $ocLazyLoad.load('icons_and_fonts');  // works
 }]);

Some Additional information (not needed for the answer but for the sake of completeness) about ocLazyLoadProvider.config...

// LAZY LOAD
    $ocLazyLoadProvider.config(
        {
            modules: [
                {
                    name: 'icons_and_fonts',
                    files: [
                        'components/font-awesome/css/font-awesome.min.css',
                        'components/weather-icons/css/weather-icons.min.css'
                    ]
                },
                {
                    name: 'angular-ui-bootstrap',
                    files: [
                        'components/angular-ui-bootstrap/ui-bootstrap-tpls-0.14.1.min.js'
                    ]
                },
                {
                    name: 'angular-animate',
                    files: [
                        'components/angular-animate/angular-animate.min.js'
                    ]
                }
            ],
            debug: true,
            events: true
        }
    )

score 0 · Accepted Answer · answered Oct 12 '15 at 23:00

0

A couple of things:

Put the core Angular modules first in your block before you add Angular UI Bootstrap.
What are you trying to accomplish by lazy loading?

IMO, the right solution here, if you REALLY want lazy loading, is to use either AMD or ES6 import syntax with commonJS (preferably the latter, ES6 w/ commonJS) as it will do what you want by design and not require a 3rd party library.

Finally, this question has nothing to do with Angular or Angular UI bootstrap, but rather, generic Javascript module loading. You could replace the two with two random, but related, libraries and the same solution would apply.

answered Oct 12 '15 at 23:00

icfantv

4,523
7
36
53

Thank you @icfantv, but what dou you mean by "Put the core Angular modules first in your block before you add Angular UI Bootstrap?" Yes, these two libraries are just examples, no matter what library. – Oct 13 '15 at 06:47
The Angular UI Bootstrap library depends on Angular (and specifically, the `angular` object being available), so it should be before any other Angular dependencies. Additionally, the core Angular modules (route, animate, etc...) also define services used so while Angular loads everything before booting, it's a good idea to keep sensical ordering. – icfantv Oct 13 '15 at 17:34

How can I declare the dependencies of lazy loaded (ocLazyLoad) features (e.g. ngAnimate, ui-bootstrap,..)?

1 Answers1