How to set up e2e tests Angular without CLI?

Question

I'm currenty trying to make e2e test for a very big Angular application but I'm having trouble setting those up. Due to various circumstances i am not able to try to integrate Angular CLI to the project so i have to work around it.

my projectstructur

app
├── e2e
│   ├── tsconfig.e2e.json
│   ├── component.e2e-spec.ts
│   └── pages
│        └── component.page.ts
├── ....
├── protractor.conf.js
└── tsconfig.json

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "allowJs": true,
    "noEmit": true,
    "noEmitHelpers": true,
    "importHelpers": true,
    "strictNullChecks": false,
    "lib": [
      "dom",
      "es6"
    ]
  },
  "typeRoots": [
      "node_modules/@types"
    ],
  "types": [
      "jasmine",
      "node",
      "source-map",
      "uglify-js",
      "webpack"
  ],
  "exclude": [
    "node_modules",
    "!node_modules/@types",
    "dist",
    "typescript"
  ],
  "awesomeTypescriptLoaderOptions": {
    "forkChecker": true,
    "useWebpackText": true
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": {
    "rewriteTsconfig": false
  }
}

protractor.conf.ts

 const {SpecReporter} = require('jasmine-spec-reporter');

exports.config = {
  allScriptsTimeout: 11000,
  specs: [
    './e2e/**/*.e2e-spec.ts'
  ],
  capabilities: {
    'browserName': 'chrome',
    directConnect: true,
    baseUrl: 'http://localhost:4200/',
    framework: 'jasmine',
    jasmineNodeOpts: {
      showColors: true,
      defaultTimeoutInterval: 30000,
      print: function () {
      }
    },
    onPrepare() {
      require('ts-node').register({
        project: 'e2e/tsconfig.e2e.json'
      });
      jasmine.getEnv().addReporter(new SpecReporter({spec: {displayStacktrace: true}}));
    }
  }
}

tsconfig.e2e.json

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

I am able to start my server by using:

npm run webpack-dev-server -- --config config/webpack.dev.js --open --progress --profile --watch --content-base src/

and when i try to start the e2e test with:

npm-run-all -p -r server:prod:ci protractor

I get following Error:

Error: C:\Users\xxx\Desktop\app\e2e\component.e2e-spec.ts:1
(function (exports, require, module, __filename, __dirname) { import { ComponentPage} from './pages/component.page';
                                                          ^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)

I think that error is thrown because the .ts files aren't transpiled to .js... So i guess either my configuration or the way im starting the tests are wrong.