Gracefully handling AngularJS Error: $injector:nomod Module Unavailable

Question

My angular app depends on a third-party angular service:

var app = angular.module("ninjaModule", ['angular-google-analytics']);

The app loads up just fine, as long as my ad-blocking plugins are off. However, with ad-blockers on angular throws an $injector:nomod error, failing to load the whole app.

I'm looking for a way to gracefully handle these errors, and therefore be able to load the app regardless of ad-blockers. If angular-google-analytics won't be there - fine, it's not critical, I can deal with it or set up some fallback. But a situation where the whole app crashes is not an option for me. Any ideas?

To be precise - I don't want to work around ad-blockers, e.g. by renaming my script files. I'd expect an angular try-catch magic trick.

Plunker: http://plnkr.co/edit/sbEG6vclPidPSNGV5Bsa

score 4 · Accepted Answer · answered Sep 25 '15 at 11:49

I finally got it working. The solution requires a few hacks, though:

checking if angular-google-analytics is loaded
preparing the dependency list (deps) for the main module on the fly
using $injector instead of Analytics explicitly

Still, I need to configure AnalyticsProvider, but it should be relatively easy to do with $injector.

var deps = [];

try {
  angular.module("angular-google-analytics"); // this throws if GA script is not loaded
  deps.push('angular-google-analytics');
} catch(e){ console.error("GA not available", e); }

angular.module('mainApp', deps)
.run(function($rootScope, $injector) {
  try {
    Analytics = $injector.get('Analytics');
    $rootScope.trackPage = function() {
      console.log('Analytics in action!');
      Analytics.trackPage();
    }
  } catch(e) {
    $rootScope.trackPage = function(key, label) {
      console.log("Fallback in action!")
    }
  }
})
.controller('MyCtrl', function($rootScope, $scope) {
  $scope.message = 'Hello World!';
  $rootScope.trackPage();
});

Updated plunker: http://plnkr.co/edit/Zo4RgKOybzhvJQdW2nQZ?p=preview

And the idea is very similar to this answer: http://stackoverflow.com/a/22173678/1640299 — Paweł Rychlik, Sep 25 '15 at 11:54
Confirmed works on my app. Note that intellij Idea is going to complain about Analytics not being defined but ignore the error. — Ganesh Krishnan, Aug 28 '16 at 10:15

yvesmancera · Answer 2 · 2015-09-24T17:37:28.013

2

Since angular-google-analytics requires a config block to set the account, your best bet is to separate google analytics reporting into a separate sub-module of your App:

//create separate module for analytics reporting
var reportingModule = angular.module('mainApp.reporting', [
  'angular-google-analytics'
])
.config(function(AnalyticsProvider) {
  AnalyticsProvider.setAccount('UA-HELLO-GA');
})
.run(function(Analytics) {
  console.log('mmm.. analytics is good for you');
});

And then inject this sub-module into your main module asynchronously via the module.requires array so it runs after the main module has finished bootstrapping:

var mainApp = angular.module('mainApp', [

])
.controller('MyCtrl', function($scope) {
  $scope.message = 'Hello World!';
});

//set the dependency after app finished bootstrapping
setTimeout(function() {
  angular.module('mainApp').requires.push('myapp.reporting');
}, 1);

This way the main module finishes bootstrapping without having the reporting sub-module errors affecting it.

Here's a forked version of your plunkr: http://plnkr.co/edit/lgNZOz4MZx0FGoCOGRC9

edited Sep 24 '15 at 17:37

answered Sep 22 '15 at 23:49

yvesmancera

2,915
5
24
33

This looked promising, but the exception is not thrown from the `angular.module()` method. Neither it is thrown from `app.requires.push()`, so the try-catch doesn't really help. – Paweł Rychlik Sep 24 '15 at 07:40
Actually, all the `app.config(...)`, `app.factory(...)`, `app.value(...)` calls are successful (though they are probably async), and the error gets thrown later on from the internals of angular. – Paweł Rychlik Sep 24 '15 at 07:59
I just saw your updated question with the plunkr, and since I'm not familiar with angular-google-analytics I didn't know a `config` block was needed to set the account. This changes things. Let me do some research and I'll update my answer. – yvesmancera Sep 24 '15 at 17:05
@PawełRychlik please see my updated answer. I hope it helps. – yvesmancera Sep 24 '15 at 17:37
Well, thanks for your efforts, but my issue is still open: running the plunk with adblockers off shows Hello World, but the GA script is not activated - that console log doesn't show up :) (even after I uncomment the GA ` – Paweł Rychlik Sep 25 '15 at 10:31
@yvesmancera It looks like angular won't add new modules once it's been initialized. Related question: http://stackoverflow.com/questions/18591966/inject-module-dynamically-only-if-required – Lukasz Wiktor Sep 25 '15 at 11:06

score 1 · Answer 3 · edited May 23 '17 at 12:09

The accepted answer breaks gulp dependency injection so I iterated upon it to come up with a more self contained method (you'll still need to inject this module's script tag manually though if you are relying on gulp-inject).

You can add the dependency dynamically and you can avoid the use of $injector completely.

angular.module('app', [
    'your',
    'regular',
    'dependencies'
])
    .config(function(...) {
        /*your normal code*/
    })
    .run(function(...) {
        /*with no concern for analytics*/
    })
    //mimicking your answer for equivalence
    .controller('MyCtrl', function($rootScope) {
        if ($rootScope.Analytics)
            $rootScope.Analytics.trackPage();
    }) 
;


//protect against adblockers
try {
    //throws if not available
    angular.module('angular-google-analytics');

    //dynamically add the dependency
    angular.module('app').requires.push('angular-google-analytics');

    //set it up
    angular.module('app')
        .config(function (AnalyticsProvider) {
            AnalyticsProvider.setAccount('UA-00000000-0');
        })
        //so we dont need to use $injector
        .run(function(Analytics, $rootScope) {
            $rootScope.Analytics = Analytics;
        })
    ;
} catch(e) { console.error('GA not available'); }

Gracefully handling AngularJS Error: $injector:nomod Module Unavailable

3 Answers3

Linked