Failed loading config.ts due to import protractor - node.js

Question

I am trying to start a new protractor project to test an angular site. I installed node.js, typescript, protractor globally and jasmine. I go to the project folder and do webdriver-manager update. Then I do webdriver-manager start. I also build the config.ts using tsc config.ts. Everything works fine until i try protractor config.ts. Here i will provide my config.ts and my package.json.
{
"name": "protractortests",
"version": "1.0.0",
"description": "Automated tests for a game platform",
"main": "index.js",
"dependencies": {
"#types/jasmine": "^3.3.12",
"#types/node": "^12.0.2",
"jasmine": "^3.4.0",
"protractor": "^5.4.2"
},
"devDependencies": {},
"scripts": {
"test": "protractor config.ts"
}
and my config.ts:
import { ProtractorBrowser, Config } from "protractor";
export let config: Config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
capabilities: {
'browserName': 'chrome'
},
framework: 'jasmine',
specs: ['./FirstSpec.ts'],
jasmineNodeOpts: {
defaultTimeoutInterval: 90000
},
onPrepare: () => {
let globals = require('protractor/built');
let browser = globals.browser;
browser.manage().window().maximize();
browser.manage().timeouts().implicitlyWait(5000);
}
}
E/configParser - Error code: 105
[11:40:53] E/configParser - Error message: failed loading configuration file config.ts
[11:40:53] E/configParser - C:\Users\Victor\Documents\ProtractorTests\config.ts:1
(function (exports, require, module, __filename, __dirname) { import { ProtractorBrowser, Config } from "protractor";
^
SyntaxError: Unexpected token {
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
npm ERR! Test failed. See above for more details.

Answer 1

By referring to example at link https://github.com/angular/protractor/tree/5.4.1/exampleTypescript
You don't need to import ProtractorBrowser. You can work with browser directly with object Browser.

Answer 2

Commenters pointed out that you can't give Protractor a config file in native Typescript, and need to compile it to config.js then pass that. There's really no point in writing the file in Typescript at all, it just adds an extra step that provides no value to you. If you want editor autocomplete, you can decorate your JS with type annotations:
const { join } = require("path");
const { register } = require("ts-node");
const { SpecReporter, StacktraceOption } = require("jasmine-spec-reporter");
/** #type {import("protractor").Config} */
const config = {
directConnect: true,
baseUrl: "http://localhost:8080",
framework: "jasmine",
noGlobals: true,
specs: [ "./src/**/*.e2e.ts" ],
onPrepare() {
register({
project: join(__dirname, "./tsconfig.json")
});
jasmine.getEnv().addReporter(new SpecReporter({
spec: {
displayStacktrace: StacktraceOption.PRETTY
}
}));
}
};
module.exports = { config };
I adapted my config from this excellent example.