Detect if Angular dependencies [angular-route, angular-resource, etc] are loaded for CDN fallback

Question

I'm using Angular JS on ASP.NET MVC 4 and I am using script bundles to load from a cdn and also load from the origin server in case of a cdn failure like so:

var jQuery = new ScriptBundle("~/bundles/scripts/jquery",
            "//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js") // CDN
            .Include("~/Scripts/jquery-{version}.js");  // Local fallback
jQuery.CdnFallbackExpression = "window.jQuery"; // Test existence
bundles.Add(jQuery);

and

var angular = new ScriptBundle("~/bundles/scripts/angular",
            "//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js")
            .Include("~/Scripts/angular.js");
angular.CdnFallbackExpression = "window.angular";
bundles.Add(angular);

It is fairly easy to detect if jQuery or AngularJS exist using window.jQuery and window.Angular respectively. The ASP.NET bundling mechanism evaluates the CdnFallbackExpression text to see if it needs to fall back to the origin server.

However, in later versions of AngularJS, other modules such as ngRoute and ngResource are separated into their own files to be loaded at the developers discretion.

How do I detect if other AngularJS modules are loaded? What could I type in the console to see if ngAnimate, ngRoute, ngResource, etc. succeeded in loading from the CDN?

Maybe `angular.module('moduleName')` works. It may throw an exception if the module doesn't exist, but I'm not sure if it's the right way of doing it. — gustavohenke, Sep 11 '13 at 03:20
@gustavohenke I was toying with that but you are right, the injector gets angry. Very angry. — Mike Trionfo, Sep 11 '13 at 14:39
If you can wrap it in a `try..catch` block, maybe that's the way :) — gustavohenke, Sep 11 '13 at 15:02

score 18 · Accepted Answer · answered Dec 25 '13 at 05:01

Here is an approach that works specifically with the Microsoft Optimization Framework as you provided in the OP

angularjsRoute.CdnFallbackExpression = @"
    function() { 
        try { 
            window.angular.module('ngRoute');
        } catch(e) {
            return false;
        } 
        return true;
    })(";

This expression is not valid javascript itself, but the MS Optimization Framework uses this and eventually produces the following output to the page. Now we have a valid self-executing javascript function that returns true or false based on whether the angular module loads.

<script>(
function() { 
    try {
        window.angular.module('ngRoute');
    }
    catch(e) {
        return false;
    }

    return true;
})()||document.write('<script src="/bundles/scripts/angularjs-route"><\/script>');</script>

the statement that you have as the compiled version isn't valid javascript either and the console in Chrome no likey. — Brad, Feb 19 '14 at 22:51

m59 · Answer 2 · 2014-02-10T17:40:10.447

This is what I use:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.5.0/ui-bootstrap.min.js"></script>
<script>
  try { //try to load from cdn
    //use the name of the angular module here
    angular.module('ui.bootstrap');
  } 
  catch(e) { //error thrown, so the module wasn't loaded from cdn
    //write into document from local source
    document.write('<script src="sys/lib/ui-bootstrap.js"><\/script>'); 
  }
</script>

angular.module throws an error if there is no such module, which is exactly what we need to know! try/catch is great here.

score 4 · Answer 3 · answered Oct 04 '14 at 13:23

(Variation on the answer from qntmfred.)

Instead of leaving that strange trailing open bracket, just use a normal immediately-invoked function.

The result will simply be that the Optimization Framework will wrap this in another set of parentheses, but leaves your C# much clearer.

angularjsRoute.CdnFallbackExpression = 
    @"(function() { 
        try { 
            window.angular.module('ngRoute');
        } catch(e) {
            return false;
        } 
        return true;
    })()";

score 0 · Answer 4 · answered Jan 12 '16 at 00:19

Another variation...

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>
<script>
    try {
        window.angular.module('ui.bootstrap');
    }
    catch(e) {
        var script = document.createElement('script');
        script.src = 'lib/bootstrap/dist/js/bootstrap.js';
        document.getElementsByTagName('head')[0].appendChild(script);
    }
</script>

Detect if Angular dependencies [angular-route, angular-resource, etc] are loaded for CDN fallback

4 Answers4

Linked