Angular应用部署Azure SWA遇SCSS构建错误，疑与amCharts5配置相关

问题根源 #

你修改了angular.json的构建器从@angular-devkit/build-angular:application改为browser，同时在tsconfig.json添加了timers和stream的路径映射，这两个操作导致Angular构建流程异常，webpack的bootstrap代码被错误注入到SCSS文件中，引发CSS语法解析错误。

修复步骤 #

1. 验证Angular构建器配置 #

• 优先尝试将angular.json中的构建器改回@angular-devkit/build-angular:application（Angular 17+推荐的新构建器），然后本地执行npm run build，检查dist目录下的样式文件是否正常：

  // angular.json 中项目的architect.build配置
  "builder": "@angular-devkit/build-angular:application",
  "options": {
    "outputPath": "dist/angular_test",
    "index": "src/index.html",
    "browser": "src/main.ts",
    "polyfills": ["zone.js"],
    "tsConfig": "tsconfig.app.json",
    "assets": ["src/favicon.ico", "src/assets"],
    "styles": ["src/styles.scss"],
    "scripts": []
  }
  

• 如果必须使用browser构建器，确保outputPath配置正确，且SWA能正确识别该输出目录。

2. 检查tsconfig.json的路径映射 #

确保timers和stream的路径映射仅针对Node.js模块，不会干扰样式文件解析：

// tsconfig.json 中的compilerOptions.paths
"paths": {
  "timers": ["node_modules/timers-browserify"],
  "stream": ["node_modules/stream-browserify"]
}

避免添加任何与样式文件相关的路径映射，防止构建时路径解析混乱。

3. 配置Azure SWA的构建规则 #

在项目根目录创建staticwebapp.config.json，明确指定构建命令和输出目录，确保SWA使用正确的Angular构建流程：

{
  "build": {
    "appRoot": "src",
    "outputLocation": "dist/angular_test/browser", // 对应browser构建器的输出目录
    "command": "npm run build -- --configuration production"
  }
}

4. 本地清理与重建 #

执行以下命令清理依赖和构建产物，排除缓存导致的异常：

rm -rf node_modules dist
npm install
npm run build

本地构建完成后，检查dist目录下的SCSS/CSS文件是否存在webpackBootstrap代码，若本地正常，再重新部署到SWA。

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