通过Azure DevOps部署TypeScript+Angular应用至Azure App Service遇ng模块缺失错误

1. 打包范围错误：当前流水线打包了整个项目目录（含源代码、本地依赖的node_modules等），但Angular生产构建的产物仅在dist文件夹中。部署后执行npm start（通常对应ng serve）需要Angular CLI依赖，但部署环境中既无全局安装的Angular CLI，打包的node_modules也因包含dev依赖，导致生产环境缺少必要运行条件。
2. 启动命令不符合生产场景：ng serve是Angular的开发服务器命令，仅用于本地调试，不适合生产环境。生产环境应直接托管ng build生成的静态文件，而非启动开发服务器。

步骤1：调整构建打包范围，仅打包dist产物 #

修改ArchiveFiles@2任务的rootFolderOrFile参数，指向Angular构建生成的dist文件夹（若你的angular.json中outputPath配置了具体项目名，比如dist/my-app，则路径改为$(System.DefaultWorkingDirectory)/dist/my-app）：

- task: ArchiveFiles@2
  displayName: 'Archive files'
  inputs:
    rootFolderOrFile: '$(System.DefaultWorkingDirectory)/dist'
    includeRootFolder: false
    archiveType: zip
    archiveFile: $(Build.ArtifactStagingDirectory)/$(Build.BuildId).zip
    replaceExistingArchive: true

步骤2：配置生产环境的静态文件托管命令 #

推荐使用serve静态文件服务器托管dist产物，有两种实现方式：

方式A：通过package.json脚本启动 #

1. 在项目的package.json中添加生产启动脚本：

"scripts": {
  "start": "ng serve",
  "start:prod": "serve -s dist -l $PORT"
}

2. 修改流水线中AzureWebApp@1任务的startUpCommand：

startUpCommand: 'npm run start:prod'

注：若未在项目依赖中安装serve，可在构建阶段添加npm i serve --save命令，或直接用npx临时调用（启动命令改为npx serve -s dist -l $PORT）

方式B：直接使用npx启动静态服务器（无需修改package.json） #

修改AzureWebApp@1的启动命令：

startUpCommand: 'npx serve -s dist -l $PORT'

步骤3：优化构建步骤（可选） #

无需全局安装Angular CLI，改用npx执行构建命令，减少环境依赖：

npm i -force
npx ng build --prod

额外注意事项 #

• Azure App Service Linux环境中，端口必须使用环境变量$PORT，不能硬编码固定端口。
• 确保ng build --prod命令在构建阶段正常执行，生成完整的dist产物。

内容的提问来源于stack exchange，提问作者soundcake