Val Val - 4 months ago 87
AngularJS Question

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

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

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:

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

Comments