Angular 11> 12 TypeError: невозможно прочитать свойство 'match' из undefined

Question

Я только что обновил свое угловое приложение с Angular 11 до 12, используя шаги, указанные на https://update.angular.io/ . Я умею компилировать и запускать. Однако когда я бегу npm test, Я получил следующую ошибку для всего моего теста:

      > npm run env -s && ng test

⠙ Generating browser application bundles (phase: building)...13 08 2021 17:49:51.294:WARN [karma]: No captured browser, open http://localhost:9880/
13 08 2021 17:49:51.334:INFO [karma-server]: Karma v6.3.4 server started at http://localhost:9880/
13 08 2021 17:49:51.334:INFO [launcher]: Launching browsers ChromeHeadlessNoSandbox with concurrency unlimited
13 08 2021 17:49:51.337:INFO [launcher]: Starting browser ChromeHeadless
✔ Browser application bundle generation complete.
13 08 2021 17:50:22.921:WARN [karma]: No captured browser, open http://localhost:9880/
13 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

...

TypeError: Cannot read property 'match' of undefined
        at extractCommentsWithHash (node_modules/@angular/compiler/fesm2015/compiler.js:9555:1)
        at ShadowCss.shimCssText (node_modules/@angular/compiler/fesm2015/compiler.js:9118:1)
        at node_modules/@angular/compiler/fesm2015/compiler.js:22336:1
        at Array.map (<anonymous>)
        at compileStyles (node_modules/@angular/compiler/fesm2015/compiler.js:22335:1)
        at compileComponentFromMetadata (node_modules/@angular/compiler/fesm2015/compiler.js:21882:1)
        at CompilerFacadeImpl.compileComponentFromMeta (node_modules/@angular/compiler/fesm2015/compiler.js:22492:1)
        at CompilerFacadeImpl.compileComponent (node_modules/@angular/compiler/fesm2015/compiler.js:22482:1)
        at Function.get (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:27388:1)
        at getComponentDef (node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:1108:1)

Ниже приведены мои текущие конфигурации:

1. Извлеченный package.json

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

2. karma.conf

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

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

3. tsconfig.json

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

Заранее спасибо, если кто-нибудь может помочь.

Answer 1

I have managed to troubleshoot and solve the issue. I have also a , which extends from tsconfig.json. This tsconfig.spec.json overrides the module property from es2020 to commonjs. As such, by removing the override property, my tests are running again. Hope this helps anyone who faced the same issue as me.

      {
  "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"]
}