How to avoid or skip module load error in Angular.js?

Question

//index.html
<html ng-app="app">

//app.js
angular.module('app', 'test-module')

If I don't register the test-module in any of my scripts like below:
angular.module('test-module', [])

I will get errors below in brower and the whole website will not be loaded:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module test-module due to:
Error: [$injector:nomod] Module 'test-module' 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.

Q: How to ensure the website page will be loaded even through there are any unknown modules loaded errors ?

I think window.load will help you to know that your website is loaded — Just code
– Just code, Commented Nov 12, 2013 at 8:27
@dholakiyaankit Perhaps I didn't say clearly or you didn't understand my meaning. When I get this error, the whole web page can't be rendered to us, in other words, what we see in brower is blank page. I want to get the original page whether there are errors. — just4fun
– just4fun, Commented Nov 12, 2013 at 8:37
@dholakiyaankit give you the source code? Isn't the bold words in the question above ? — just4fun
– just4fun, Commented Nov 12, 2013 at 8:46

Anton Rodin · Accepted Answer · 2013-11-12 09:30:01Z

0

I think you should look on this problem from other side.

If you use test-module (module for testing) you in development process. You could configure your backend for work in several environments. For example dev, test and prod. You can handle sub domain and decide on backend which modules need to be loaded. dev.yourdomain.com (for dev environment), yourdomain.com (for production environment) and test.yourdomain.com (for tasting).

You can generate such script:

<script type="text/javascript">
    var MyModules = ['test-module'];
</script>

And handle it so:

angular.module.apply(angular, 'app', MyModules);

answered Nov 12, 2013 at 9:30

Anton Rodin

9912 gold badges12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

just4fun Over a year ago

You mean I should load the module names from database? Actually, the modules are really loaded from database now...There is a web framework developed in Angular.js now, and other teams are developing their own modules which will be loaded in the main framework. So I get angular.module('app', {0}) from backend code and the {0} is from database. If any teams save module names in database without registering them in any scripts(like angular.module('module-of-xxxteam', [])) first, the error will occur and other teams will also see the blank web page with brower errors. That is it.

Anton Rodin Over a year ago

Maybe you should move module list from database to config ( YAML e.g. ). Each developer will have their own stack of modules. When module ready to share with other developer, hi just commit his changes of config.

just4fun Over a year ago

Sorry, I don't understand clearly. If I get module names from config, there is same problem if I haven't register them in any scripts, isn't it?

Anton Rodin Over a year ago

Yes, it is, but only you will see error. Other developers will be able to work. You should follow one simple rule: Add module to application befor add it to config. If you don't need some module anymore, delete it from config. The point of this approach is to isolate one developer from other as much as it possible.

Anton Rodin · Accepted Answer · 2013-12-12 07:55:40Z

I found solution to you answer :)

Angular have array of requires for each module, so you can easily push some requires if you want to use this module.

In your case you can do this

//index.html
<html ng-app="app">

//app.js
angular.module('app', [])

//test-module.js
angular.module('test-module', [])
angular.module('app').requires.push('test-module');

So if you load test-module.js to your browser, you automatically inject dependency to your app.

Collectives™ on Stack Overflow

How to avoid or skip module load error in Angular.js?

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related