当应用程序是“自托管”或“集成”时，如何规范化 Angular 应用程序中的 URL 以正确解析答案

【问题标题】：How to normalize URL's in an Angular app to resolve correctly when the app is "self hosted" or "integrated"当应用程序是“自托管”或“集成”时，如何规范化 Angular 应用程序中的 URL 以正确解析
【发布时间】：2019-08-08 21:46:26
【问题描述】：

在这个问题中，“集成”是指从另一个 Web 应用程序中的某个路径调用的 Angular 应用程序，而“自托管”是指使用 ng serve --open 命令从 VS Code 等工具运行，其中根 url 是设置为 src 文件夹。

在 MVC 中，有诸如 Url.Action() 和 Url.Conntent() 之类的指令可用于规范化应用程序内任何位置的相对路径。

我一直在阅读有关 APP_BASE_REF 的信息，但是，我认为这不会奏效。是否可以使用一种机制来允许类似于 --> <img ng-fromAppRoot('~/assets/my.png')> 的构造。

此外，在诸如 background:url("~/assets/my.png") 之类的 css 结构中，将在“集成”而非“自托管”中工作，反之亦然。

当“集成”可能是解决方案的一部分时，将根 url 作为应用初始化程序的一部分传递。

这通常是如何处理的，我正在寻找一种不需要更改代码即可在调试/发布之间切换的解决方案？

【问题讨论】：

我从未尝试过，但我认为您可以通过 ng build --base-href 解决这个问题，但是任何不在 Angular 项目中的 Angular 资产都可能需要完整路径
我只关心在应用程序的上下文中加载资产。我会试试这个。谢谢。

标签： asp.net-mvc angular angular5 angular7

【解决方案1】：

如果您不关心漂亮的 URL，您可以使用 HashLocationStrategy (docs) 并一起删除基本 URL。只需使用指向您资产的相对链接，例如 <img src="assets/logo.svg">。

如果您需要漂亮的 URL，那么您应该创建自己的函数，该函数将像您描述的 Url.Action() 和 Url.Content() 一样工作。

【讨论】：

感谢您的指导。