如何映射Angular2的templateUrl以从其他服务器获取视图？

Question

我正在服务器A上托管一个有角度的2应用程序。它在服务器A上运行正常，因为所有文件都应该在它们的位置。在服务器B上，公司将iframe放入一个文档中，该文档将加载一个引用所有指向我的应用程序的页面，希望将我的应用程序放在页面的子部分中。

我遇到了有关服务器B请求我的导入和视图的问题。在服务器A上，我有一个非常简单的System.config：

System.config({
 packages: {
   'scripts': {
     defaultExtension: 'js'
   }
 }
});
System.import('scripts/boot');

为了从服务器B加载脚本，它已更改为：

System.config({
 packages: {
   'scripts': {
     defaultExtension: 'js'
   }
 },
 map: {
   scripts: 'http://ServerB/scripts'
 }
});
System.import('scripts/boot');

这将成功加载我的boot.js和其他js文件，直到组件请求视图。我的主要观点是组件装饰器：

@Component({
  selector: 'app',
  directives: [FORM_DIRECTIVES, CORE_DIRECTIVES, ROUTER_DIRECTIVES],
  templateUrl: 'views/nav.html'
})

这将请求http://ServerA/views/nav.html，但我希望它能从服务器B上的相同路径获取视图。

我知道整个iframe业务请求PHP页面而不是我的实际站点是低效且有问题的，但它不受我的控制。 iframe将收到与我的普通网站不同的index.html，因此我可以给它一个不同的SystemJS配置，并将其指向不同的启动文件，但之后它会请求所有与我在服务器A上的应用程序请求的文件相同的文件。

如果不通过并将我的所有templateUrl更新为完全限定名称，有没有办法可以将获取请求的所有请求路由到不同的路径？

我已经尝试过这个配置，但它不起作用：

System.config({
 packages: {
   'scripts': {
     defaultExtension: 'js'
   }
 },
 map: {
   scripts: 'http://ServerB/scripts',
   views: 'http://ServerB/views'
 }
});
System.import('scripts/boot');