AngularJS component with externally hosted templateUrl?

Question

I have an AngularJS application which I am loading as a plug in into another page with a different path. Therefore, my template URLs must be fully qualified in order for them to resolve to the correct file. However, I am receiving Error: $sce:insecurl Processing of a Resource from Untrusted Source Blocked.

I tried using resourceUrlWhitelist, but this didn't make my error go away, so I thought I would try trustAsResourceUrl. However, I don't know how to combine that with my component's definition.

Here is my component:

angular
  .module('synthApp')
  .component('foo', {
    templateUrl: 'http://example.com/app/components/main.template.html',
    controller: MainController
  });

function MainController() {
  ...
}

I tried the following but received an error that $sce is unknown:

angular
  .module('synthApp')
  .component('foo', ['$sce', {
    templateUrl: $sce.trustAsResourceUrl('http://example.com/app/components/main.template.html'),
    controller: MainController
  }]);

function MainController() {
  ...
}

What is the proper way to use trustAsResourceUrl in this situation? Thanks.

Possible duplicate of angular2 include external html template — JSON Derulo
– JSON Derulo, Commented Aug 22, 2017 at 20:45

Estus Flask · Accepted Answer · 2017-08-23 14:59:14Z

4

component accepts a plain object. It cannot be used for DI like directive. .component('foo', ['$sce', { ... }]) isn't a correct syntax for any kind of DI (not just Angular) because it doesn't involve a function where a dependency could be injected.

As explained in this answer, templateUrl can be DI-enabled function.

It should be:

angular
  .module('synthApp')
  .component('foo', {
    templateUrl: ['$sce', function ($sce) {
      return $sce.trustAsResourceUrl('http://example.com/app/components/main.template.html');
    }],
    controller: MainController
  });

edited Aug 23, 2017 at 14:59

answered Aug 22, 2017 at 21:07

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

carmenism Over a year ago

I knew it was bad syntax but I didn't know how to get that $sce into the picture. This worked perfectly. Thanks!

Collectives™ on Stack Overflow

AngularJS component with externally hosted templateUrl?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related