Stop Angular overrides

Whenever two angular module have same name, the last one registered overrides the previous one, like in this example. This can cause how to debug bugs, and manual namespaces is not the panacea: people forget things, or have to use long repetitive parts.

Luckily it is easy to come up with a small JavaScript function to insert between angular and your code to proxy angular.module calls and check if the module with the given name has already been registered. This is exactly what my stop-angular-overrides does.

Just insert the single script before any of your modules, and enjoy nice detailed exception message, like this one:

<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/stop-angular-overrides/stop-angular-overrides.js"></script>
... your angular code with module name clashes like these
angular.module('A', []) ...
...
angular.module('A', []) ...
... ang get
Uncaught Error: Angular module A already exists stop-module-override.js:17
  angular.module stop-module-override.js:17
  A2 A2.js:3

Compared to compiling modules, dependency injection and other complicated and expensive operations normally happening at the Angular application startup, keeping and checking a hashtable every time a module is defined using angular.module negligently affects the performance. You can also use this script in debug environment only, skipping it in production.

Controllers and filters

Angular can also silently override controller functions by name and filters with very weird results and non-intuitive resolution. stop-angular-overrides checks each controller and filter name to be globally unique to prevent this. Nothing is needed to set this up, just add the script as shown above.

Implementation detail

I use several objects to check if name is already taken. The objects are created using a slightly unusual notation:

var existingModules = Object.create(null);

The existingModules object has no prototype, it is a bare collection of strings. I called such objects naked or bare, other people call them dictionaries. The bare objects do not have several inherited properties that a typical JavaScript object has that potentially might interfere with stored values. For example, a typical object will inherit toString from Object, and thus cannot register angular module or filter toString without performing extra hasOwnProperty check.