angular unit tests - start Chrome after successful build (taking long time)

Question

On some machines building the Angular app takes more then 2*60s (default timeout for Chrome started by Karma to catch the content).

Is there a way to force Karma to start Chrome after build is finished?

My package.json:

{
  "dependencies": {
    "@angular/animations": "4.4.4",
    "@angular/common": "4.4.4",
    "@angular/compiler": "4.4.4",
    "@angular/core": "4.4.4",
    "@angular/forms": "4.4.4",
    "@angular/http": "4.4.4",
    "@angular/platform-browser": "4.4.4",
    "@angular/platform-browser-dynamic": "4.4.4",
    "@angular/platform-server": "4.4.4",
    "@angular/router": "4.4.4",
    "rxjs": "5.4.3",
    "ts-md5": "^1.2.2",
    "zone.js": "^0.8.17"
  },
  "devDependencies": {
    "@angular/cli": "1.4.4",
    "@angular/compiler-cli": "4.4.4",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "jasmine-core": "^2.8.0",
    "jasmine-spec-reporter": "^4.2.1",
    "karma": "^1.7.1",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.1.2",
    "protractor-console-plugin": "^0.1.1",
    "protractor-jasmine2-screenshot-reporter": "^0.4.1",
    "ts-helpers": "1.1.2",
    "ts-node": "^3.3.0",
    "tslint": "^5.7.0",
    "typescript": "2.3.4"
  }
}

and karma.conf.js:

module.exports = function (config) {
    config.set({
        basePath: '',
        frameworks: ['jasmine', '@angular/cli'],
        plugins: [
            require('karma-jasmine'),
            require('karma-chrome-launcher'),
            require('karma-jasmine-html-reporter'),
            require('karma-coverage-istanbul-reporter'),
            require('@angular/cli/plugins/karma')
        ],
        client: {
            clearContext: false // leave Jasmine Spec Runner output visible in browser
        },
        files: [{
                pattern: './src/test.ts',
                watched: false
            },
            {
                pattern: './src/assets/**',
                watched: false,
                included: false,
                nocache: false,
                served: true
            }
        ],
        preprocessors: {
            './src/test.ts': ['@angular/cli']
        },
        mime: {
            'text/x-typescript': ['ts', 'tsx']
        },
        coverageIstanbulReporter: {
            reports: ['html', 'lcovonly'],
            fixWebpackSourcePaths: true
        },
        angularCli: {
            environment: 'dev'
        },
        reporters: config.angularCli && config.angularCli.codeCoverage ?
            ['progress', 'coverage-istanbul'] :
            ['progress', 'kjhtml'],
        port: 9876,
        colors: true,
        logLevel: config.LOG_INFO,
        autoWatch: true,
        autoWatchDelay: 1000,
        browsers: ['Chrome'],
        singleRun: false
    });
};

Answer 1

If I understand you correctly:

ng serve --open is what you are looking for.

You can chain it after a successful build as an npm startup script, or in other tools, like gulp or grunt for instance.

Answer 2

You can increase multiple timeouts in the karma.conf.js, would that be an option for you? Just guessing from the name, captureTimeout might fit what you need. In our project, we set all of them to values of about 10 minutes. I'm totally not proud of this (because it means that building our app must be badly slow...), but at least our tests run.

browserDisconnectTimeout: <enter here desired value in ms>,
browserNoActivityTimeout: ...,
captureTimeout: ...,
pingTimeout: ...,