Angular Azure 静态 Web 应用中的 PWA

Question

有没有人有在新的 Azure 资源中托管 Angular PWA 应用程序的经验，Static Web Apps？

我试图修改 routes.json 文件：

{
    "routes": [
        {
            "route": "/*",
            "serve": "/index.html",
            "statusCode": 200
        }
    ],
    "mimeTypes": {
        "json": "application/json",
        "webmanifest": "application/json"
    }
}

但没有成功。

当我使用 web.config

将相同的应用程序部署到 Azure Web 应用程序时

<staticContent>
  <mimeMap fileExtension="webmanifest" mimeType="application/json" />  
  <mimeMap fileExtension="json" mimeType="application/json" />           
</staticContent>

PWA 可以安装。

Demo project is there.

谢谢。

Answer 1

当我们将任何应用程序配置为 Azure 静态 Web 应用程序时，它使用 npm run build 作为构建应用程序的默认命令。现在在 Angular 应用程序的情况下，它使用内部 运行s ng build 相同的命令。但这里的问题是它不是 运行 在生产模式下。因此，我们可以通过在工作流文件中添加 app_build_command 并使用 npm run build -- --prod 作为其值来配置自定义构建命令。

app_build_command: "npm run build -- --prod"

以下是一些有用的链接：

https://docs.microsoft.com/en-us/azure/static-web-apps/front-end-frameworks https://docs.microsoft.com/en-us/azure/static-web-apps/github-actions-workflow#custom-build-commands

Answer 2

这对我有用： 我试图在管道变量 $deployment_token 中添加一个变量名称，它是 Azure 门户中 Azure 静态 Web 应用程序中的部署令牌。 然后我创建了一个管道来使用 angular 代码，如下所示：

trigger:
- master

pool:
  vmImage: ubuntu-latest

steps:
- task: NodeTool@0
  inputs:
    versionSpec: '14.x'
  displayName: 'Install Node.js'

- task: AzureStaticWebApp@0
  inputs:
      app_location: "/" 
      Routes Location:"add the address of routes.json"
      app_build_command: "npm install -g @angular/cli&& npm install && ng build --prod"
       output_location: "dist"
   env:
       azure_static_web_apps_api_token: $(deployment_token)