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
}
)
A couple of things:
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.