protractor.conf.js를 protractor.conf.ts로 사용하고 싶었다. 단순하게 .angular-cli.json만 바꿔도 되었다.

.angular-cli.json

...
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.ts"
    }
  },
...

그러다가 문제가 되는 부분은 일반적인 node에서는 import 문을 인식을 못한다. import 문을 아직 native 하게 지원을 하지 못하기 때문이다. 이 부분을 지원하게 하기 위해서는 ts-node를 활용하면 된다.

ts-node node_modules/.bin/ng

package.json

  ...
  "scripts": {
    "ng": "ts-node node_modules/.bin/ng",
    "start": "ng serve --disable-host-check",
    "build": "ng build --prod",
    "test": "npm run ng -- test",
    "lint": "ng lint",
    "e2e": "npm run ng -- e2e --webdriver-update=false --serve=false",
    ...
  },
  ...
    "devDependencies": {
    "@angular/cli": "1.7.3",
    "@angular/compiler-cli": "5.2.9",
    ...
    "protractor": "5.3.0",
    "ts-node": "5.0.1",
    "tslint": "5.9.1",
    "typescript": "2.6.2"
    ...
  }

보통 ts-node는 devDependency에 들어간다.

단점

• ts-node 자체가 자체 트랜스파일을 하게 된다.
• 이게 WebStorm(IntelliJ) 디버깅을 적용할때 source-map이 사라져서 그런지 정확한 위치를 잡아주지 않았다.
• 디버깅 때문에 위 방법을 포기했다.