I am currently in the process of developing a series of Angular directives. Some of these directives will rely on third-party Angular dependencies such as ngFileUpload, ui-select. Currently, I am declaring them all like this:
angular.module('module1', ['ngFileUpload'])
.directive('MyDirective1NeedNgFileUpload', function() {
// ...
});
angular.module('module2', ['ui-select'])
.directive('MyDirective1NeedUiSelect', function() {
// ...
});
angular.module('myLibrary', ['module1', 'module2']);
In a real application scenario, the user would typically have to include three JavaScript files like so:
<html>
<body>
...
<script src="/path/to/ng-file-upload.js"></script>
<script src="/path/to/ui-select.js"></script>
<script src="/path/to/myLibrary.js"></script>
<script src="app.js"></script>
</body>
</html>
// in app.js
angular.module('myapp', [
'myLibrary',
'ngFileUpload',
'ui-select'
]);
In Application 1, if I only use `module1`, then there is no need for `ui-select` at all. However, including `ui-select` is still necessary to prevent the browser from throwing an error such as `Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/...`.
My question is how can I implement lazy loading of these third-party dependencies, loading them only when required, or alternatively provide a more specific error message indicating what is missing?