title: Project references in TypeScript 3 with separate `outDir`
body: <p>I'd like to make use of the project references features in TypeScript 3.1.
  The directory structure of my project originally looks like this after the compilation:</p>
  
  <pre><code>.
  ├── A
  │   ├── a.ts
  │   ├── dist
  │   │   ├── A
  │   │   │   └── a.js
  │   │   └── Shared
  │   │       └── shared.js
  │   └── tsconfig.json
  └── Shared
      ├── dist
      │   └── shared.js
      ├── shared.ts
      └── tsconfig.json
  </code></pre>
  
  <p>Contents of the <code>Shared</code> directory:</p>
  
  <p><code>shared.ts</code>:</p>
  
  <pre><code>export const name = "name";
  </code></pre>
  
  <p><code>tsconfig.json</code>:</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",                          
      "module": "commonjs",                     
      "outDir": "dist",                        
      "strict": true
    }
  }
  </code></pre>
  
  <p>Contents of the <code>A</code> directory:</p>
  
  <p><code>a.ts</code>:</p>
  
  <pre><code>import { name } from "../Shared/shared"; 
  
  console.log(name);
  </code></pre>
  
  <p><code>tsconfig.json</code>:</p>
  
  <pre><code>{
    "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "outDir": "dist",
      "strict": true
    }
  }
  </code></pre>
  
  <p>And I could successfully run it by running <code>node dist/A/a.js</code> in the A directory.</p>
  
  <p>What I didn't like about this was that everything was getting copied into A's output directory. I thought project references are here to fix this problem.</p>
  
  <p>To enable project references, I added the following line to <code>Shared/tsconfig.json</code>.</p>
  
  <pre><code>"composite": true
  </code></pre>
  
  <p>And the following to <code>A/tsconfig.json</code>: </p>
  
  <pre><code>"references": [
    { "path": "../Shared" }
  ]
  </code></pre>
  
  <p>Now when I compile, the directory structure is like the following, which is what I expected:</p>
  
  <pre><code>.
  ├── A
  │   ├── a.ts
  │   ├── dist
  │   │   └── a.js
  │   └── tsconfig.json
  └── Shared
      ├── dist
      │   ├── shared.d.ts
      │   └── shared.js
      ├── shared.ts
      └── tsconfig.json
  </code></pre>
  
  <p>However, when I run the <code>node dist/a.js</code> in the <code>A</code> directory, I get the following Error:</p>
  
  <pre><code>module.js:538
      throw err;
      ^
  
  Error: Cannot find module '../Shared/shared'
  </code></pre>
  
  <p>The reason is that in the generated <code>a.js</code> file, the reference to the imported module is not resolved properly:</p>
  
  <pre><code>"use strict";
  Object.defineProperty(exports, "__esModule", { value: true });
  var shared_1 = require("../Shared/shared");
  console.log(shared_1.name);
  </code></pre>
  
  <p>Is there a way to get it working without putting all output files into the same directory?</p>
  
  <p>Or, is there a better way to organize my project to make use of project references?</p>