Angular 8项目Azure发布后报Uncaught SyntaxError白屏问题

• 调整Azure Pipeline配置后，本地环境运行无任何报错，Azure构建流程执行顺畅无报错，但发布完成后站点白屏无法正常访问
• 浏览器控制台抛出如下错误：

Uncaught SyntaxError: Invalid or unexpected token (at main.18f4494f2c11857ad225.js:2:1389490)

• 错误截图：

• index.html：脚本段由Angular构建流程自动注入，无显式错误，截图如下：
• tsconfig.json 配置详情：

{
    "compileOnSave": false,
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": "src",
        "declaration": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "lib": [
            "es2018",
            "dom"
        ],
        "module": "esnext",
        "moduleResolution": "node",
        "outDir": "./dist/out-tsc",
        "resolveJsonModule": true,
        "sourceMap": true,
        "strictPropertyInitialization": false,
        "target": "es5",
        "typeRoots": [
            "node_modules/@types"
        ]
    },
    "include": [ "src/**/*", "tests/**/*" ]
}

• angular.json 生产环境构建配置详情：

{
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "scripts": [],
    "optimization": true,
    "outputHashing": "all",
    "sourceMap": false,
    "extractCss": true,
    "namedChunks": false,
    "aot": true,
    "extractLicenses": true,
    "vendorChunk": false,
    "buildOptimizer": true,
    "budgets": [
      {
        "type": "initial",
        "maximumWarning": "5mb",
        "maximumError": "10mb"
      }
    ]
  }
}

• Azure Pipeline配置截图：
• Azure Pipeline执行流程截图：

这类「本地全流程正常、构建任务无失败、发布后js报语法错误」的问题，按优先级从高到低排查即可：

• 最高优先级排查发布环节的文件损坏问题：这是该场景最高发的诱因。调整Pipeline时很容易误开启「配置变量替换」「文件编码转换」功能，规则误命中压缩后的js文件，替换/转码过程会引入不可见乱码、截断内容，直接触发语法错误；另外Azure App Service默认的动态压缩配置异常时，也会返回损坏的js资源。
  操作方法：直接访问发布后站点的报错js文件，定位到报错的1389490字符位置，查看附近是否存在乱码、内容截断。如果确认文件损坏，先在Pipeline发布任务中关闭所有针对js文件的替换、转码规则，再在站点根目录的web.config中明确指定js资源的MIME类型与编码：

  <staticContent>
    <remove fileExtension=".js" />
    <mimeMap fileExtension=".js" mimeType="application/javascript; charset=utf-8" />
  </staticContent>
  

  可临时关闭Azure静态内容动态压缩功能做验证。
• 第二优先级排查构建环境版本不一致问题：如果Pipeline使用的Node.js版本、Angular CLI版本和本地开发环境版本不匹配，可能出现构建产物的隐性兼容问题，这类问题不会在构建阶段抛错，但运行时会触发语法异常。
  操作方法：在Pipeline构建脚本开头添加node -v、npm list @angular/cli命令打印版本号，和本地环境版本对齐，固定构建环节使用的Node、Angular CLI版本，不要使用默认拉取的最新版本。
• 第三优先级排查生产环境配置问题：本地默认启动的是开发环境，不会加载environment.prod.ts配置，如果该文件中存在未转义的特殊字符、未闭合的引号、非法模板字符串，只会在生产构建产物中触发问题。
  操作方法：本地直接执行ng build --prod命令构建生产包，用本地静态服务运行dist目录内容，如果本地复现白屏问题，直接定位为生产配置或代码兼容问题，逐行核对生产环境配置即可。
• 最后排查缓存问题：如果发布后index.html被浏览器、CDN缓存，引用了已被删除的旧版本hash资源，或者CDN缓存了发布过程中上传的不完整js文件，也会触发该错误，清空CDN缓存、浏览器强制刷新即可验证。

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