Angular从v14升级到v15后执行ng test报SyntaxError错误求助

我将项目从 Angular 14 版本升级至 15 版本后，执行 ng test 命令运行测试套件时出现错误：SyntaxError: Unexpected token '.'。已处理截图中显示的警告，但问题仍未解决，恳请提供帮助，若需更多细节请告知。

参考配置 #

package.json #

{
  "dependencies": {
    "@angular/animations": "^15.2.10",
    "@angular/cdk": "^15.2.9",
    "@angular/common": "^15.2.10",
    "@angular/compiler": "^15.2.10",
    "@angular/core": "^15.2.10",
    "@angular/forms": "^15.2.10",
    "@angular/material": "^15.2.9",
    "@angular/platform-browser": "^15.2.10",
    "@angular/platform-browser-dynamic": "^15.2.10",
    "@angular/router": "^15.2.10",
    "@fortawesome/angular-fontawesome": "^0.5.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
    "auth0-js": "^9.24.1",
    "bootstrap": "^5.3.3",
    "font-awesome": "^4.7.0",
    "jquery": "^3.7.1",
    "jwt-decode": "^2.2.0",
    "lodash": "^4.17.21",
    "material-icons": "^1.13.12",
    "ngx-mat-multi-sort": "^0.7.4",
    "ngx-mat-select-search": "^3.3.3",
    "ngx-toastr": "^16.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.6.2",
    "uuid": "^9.0.1",
    "zone.js": "^0.11.8"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.11",
    "@angular-eslint/builder": "13.5.0",
    "@angular-eslint/eslint-plugin": "13.5.0",
    "@angular-eslint/eslint-plugin-template": "13.5.0",
    "@angular-eslint/schematics": "13.5.0",
    "@angular-eslint/template-parser": "13.5.0",
    "@angular/cli": "^15.2.11",
    "@angular/compiler-cli": "^15.2.10",
    "@angular/language-service": "^15.2.10",
    "@types/auth0-js": "^9.21.5",
    "@types/jasmine": "~3.8.0",
    "@types/lodash": "^4.17.0",
    "@types/node": "^12.20.55",
    "@typescript-eslint/eslint-plugin": "4.28.2",
    "@typescript-eslint/parser": "4.28.2",
    "eslint": "^7.26.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "^6.4.3",
    "karma-chrome-launcher": "^3.2.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "^4.0.2",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-junit-reporter": "^1.2.0",
    "karma-spec-reporter": "0.0.32",
    "ng-packagr": "^15.2.2",
    "protractor": "~7.0.0",
    "puppeteer": "^1.20.0",
    "ts-node": "~7.0.0",
    "typescript": "^4.8.4"
  },
  "resolutions": {
    "glob-parent": "^5.1.2",
    "set-value": "^4.0.1",
    "ansi-regex": "^5.0.1"
  }
}

karma.conf.js #

// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html

process.env.CHROME_BIN = require('puppeteer').executablePath();

module.exports = function(config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular-devkit/build-angular'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('karma-spec-reporter'),
            require('karma-junit-reporter'),
            require('@angular-devkit/build-angular/plugins/karma')
        ],
        client: {
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        coverageIstanbulReporter: {
            dir: require('path').join(__dirname, './coverage'),
            reports: ['text-summary', 'cobertura'],
            fixWebpackSourcePaths: true,
            combineBrowserReports: true,
            'report-config': {
                cobertura: {
                    // the default, but better to be explicit
                    file: 'cobertura-coverage.xml'
                }
            },
        },
        files: [
            'node_modules/jquery/dist/jquery.min.js'
        ],
        junitReporter: {
            outputDir: './reports',
            outputFile: 'junit.xml',
            useBrowserName: false
            // nameFormatter: undefined, // function (browser, result) to customize the name attribute in xml testcase element
            // classNameFormatter: undefined, // function (browser, result) to customize the classname attribute in xml testcase element
            // properties: {}, // key value pair of properties to add to the <properties> section of the report
            /// xmlVersion: null // use '1' if reporting to be per SonarQube 6.2 XML format
        },
        reporters: ['progress', 'kjhtml', 'spec', 'coverage-istanbul', 'junit'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        browsers: ['ChromeHeadlessNoSandbox'],
        customLaunchers: {
            ChromeHeadlessNoSandbox: {
                base: 'ChromeHeadless',
                flags: ['--no-sandbox']
            }
        },
        singleRun: false,
        restartOnFileChange: true
    });
};

排查与解决建议 #

• 同步ESLint依赖版本：当前@angular-eslint版本为13.5.0，与Angular 15不兼容，需升级到15.x版本：

  npm install @angular-eslint/builder@15 @angular-eslint/eslint-plugin@15 @angular-eslint/eslint-plugin-template@15 @angular-eslint/schematics@15 @angular-eslint/template-parser@15 --save-dev
  

  同时升级@typescript-eslint和eslint适配TypeScript 4.8.4：

  npm install @typescript-eslint/eslint-plugin@5 @typescript-eslint/parser@5 eslint@8 --save-dev
  

• 检查Node.js版本：Angular 15要求Node.js版本为14.20+/16.13+/18.10+，过低版本无法支持ES新语法（如可选链?.），会触发Unexpected token '.'报错，确认你的Node版本符合要求。

• 升级测试依赖：

  • 升级jasmine相关依赖适配Angular 15：

    npm install jasmine-core@4 @types/jasmine@4 --save-dev
    

  • 升级旧版puppeteer：

    npm install puppeteer@19 --save-dev
    

• 清理缓存重装依赖：

  rm -rf node_modules package-lock.json
  npm install
  npm run test
  

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