E2E typescript tests are not being transpiled after Angular upgrade

Question

I have a problem with e2e tests in a project after I did an upgrade to Angular 6. Previously tests worked perfectly, now there is a problem that .ts files are not being compiled: Error: TSError: ⨯ Unable to compile TypeScript. I have nothing change after the migration to the angular.json file. I have tried to find what exact properties in configuration are responsible for transpilation, but couldn't find any specific answer. I assumed then that it is the

beforeLaunch: function() {
    require('ts-node').register({
      project: 'e2e/tsconfig.e2e.json'
   });
},

Has anyone any clue what might be wrong?

• Node Version: v8.11.4
• Protractor Version: 5.4.0
• Angular Version: 6.1.6
• Angular-CLI Version: 6.1.5
• Browser(s): Chrome
• Operating System and Version Windows 10.0.17134

• protractor.conf.js

  const { SpecReporter } = require('jasmine-spec-reporter');
  const jasmineReporters = require('jasmine-reporters');
  const protractorImageComparison = require('protractor-image-comparison');
  require('ts-node/register');
  require('tsconfig-paths/register');
  const { LoginWindow } = require('./e2e/loginWindow.po.js');
  exports.config = {
      allScriptsTimeout: 30000,
      specs: [
         './e2e/**/*.e2e-spec.ts'
      ],
  capabilities: {
      'browserName': 'chrome',
      chromeOptions: {
        args: [ "--no-sandbox", "--disable-gpu", "--window-size=1920x1080" ]
      }
    },
    directConnect: true,
    baseUrl: 'http://localhost:4300/',
    framework: 'jasmine',
    jasmineNodeOpts: {
      showColors: true,
      defaultTimeoutInterval: 30000,
      print: function() {}
    },
    beforeLaunch: function() {
      require('ts-node').register({
        project: 'e2e/tsconfig.e2e.json'
      });
    },
    onPrepare() {
      jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
      jasmine.getEnv().addReporter(new jasmineReporters.JUnitXmlReporter({
        consolidateAll: true,
        savePath: './',
        filePrefix: '...'
      }));
      browser.protractorImageComparison = new protractorImageComparison(
        {
          actualFolder: '...',
          baselineFolder: '...',
          diffFolder: '...',
          screenshotPath: '...',
          tempFullScreenFolder: '...',
          autoSaveBaseline: true,
          ignoreAntialiasing: true,
          ignoreTransparentPixel: true,
        }
      );
  
      loginPage = new LoginWindow();
      browser.waitForAngularEnabled(false).then(() => {
        return browser.get('...').then(() => {
          loginPage.loginWindowInternal().click().then(() => {
            browser.sleep(5000);
          }).then(() => {
            loginPage.loginWindowUserName().isPresent().then((result) => {
              if (result) {
               ...
                browser.sleep(5000);
              }
            });
          });
        });
      });
    }
  };
  

• tsconfig.e2e.json

  {
    "extends": "../tsconfig.json",
    "compilerOptions": {
      "outDir": "../out-tsc/e2e",
      "module": "commonjs",
      "target": "es5",
      "types":[
        "jasmine",
        "node"
      ]
    }
  }
  

• tsconfig.json

  {
    "compileOnSave": false,
    "compilerOptions": {
      "outDir": "./dist/out-tsc",
      "baseUrl": "src",
      "sourceMap": true,
      "declaration": false,
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "target": "es5",
      "typeRoots": [
        "node_modules/@types"
      ],
      "lib": [
        "es2016",
        "dom"
      ],
      "paths": {
        ...
      },
  "module": "es2015"
    }
  }
  

• angular.json

  {
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
    "version": 1,
    "newProjectRoot": "projects",
    "projects": {
       ...
      "...-e2e": {
        "root": "e2e",
        "sourceRoot": "e2e",
        "projectType": "application",
        "architect": {
          "e2e": {
            "builder": "@angular-devkit/build-angular:protractor",
            "options": {
              "protractorConfig": "./protractor.conf.js"
            }
          },
          "lint": {
            "builder": "@angular-devkit/build-angular:tslint",
            "options": {
              "tsConfig": [
                "e2e/tsconfig.e2e.json"
              ],
              "exclude": []
            }
          }
        }
      }
    },
    "defaultProject": "...",
    "schematics": {
      "@schematics/angular:component": {
        "prefix": "app",
        "styleext": "scss"
      },
      "@schematics/angular:directive": {
        "prefix": "app"
      }
    }
  }
  

• Output from running the test

  [11:44:42] E/launcher - ### Error: TSError: ⨯ Unable to compile TypeScript:
  e2e/....e2e-spec.ts(27,111): error TS2322: Type '0' is not assignable to type '{ label: number; sent: () => any; trys: any[]; ops: any[]; }'.
  
  at createTSError (...\node_modules\ts-node\src\index.ts:261:12)
  at getOutput (...\node_modules\ts-node\src\index.ts:367:40)
  at Object.compile (...\node_modules\ts-node\src\index.ts:558:11)
  at Module.m._compile (...\node_modules\ts-node\src\index.ts:439:43)
  at Module.m._compile (...\node_modules\ts-node\src\index.ts:439:23)
  at Module._extensions..js (module.js:663:10)
  at require.extensions.(anonymous function) (...\node_modules\ts-node\src\index.ts:442:12)
  at Object.require.extensions.(anonymous function) [as .ts] (...\node_modules\ts-node\src\index.ts:442:12)
  at Module.load (module.js:565:32)
  at tryModuleLoad (module.js:505:12)
  [11:44:42] E/launcher - Process exited with error code 100
  An unexpected error occurred: undefined
  

NOTE: I am pretty sure it is a problem of not compaling typescript files, because when I changed LoginWindow file to typescript class and import it into protractor.conf.js

const { LoginWindow } = require('./e2e/loginWindow.po');

I got an error:

[11:16:01] E/configParser - ...\e2e\loginWindow.po.ts:1
(function (exports, require, module, __filename, __dirname) { import { browser, element, by } from 'protractor';
                                                              ^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:616:28)
    at Module.m._compile (...\node_modules\ts-node\src\index.ts:439:23)
    at Module._extensions..js (module.js:663:10)
    at Object.require.extensions.(anonymous function) [as .ts] (...\node_modules\ts-node\src\index.ts:442:12)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
An unexpected error occurred: undefined