Azure 静态 Web 应用中的 Angular PWA答案

【问题标题】：Angular PWA in Azure Static Web AppsAzure 静态 Web 应用中的 Angular PWA
【发布时间】：2020-12-16 07:29:14
【问题描述】：

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

我尝试修改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.

谢谢。

【问题讨论】：

将清单的 mimeType 更改为 application/manifest+json

标签： angular progressive-web-apps azure-static-web-app

【解决方案1】：

当我们将任何应用程序配置为 Azure 静态 Web 应用程序时，它使用 npm run build 作为构建应用程序的默认命令。现在对于 Angular 应用程序，它使用在内部运行 ng build 的相同命令。但这里的问题是它没有在 prod 模式下运行。因此，我们可以通过在工作流文件中添加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

【讨论】：

【解决方案2】：

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

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)

【讨论】：