Cannot start ChromeHeadless in Angular project using WSL, works on Mac

Question

I'm using Windows Subsystem for Linux (Windows 10, Ubuntu 18.04 LTS). I'll list all the other pertinent versions below.

This setup is working on my Mac machine, without the flags array added to karma.conf.ts as shown below.

So far I've looked at:

Headless Chrome slows tests by 10x

Ubuntu: Cannot start ChromeHeadless

Google Chrome 75.0.3770.80 HEADLESS no longer works inside Docker container

"rebuilding" yarn using npm rebuild --update-binary

Karma Test With angular 6

Expected Behaviour To launch ChromeHeadless and run the tests

Current Behaviour Running yarn test as I would normally results in this error:

02 10 2019 09:13:03.598:ERROR [launcher]: ChromeHeadless stdout:
02 10 2019 09:13:03.608:ERROR [launcher]: ChromeHeadless stderr: Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Permission denied
Failed to generate minidump.
02 10 2019 09:13:03.623:DEBUG [temp-dir]: Cleaning temp dir /tmp/karma-5419534
 21% building 99/100 modules 1 active ...ngenio/packages/web-app/src/styles.scss02 10 2019 09:13:03.699:INFO [launcher]: Trying to start ChromeHeadless again (2/2).
02 10 2019 09:13:03.702:DEBUG [launcher]: BEING_CAPTURED -> RESTARTING
02 10 2019 09:13:03.715:DEBUG [launcher]: RESTARTING -> FINISHED
 22% building 100/101 modules 1 active ...project/packages/web-app/src/styles.scss02 10 2019 09:13:03.801:DEBUG [launcher]: Restarting ChromeHeadless
02 10 2019 09:13:03.803:DEBUG [launcher]: FINISHED -> BEING_CAPTURED
02 10 2019 09:13:03.804:DEBUG [temp-dir]: Creating temp dir at /tmp/karma-5419534
02 10 2019 09:13:03.814:DEBUG [launcher]: google-chrome --user-data-dir=/tmp/karma-5419534 --no-default-browser-check --no-first-run --disable-default-apps --disable-popup-blocking --disable-translate --disable-background-timer-throttling --disable-renderer-backgrounding --disable-device-discovery-notifications http://localhost:9876/?id=5419534 --headless --disable-gpu --remote-debugging-port=9222
 27% building 144/145 modules 1 active ...project/packages/web-app/src/styles.scss02 10 2019 09:13:05.142:DEBUG [launcher]: Process ChromeHeadless exited with code null and signal SIGILL
02 10 2019 09:13:05.147:ERROR [launcher]: Cannot start ChromeHeadless
        Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Permission denied
Failed to generate minidump.
02 10 2019 09:13:05.159:ERROR [launcher]: ChromeHeadless stdout:
02 10 2019 09:13:05.171:ERROR [launcher]: ChromeHeadless stderr: Failed to move to new namespace: PID namespaces supported, Network namespace supported, but failed: errno = Permission denied
Failed to generate minidump.
02 10 2019 09:13:05.187:DEBUG [temp-dir]: Cleaning temp dir /tmp/karma-5419534
 34% building 205/206 modules 1 active ...project/packages/web-app/src/styles.scss02 10 2019 09:13:05.679:ERROR [launcher]: ChromeHeadless failed 2 times (cannot start). Giving up.
02 10 2019 09:13:05.680:DEBUG [launcher]: BEING_CAPTURED -> FINISHED
02 10 2019 09:13:13.587:DEBUG [karma-server]: List of files has changed, trying to execute
02 10 2019 09:13:13.588:WARN [karma]: No captured browser, open http://localhost:9876/

and after ctrl+c...

An unhandled exception occurred: Cannot destructure property `error` of 'undefined' or 'null'.
See "/tmp/ng-GhKvib/angular-errors.log" for further details.

The file /tmp/ng-GhKvib/angular-errors.log contains An unhandled exception occurred: Cannot destructure propertyerrorof 'undefined' or 'null'..

Karma Config

// karma.conf.ts

module.exports = (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-coverage-istanbul-reporter'),
      require('@angular-devkit/build-angular/plugins/karma'),
    ],
    client: {
      clearContext: false,
    },
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage/ng2angle'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true,
    },
    reporters: ['progress', 'kjhtml'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_DEBUG,
    autoWatch: true,
    browsers: ['ChromeHeadless'],
    browserDisconnectTimeout: 10000,
    browserDisconnectTolerance: 3,
    browserNoActivityTimeout: 60000,
    flags: [
      '--disable-web-security',
      '--disable-gpu',
      '--no-sandbox',
      '--disable-features=NetworkService',
      '--proxy-server="direct://"',
      '--proxy-bypass-list=*',
      '--disable-dev-shm-usage',
    ],
    singleRun: false,
    restartOnFileChange: true,
  });
};

The command that yarn test runs is ng test --karmaConfig=karma.conf.ts.

Versions

yarn=1.19.0
angular-cli=8.3.2
karma=4.1.0
karma-chrome-launcher=2.2.0
tsc=2.7.2

Edit

Eventually I just gave up on using Linux for this and am using Mac. Watch my issue in the karma-chrome-launcher repo for possible fixes in the future.

Answer 1

To make this run successfully, Please follow the procedure

Method 1: Most of the issues will be fixed and we can run ChromeHeadless if we download chromium version(debian) in wsl and install

step 1: install necessary packages

sudo apt-get update

sudo apt-get install -y curl unzip xvfb libxi6 libgconf-2-4

step 2: install chromium

wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb

sudo apt install ./google-chrome-stable_current_amd64.deb

If still problem persists, please follow the method 2

method 2: To run a basic Selenium UI test on any environment we need a browser and a driver to control the browser. So we've to make Windows’s Chrome browser and the chromedriver accessible from WSL.

step 1: Link Chrome browser on Windows

sudo ln -sf '/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe' /usr/bin/google-chrome 

step 2: Link chromedriver on Windows

sudo ln -s /mnt/c/Users/username/node_modules/chromedriver/lib/chromedriver/chromedriver.exe /usr/bin/chromedriver

step 3: Change CHROME_BIN (environmental variable's default value)

export CHROME_BIN='/mnt/c/Program Files (x86)/Google/Chrome/Application/chrome.exe'

If still problem persists, please follow the method 3

Method 3: This will help run puppetteer on Ubuntu, so let's install necessary packages:

sudo apt-get install gconf-service libasound2 libatk1.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

• See my GitHub solution link
• GitHub