Angular karma can't capture browser after updating angular 9 to 10

Question

I followed the guide on the angular update giude to update my project from version 9 to 10. My project and my karma tests ran perfectly fine with angular 9. The update changed the TypeScript version to > 4 and this resulted in a many errors. See this issue here . I fixed the errors with downgrading to TypeScript 3.9.7. However if I want to run my karma tests then the headless chrome browser can't be captured and my tests won't even start. How can I capture the chrome browser again?

My angular, jasmine and karma version details:

"@angular-devkit/build-angular": "~0.1002.1",
"@angular/cli": "10.2.1",
"@angular/compiler-cli": "10.2.4",
"@angular/language-service": "10.2.4",
"@compodoc/compodoc": "1.1.10",
"@types/html2canvas": "0.0.35",
"@types/jasmine": "3.3.12",
"@types/jasminewd2": "2.0.6",
"@types/node": "^12.11.1",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~5.0.0",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "2.0.0",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.5.0",
"karma-spec-reporter": "0.0.32",
"typescript": "3.9.7"

My karma.conf.js file:

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-teamcity-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: ['html', 'lcovonly', 'json-summary', 'json'],
        fixWebpackSourcePaths: true,
        'report-config': {
            json: {
                type: 'json',
                file: 'partial/karma.json'
            }
        }
    },
    reporters: ['progress', 'kjhtml'],
    port: 8070,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    sourcemap: true,
    browsers: ['ChromeHeadless'],
    singleRun: false,
    customLaunchers: {
        ChromeHeadless: {
            base: 'Chrome',
            flags: [
                '--headless',
                '--no-sandbox',
                '--disable-gpu',
                '--disable-offline-pages',
                '--remote-debugging-port=9222'
            ]
        }
    }
});
};

My console log when trying to run the karma tests:

12 02 2021 15:21:54.842:INFO [karma-server]: Karma v5.0.9 server started at http://0.0.0.0:XXXX/
12 02 2021 15:21:54.845:INFO [launcher]: Launching browsers ChromeHeadless with concurrency unlimited
12 02 2021 15:21:54.849:INFO [launcher]: Starting browser Chrome
Waiting for a captured browser... To capture a browser open http://localhost:XXXX/
12 02 2021 15:22:54.849:WARN [launcher]: Chrome have not captured in 60000 ms, killing.
12 02 2021 15:22:54.983:INFO [launcher]: Trying to start Chrome again (1/2).

Answer 1

Did you change project folder structure? Did ypu update @angular/cdk? regarding typescript errors usually it could be an issue with 3rd party libraries. I upgraded to angular 10 and then to angular 11 month ago and this is my angular 10 package.json. I am using the same versions as you and everything works with typescript 4. Also try removing nodu_modules and installing them again.

  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1002.1",
    "@angular/cli": "10.2.1",
    "@angular/compiler-cli": "10.2.4",
    "@angular/language-service": "10.2.4",
    "@compodoc/compodoc": "1.1.10",
    "@types/jasmine": "3.3.13",
    "@types/jasminewd2": "2.0.6",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "gulp": "4.0.2",
    "gulp-install": "1.1.0",
    "gulp-typedoc": "2.2.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-cli": "2.0.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-ie-launcher": "1.0.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "karma-remap-istanbul": "0.6.0",
    "karma-sourcemap-loader": "0.3.7",
    "karma-spec-reporter": "0.0.32",
    "protractor": "~7.0.0",
    "puppeteer": "1.20.0",
    "ts-node": "8.3.0",
    "tslint": "~6.1.0",
    "typedoc": "0.14.2",
    "typescript": "4.0.5"
  },