angularjs - how do I get ng-include directive to work with a Content Delivery Network?

Question

Is it possible to get ng-include directive to work with a CDN?

In this case:

<div ng-include='http://cdn.somewebsite.com/templates/home.tpl.html'></div>

The cdn sub-domain of somewebsite.com is mapped through DNS/CName to a content delivery network.

However when loading the main site somewebsite.com, it does not render the template. I guess internally it is treating this as a cross-domain call.

Is there any work arounds to get Angular templates be hosted on third party CDN's and work with the local domain?

Answer 1

Yes, you are right - the problem is with cross-domain call.
Official docs say:

By default, the template URL is restricted to the same domain and protocol as the application document. This is done by calling $sce.getTrustedResourceUrl on it. To load templates from other domains or protocols you may either whitelist them or wrap them as trusted values. Refer to Angular's Strict Contextual Escaping.

and

Please note: The browser's Same Origin Policy and Cross-Origin Resource Sharing (CORS) policy apply in addition to this and may further restrict whether the template is successfully loaded. This means that without the right CORS policy, loading templates from a different domain won't work on all browsers.

Example:

angular.module('myApp', []).config(function($sceDelegateProvider) {
  $sceDelegateProvider.resourceUrlWhitelist([
    // Allow same origin resource loads.
    'self',
    // Allow loading from outer templates domain.
    'http://cdn.somewebsite.com/templates/**'
  ]); 
});

Helpful links:

• ngInclude
• $sce

So your problem may be solved by appropriate angular settings, but not for all browsers.