Angular 11 > 12 TypeError：无法读取未定义的属性“匹配”

Question

我刚刚使用https://update.angular.io/提供的步骤将我的 Angular 应用程序从 Angular 11 升级到 12 。我能够编译并运行。但是，当我运行时npm test，我的所有测试都出现以下错误：

\n

> npm run env -s && ng test\n\n\xe2\xa0\x99 Generating browser application bundles (phase: building)...13 08 2021 17:49:51.294:WARN [karma]: No captured browser, open http://localhost:9880/\n13 08 2021 17:49:51.334:INFO [karma-server]: Karma v6.3.4 server started at http://localhost:9880/\n13 08 2021 17:49:51.334:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited\n13 08 2021 17:49:51.337:INFO [launcher]: Starting browser ChromeHeadless\n\xe2\x9c\x94 Browser application bundle generation complete.\n13 08 2021 17:50:22.921:WARN [karma]: No captured browser, open http://localhost:9880/\n13 08 2021 17:50:22.999:INFO [Chrome Headless 88.0.4298.0 (Mac OS 11.0.0)]: Connected on socket xsFemeP1G85n7QySAAAB with id 91698738\n\n...\n\nTypeError: Cannot read property \'match\' of undefined\n        at extractCommentsWithHash (node_modules/@angular/compiler/fesm2015/compiler.js:9555:1)\n        at ShadowCss.shimCssText (node_modules/@angular/compiler/fesm2015/compiler.js:9118:1)\n        at node_modules/@angular/compiler/fesm2015/compiler.js:22336:1\n        at Array.map (<anonymous>)\n        at compileStyles (node_modules/@angular/compiler/fesm2015/compiler.js:22335:1)\n        at compileComponentFromMetadata (node_modules/@angular/compiler/fesm2015/compiler.js:21882:1)\n        at CompilerFacadeImpl.compileComponentFromMeta (node_modules/@angular/compiler/fesm2015/compiler.js:22492:1)\n        at CompilerFacadeImpl.compileComponent (node_modules/@angular/compiler/fesm2015/compiler.js:22482:1)\n        at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27388:1)\n        at getComponentDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1108:1)\n

\n

以下是我当前的配置：

\n

\n
1. 提取的package.json
\n

\n

"dependencies": {\n    "@angular/animations": "^12.2.1",\n    "@angular/cdk": "^12.2.1",\n    "@angular/common": "^12.2.1",\n    "@angular/compiler": "^12.2.1",\n    "@angular/core": "^12.2.1",\n    "@angular/flex-layout": "^12.0.0-beta.34",\n    "@angular/forms": "^12.2.1",\n    "@angular/material": "^12.2.1",\n    "@angular/material-moment-adapter": "^12.2.1",\n    "@angular/platform-browser": "^12.2.1",\n    "@angular/platform-browser-dynamic": "^12.2.1",\n    "@angular/router": "^12.2.1",\n    "@ng-idle/core": "^11.0.3",\n    "@ng-idle/keepalive": "^11.0.3",\n    "@ngx-translate/core": "^13.0.0",\n    "@types/jwt-decode": "^2.2.1",\n    "angular-oauth2-oidc": "^10.0.3",\n    "browserslist": "^4.16.6",\n    "caniuse-lite": "^1.0.30001088",\n    "file-saver": "^2.0.2",\n    "jwt-decode": "^2.2.0",\n    "material-design-icons-iconfont": "^5.0.1",\n    "moment": "2.24.0",\n    "moment-timezone": "^0.5.31",\n    "ngx-material-timepicker": "^5.5.1",\n    "ngx-moment": "^5.0.0",\n    "ngx-tableau": "^1.0.0",\n    "rxjs": "^6.6.3",\n    "xlsx": "^0.17.0",\n    "zone.js": "~0.11.4"\n  },\n  "devDependencies": {\n    "@angular-devkit/build-angular": "^12.2.1",\n    "@angular-eslint/builder": "12.3.1",\n    "@angular-eslint/eslint-plugin": "12.3.1",\n    "@angular-eslint/eslint-plugin-template": "12.3.1",\n    "@angular-eslint/schematics": "12.3.1",\n    "@angular-eslint/template-parser": "12.3.1",\n    "@angular/cli": "^12.2.1",\n    "@angular/compiler-cli": "^12.2.1",\n    "@angular/language-service": "^12.2.1",\n    "@angularclass/hmr": "^2.1.3",\n    "@babel/compat-data": "^7.10.3",\n    "@biesbjerg/ngx-translate-extract": "^7.0.2",\n    "@ngneat/spectator": "^8.0.3",\n    "@ngx-rocket/scripts": "^4.0.0",\n    "@types/file-saver": "^2.0.1",\n    "@types/jasmine": "~3.8.0",\n    "@types/node": "^14.10.2",\n    "@typescript-eslint/eslint-plugin": "4.28.2",\n    "@typescript-eslint/parser": "4.28.2",\n    "cross-env": "^5.0.5",\n    "cypress": "^4.9.0",\n    "cypress-cucumber-preprocessor": "^4.2.0",\n    "cypress-file-upload": "^4.1.1",\n    "cypress-xpath": "^1.6.0",\n    "eslint": "^7.26.0",\n    "eslint-plugin-import": "latest",\n    "eslint-plugin-jsdoc": "latest",\n    "eslint-plugin-prefer-arrow": "latest",\n    "eslint-plugin-react": "latest",\n    "htmlhint": "^0.15.1",\n    "https-proxy-agent": "^2.2.4",\n    "husky": "^3.1.0",\n    "increase-memory-limit": "^1.0.3",\n    "jasmine-core": "~3.8.0",\n    "jasmine-spec-reporter": "~5.0.0",\n    "jest-mock": "^24.9.0",\n    "karma": "~6.3.4",\n    "karma-chrome-launcher": "~3.1.0",\n    "karma-cli": "~2.0.0",\n    "karma-coverage": "^2.0.3",\n    "karma-jasmine": "~4.0.0",\n    "karma-jasmine-html-reporter": "^1.5.0",\n    "karma-junit-reporter": "^2.0.1",\n    "ng-mocks": "^12.1.0",\n    "npm-run-all": "^4.1.5",\n    "prettier": "^2.3.1",\n    "pretty-quick": "^3.1.1",\n    "puppeteer": "^5.3.0",\n    "stylelint": "^13.7.1",\n    "stylelint-config-prettier": "^8.0.1",\n    "stylelint-config-recommended-scss": "^4.2.0",\n    "stylelint-config-standard": "^20.0.0",\n    "stylelint-scss": "^3.18.0",\n    "ts-node": "^8.9.1",\n    "tslib": "^2.0.0",\n    "tslint-config-prettier": "^1.14.0",\n    "typescript": "4.3.5"\n  },\n

\n

\n
2. 业力.conf
\n

\n

process.env.CHROME_BIN = require(\'puppeteer\').executablePath();\nconst path = require(\'path\');\n\nmodule.exports = function (config) {\n  config.set({\n    basePath: \'.\',\n    frameworks: [\'jasmine\', \'@angular-devkit/build-angular\'],\n    plugins: [\n      require(\'karma-jasmine\'),\n      require(\'karma-chrome-launcher\'),\n      require(\'karma-junit-reporter\'),\n      require(\'karma-coverage\'),\n      require(\'@angular-devkit/build-angular/plugins/karma\'),\n    ],\n    client: {\n      clearContext: false, // leave Jasmine Spec Runner output visible in browser\n      captureConsole: Boolean(process.env.KARMA_ENABLE_CONSOLE),\n    },\n    junitReporter: {\n      outputDir: path.join(__dirname, \'./reports/junit/\'),\n      outputFile: \'TESTS-xunit.xml\',\n      useBrowserName: false,\n      suite: \'\', // Will become the package name attribute in xml testsuite element\n    },\n    coverageReporter: {\n      dir: path.join(__dirname, \'./reports/coverage\'),\n      reporters: [\n        { type: \'html\', subdir: \'report-html\' },\n        { type: \'lcov\', subdir: \'report-lcov\' },\n        { type: \'text-summary\' },\n      ],\n      fixWebpackSourcePaths: true,\n    },\n    reporters: [\'progress\', \'junit\', \'coverage\'],\n    port: 9876,\n    colors: true,\n    // Level of logging, can be: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG\n    logLevel: config.LOG_INFO,\n    autoWatch: true,\n    browsers: [\'ChromeHeadlessNoSandbox\'],\n    customLaunchers: {\n      ChromeHeadlessNoSandbox: {\n        base: \'ChromeHeadless\',\n        flags: [\'--no-sandbox\'],\n      },\n    },\n    singleRun: false,\n    restartOnFileChange: true,\n  });\n};\n

\n

\n
3. tsconfig.json
\n

\n

{\n  "compileOnSave": false,\n  "compilerOptions": {\n    "outDir": "./dist/out-tsc",\n    "module": "es2020",\n    "sourceMap": true,\n    "declaration": false,\n    "moduleResolution": "node",\n    "downlevelIteration": true,\n    "experimentalDecorators": true,\n    "importHelpers": true,\n    "noImplicitAny": false,\n    "suppressImplicitAnyIndexErrors": true,\n    "target": "es2017",\n    "lib": ["es2018", "dom"],\n    "baseUrl": "./",\n    "paths": {\n      "@app/*": ["src/app/*"],\n      "@env/*": ["src/environments/*"]\n    }\n  },\n  "angularCompilerOptions": {\n    "preserveWhitespaces": true,\n    "enableIvy": true\n  }\n}\n\n

\n

如果有人能够提供帮助，请提前致谢。

\n

Answer 1

我已经设法排除并解决了问题。我还有一个tsconfig.spec.json, 延伸自tsconfig.json. 这tsconfig.spec.json将覆盖模块属性从es2020到commonjs。因此，通过删除覆盖属性，我的测试将再次运行。希望这可以帮助任何与我遇到同样问题的人。

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/spec",
    "types": ["jasmine", "node"]
  },
  "files": ["src/test.ts", "src/polyfills.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
}