Angular8升级Angular15 Jenkins构建报错：SyntaxError: Unexpected token .

核心问题分析 #

Chrome Headless 69.0.3497.0不支持ES2020及以上的语法（比如可选链?.、空值合并??），而Angular 15默认编译目标未兼容该老版本Chrome，导致polyfills.js中出现未转译的新语法，触发Uncaught SyntaxError: Unexpected token .错误。

具体修复步骤 #

1. 调整TypeScript编译兼容配置 #

• 修改tsconfig.spec.json（测试环境专属配置）：
  • 将compilerOptions.target设为Chrome 69支持的ES2017，同时指定对应Lib库：

    {
      "extends": "./tsconfig.json",
      "compilerOptions": {
        "target": "ES2017",
        "lib": ["ES2017", "DOM"]
      },
      "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
    }
    

  • 在项目根目录的browserslist文件（或package.json的browserslist字段）中明确兼容规则：

    "browserslist": [
      "Chrome >= 69"
    ]
    

2. 修正Karma浏览器启动配置 #

• 打开karma.conf.js，确保Chrome Headless的启动参数适配Jenkins环境，避免权限或版本兼容问题：

  module.exports = function(config) {
    config.set({
      browsers: ['ChromeHeadless'],
      customLaunchers: {
        ChromeHeadless: {
          base: 'Chrome',
          flags: [
            '--headless',
            '--no-sandbox',
            '--disable-gpu',
            '--disable-translate',
            '--disable-extensions',
            '--remote-debugging-port=9222'
          ]
        }
      },
      // 其他配置...
    });
  };
  

  注意：Jenkins环境必须添加--no-sandbox，否则Chrome Headless无法正常启动。

3. 规范Polyfills配置 #

• 恢复polyfills.ts文件，保留测试环境必需的polyfill：

  import 'zone.js';
  import 'zone.js/testing';
  

• 在angular.json的test配置段中，确认polyfills路径正确指向该文件：

  "test": {
    "builder": "@angular-devkit/build-angular:karma",
    "options": {
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.spec.json",
      "karmaConfig": "karma.conf.js"
      // 其他配置...
    }
  }
  

  不要随意移除polyfills.ts，Angular测试依赖zone.js实现异步测试调度。

4. 对齐依赖版本 #

• 确认package.json中与构建、测试相关的依赖版本与Angular 15兼容：

  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.0",
    "karma": "^6.4.0",
    "karma-chrome-launcher": "^3.2.0"
  }
  

  执行npm install确保依赖完全更新，避免版本不匹配导致的编译异常。

5. 清理Jenkins构建缓存 #

• 在Jenkins构建脚本中添加缓存清理步骤，避免旧编译产物干扰：

  rm -rf node_modules
  rm -rf dist
  rm -rf .angular/cache
  npm install
  

验证步骤 #

1. 本地使用Chrome 69版本运行ng test，确认问题是否复现
2. 推送修改后触发Jenkins构建，检查报错是否消失

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