Adding an import statement to .ts file changes the output directory incorrectly

I have a directory structure as below;

root
|-src
|  |-application code...
|-ts
|  |-tsconfig.json
|  |-src
|  |  |-routes
|  |  |  |-guest.routes.tsx

When an import statement is present in the typescript file, on compile typescript is generating the output file in the same folder as below;

root
|-src
|  |-application code...
|-ts
|  |-tsconfig.json
|  |-src
|  |  |-routes
|  |  |  |-guest.routes.tsx
|  |  |  |-guest.routes.js <-- Compiled file

This is incorrect. How can I force typescript to output the file as defined in the config, like below:

root
|-src
|  |-routes
|  |  |-guest.routes.js <-- Compiled file
|-ts
|  |-tsconfig.json
|  |-src
|  |  |-routes
|  |  |  |-guest.routes.tsx

When not using an import statement in the typescript file, the output appears in the correct place, but adding the import statement back in causes the above problem.

Below is my tsconfig.json;

{
    "compileOnSave": true,
    "compilerOptions": {
        "module": "ES6",
        "noImplicitAny": true,
        "removeComments": false,
        "preserveConstEnums": true,
        "outDir": "./..",
        "rootDir": "./",
        "sourceMap": false,
        "jsx" : "react",
        "lib": ["es2015", "dom"],
        "allowJs": true,
        "watch": true
    },
    "include": [
        "**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts"
    ]
}

and a snippet from the typescript file;

import * as express from 'express';
import * as React from 'react';
import * as ReactDOMServer from 'react-dom/server';

// import causing the output location shifting
import ProfileBuilderApp from './../../../assets/ts/react/profile-builder-app';

class GuestApply {
...

I've tried playing around with the outDir and rootDir configurations to no avail. It seems that typescript is not adhering to the config I have set.

Any help would be greatly appreciated.

Thanks!

via phonicx