Angular templateUrl和支持外部资源，如Web API

Question

多租户网站 - .Net Core 1 with Angular 2/4

我正在创建一个多租户应用程序，我基本上希望让每个租户能够更改某些表单。每个窗体将包含相同的视图模型和属性，它更像是一种布局/样式。我想使用 angular 并且我一直在尝试使用组件上的 templateUrl 属性从同一站点中的 API 端点获取 html。如果直接访问端点，则端点有效，但在角度组件中引用时则不工作。

@Component({
selector:'home',
templateUrl:'/api/app-template-loader/login-form'
})
export class HomeComponent {
}

控制器：

[Route("api/app-template-loader")]
public class AppTemplateLoaderController : Controller
{
private AppTenant currentTenant;
public AppTemplateLoaderController(IEnumerable<AppTenant> tenant)
{
this.currentTenant = tenant.FirstOrDefault();
}
[HttpGet]
[Route("{templateName}")]
public string Get(string templateName)
{
if (templateName == "home")
{
return $"<h1>{this.currentTenant.Name}</h1>";
}
return "<h1>No template</h1>";
}
}

我已经尝试了一些非常基本的东西，但我似乎无法让它工作。在浏览器中访问"/api/app-template-loader/login-form"会返回 html，但在访问组件时出现此错误：

ERROR in ./ClientApp/app/components/home/home.component.ts
Module not found: Error: Can't resolve './/api/app-template-loader/login-form' in '<local disk path omitted for privacy>ClientAppappcomponentshome'
@ ./ClientApp/app/components/home/home.component.ts 18:18-66
@ ./ClientApp/app/app.module.shared.ts
@ ./ClientApp/app/app.module.client.ts
@ ./ClientApp/boot-client.ts
@ multi event-source-polyfill webpack-hot-middleware/client?path=%2F__webpack_hmr ./ClientApp/boot-client.ts

我认为这一定是可能的，但我正在努力在网上和这里找到任何具有相同问题的示例。

任何指示将不胜感激。

提前谢谢。

Answer 1

看来，这只是路径问题。 您是否尝试过：

templateUrl:'api/app-template-loader/login-form'

然后什么是登录表单？如果它是一个文件夹，它会出错，如果它是一个文件，你能浏览它吗，它可以从网络访问吗？(使用 Web 浏览器验证其可用性(。

PS ：如果您尝试获取外部资源(您的网站(，请记住，可能会阻止响应以防止跨源资源共享(CORS(。