Error when used with Angular 10 behind corporate proxy

[Sardorbek Mamazhanov]

Steps to reproduce:

1. Using @angular/cli 10.x create a new project, ng new karma-jsdom-issue-repro

2. cd karma-jsdom-issue-repro && npm i -D karma-jsdom-launcher jsdom

3. setup karma.conf to use jsdom as browser, include karma-jsdom-launcher in plugins. It should eventually look as follows:

module.exports = function (config) {

  config.set({

    basePath: '',

    frameworks: ['jasmine', '@angular-devkit/build-angular'],

    plugins: [

      require('karma-jasmine'),

      require('karma-jsdom-launcher'),

      require('karma-jasmine-html-reporter'),

      require('karma-coverage-istanbul-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/lib'),

      reports: ['html', 'lcovonly', 'text-summary'],

      fixWebpackSourcePaths: true

    },

    reporters: ['progress', 'kjhtml'],

    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: true,

    browsers: ['jsdom'],

    singleRun: false,

    restartOnFileChange: true

  });

};

4. npm run test

Runs perfectly fine when not behind proxy (on my home laptop), but giving error on my office machine (behind corporate proxy): "ERROR [karma-server]: UnhandledRejection: 407"

I did not have any issues using JSDOM 16.2.2 and karma-jsdom-launcher 7.1.1 on Angular 7 and 8. I recently had to create a new project using Angular 10 and got this error.

My package.json:

{

  "name": "new-project",

  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

  "private": true,

  "dependencies": {

    "@angular/animations": "~10.0.5",

    "@angular/common": "~10.0.5",

    "@angular/compiler": "~10.0.5",

    "@angular/core": "~10.0.5",

    "@angular/forms": "~10.0.5",

    "@angular/platform-browser": "~10.0.5",

    "@angular/platform-browser-dynamic": "~10.0.5",

    "@angular/router": "~10.0.5",

    "rxjs": "~6.5.5",

    "tslib": "^2.0.0",

    "zone.js": "~0.10.3"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "~0.1000.4",

    "@angular-devkit/build-ng-packagr": "~0.1000.4",

    "@angular/cli": "~10.0.4",

    "@angular/compiler-cli": "~10.0.5",

    "@types/jasmine": "~3.5.0",

    "@types/jasminewd2": "~2.0.3",

    "@types/node": "^12.11.1",

    "codelyzer": "^6.0.0",

    "jasmine-core": "~3.5.0",

    "jasmine-spec-reporter": "~5.0.0",

    "jsdom": "^16.3.0",

    "karma": "~5.0.0",

    "karma-chrome-launcher": "~3.1.0",

    "karma-coverage-istanbul-reporter": "~3.0.2",

    "karma-jasmine": "~3.3.0",

    "karma-jasmine-html-reporter": "^1.5.0",

    "karma-jsdom-launcher": "^8.0.2",

    "ng-packagr": "^10.0.0",

    "protractor": "~7.0.0",

    "ts-node": "~8.3.0",

    "tslint": "~6.1.0",

    "typescript": "~3.9.5"

  }

}

Since I don't directly create JSDOM instance, I have no idea how to set proxy configs.

Is there any solution to this issue?

Thanks in advance.

[Jonas Amundsen]

Hi, @sardormajano

Thanks for reporting this issue. I'm unfortunately unable to reproduce the issue, as I don't have a proxy setup like you do. You can however pass along options to jsdom, as shown here. Perhaps a custom ResourceLoader can solve your issue?

[Sardorbek Mamazhanov]

@badeball thanks for your response.
I didn't know I could pass a custom JSDOM instance in karma.conf like that. Very helpful.
Closing the issue.