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.

Answer 1

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
  });