Angular 11 > 12 TypeError: Cannot read property 'match' of undefined

Question

I have just upgraded my angular app from Angular 11 to 12 using the steps provided from https://update.angular.io/. I am able to compile and run. However, when I run npm test, I got the following error for all my 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)

Below are my current configurations:

1. Extracted 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
  }
}

Thanks in advance if anyone is able to help.

Answer 1

I have managed to troubleshoot and solve the issue. I have also a tsconfig.spec.json, 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"]
}