在虚拟路径中部署 Angular 14答案

【问题标题】：Deploy Angular 14 in Virtual Path在虚拟路径中部署 Angular 14
【发布时间】：2023-01-24 16:32:24
【问题描述】：

我想在反向代理后面部署一个角度应用程序，将其重新路由到虚拟路径。该应用程序现已在https://my.url.ch/beta-path 中可用。同一个应用程序正在根目录下运行。访问该应用程序后，我收到以下错误（基本上每个文件都有一个错误，请注意缺少beta-path）：

拒绝应用风格 'https://my.url.ch/styles.c5e5953b534f8161.css' 因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并且是严格的 MIME 检查已启用。

Web-Inspector 会说出名称，从 beta 路径调用在根目录下提供的应用程序。

现在我尝试在angular.json 中使用baseHref 属性但没有成功，我可以在index.html 中看到它但它没有做任何帮助：
(not working)
<base href="/beta-path">
我迷路了，有人得到一些提示吗？

【问题讨论】：

标签： angular reverse-proxy angular14

【解决方案1】：

听起来问题在于您的 Angular 应用程序中的样式和其他资产的 URL 是使用错误的基本路径生成的，因此反向代理无法正确提供它们。

解决此问题的一种方法是将 angular.json 文件中的 baseHref 属性设置为正确的基本路径，在本例中为 /beta-path。

"projects": {
    "yourProjectName": {
        "architect": {
            "build": {
                "options": {
                    "baseHref": "/beta-path",
                }
            }
        }
    }
}

此外，您可以考虑在构建 Angular 应用程序时使用 --deploy-url 选项来设置资产 URL 的基本路径。

ng build --prod --deploy-url /beta-path

解决该问题的另一种方法是修改反向代理配置以在提供资产之前重写资产的 URL 以包含 beta 路径。

请注意，如果问题仍然存在，则可能是服务器端配置有问题。确保您的反向代理配置为使用正确的 Content-Type 标头提供资产。

【讨论】：