在一个 Azure Blob 存储上托管多个 Angular 应用程序

Question

在工作中，我们在一个 Azure Blob 存储上托管多个 Angular JS 应用程序。有一个 Azure 函数充当代理并导航到合适的应用程序文件夹和 html 文件。

现在我想用 Angular 9 应用程序替换一些 Angular JS 应用程序。

但上述方法适用于 Angular JS 应用程序，但不适用于 Angular 9 应用程序。

如果我将 Angular 9 应用程序作为静态网站托管在不同的存储上，它就可以正常工作。但由于无法在 Azure 存储帐户上托管多个应用程序作为静态网站，因此我正在寻找解决此问题的方法。

是否可以在一个 Azure Blob 存储上托管多个 Angular 9 应用程序？如果是：我应该做什么才能使这项工作成功？

先感谢您！

Answer 1

您可以在子文件夹中部署静态角度应用程序，并在不同的子文件夹中同时部署多个应用程序。它将需要一些配置更改，可能需要更改一些代码，因为默认配置将无法加载。

\n\n

有2个主要问题；baseHref 和 LocationStrategy。

\n

\n
1. 修复的第一部分：基本标签
\n

\n

当基本标记配置错误时，应用程序将无法加载，并且浏览器控制台会针对丢失的文件显示 404 - 未找到错误。查看它试图在哪里找到这些文件并适当调整基本标签。

\n

在子文件夹结构化生产服务器上，您可以配置此选项以防止错误。例如，当加载应用程序的 URL 类似于http://www.example.com/my/app/时，子文件夹为 my/app/，您应该添加到服务器版本的 index.html。

\n

您可以像这样在构建时进行配置；

\n

ng build --prod --output-path docs --base-href /my/app/\n

\n

也可以在 angular.json 中配置；

\n

{\n  //...\n  "projects": {\n    "app": {\n      //...\n      "architect": {\n        "build": {\n          //...\n          "configurations": {\n            "production": {\n              "baseHref": "/my/app/",\n              //...               \n

\n

可以设置 baseHref 来.实现通用应用程序，该应用程序通过相对路径在所有子文件夹中工作，但所有使用的资源都应遵循应用程序内的相对路径以符合要求。

\n

\n
2. 修复的第二部分：LocationStrategy
\n

\n

当位置策略配置错误时，应用程序无法加载任何子路由，并且浏览器控制台显示 404 - Not Found。HashLocationStrategy 是另一种不受此子文件夹 \xe2\x80\x93 子路由不匹配影响的策略。

\n

HashLocationStrategy 是一个 LocationStrategy，用于配置 Location 服务以在 browser\xe2\x80\x99s URL 的哈希片段中表示其状态。

\n

为了在 Angular 应用程序中启用 HashLocationStrategy，我们在使用 RouterModule 提供路由时传递 {useHash: true}，如下所示：

\n

RouterModule.forRoot(routes, {useHash: true})\n

\n\n

正确设置 LocationStrategy 和 baseHref 后，您可以简单地构建输出文件夹（默认为 dist/）中的所有内容并将其复制到服务器上的子文件夹中。

\n

欲了解更多信息：https://celilsemi.erkiner.com/blog/static-angular-deployment-to-a-subfolder/

\n