angular - 在一个 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

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

<小时/>

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

1. 修复的第一部分:基本标记

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

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

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

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

也可以在angular.json中配置；

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

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

修复的第二部分:LocationStrategy

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

HashLocationStrategy 是一个 LocationStrategy，用于配置位置服务以在浏览器 URL 的哈希片段中表示其状态。

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

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

<小时/>

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

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