title: Building an Angular 2 project with a single TypeScript file compiled separately
body: <p>I'm currently creating a Chrome Extension in Angular 2. The application has a background.js file that contains the functionality relating to the long-running process that will run in the background while the extension is running. This file (<em>background.js</em>) is currently completely separate from the Angular 2 project and upon build is handled (and copied) as an asset. This setup works, however I really want to use TypeScript in my background file as well.</p>
  
  <p>In this TypeScript file I actually want to access some of the files from my Angular 2 project as such:</p>
  
  <pre><code>///&lt;reference path="app/app.settings.ts"/&gt;
  </code></pre>
  
  <p>I only need settings (constants) and business objects (classes), nothing more complex.</p>
  
  <p>To actually use this project as an extension I need to build the Angular 2 project and compile the background TypeScript file to a separate JavaScript file on the same location.</p>
  
  <p>What I tried:</p>
  
  <ol>
  <li>Configuring angular build to separately compile the background file</li>
  </ol>
  
  <p>I played around with my <em>angular-cli.json</em> file to achieve the desired results with a single "<em>ng build</em>" commands. I tried the <em>include</em> and <em>files</em> options, with no luck.</p>
  
  <ol start="2">
  <li>Using a script that builds the angular app and compiles the .ts file to the same directory</li>
  </ol>
  
  <p>This one was actually promising. I have the following script that takes a single argument (output path):</p>
  
  <pre><code>#!/bin/bash
  ng build --output-path=$1
  tsc --outDir $1 src/background.ts
  </code></pre>
  
  <p>The script works, the Angular projects is built, the background.ts file is compiled along with the referenced dependencies and these are all available in the desired location. However the generated JavaScript does not work, I'm getting the following errors for example:</p>
  
  <pre><code>Uncaught ReferenceError: exports is not defined
  Uncaught SyntaxError: Unexpected token import
  </code></pre>
  
  <p>As I understand now, I'll have to use Webpack to actually make this work, but I did not find a way to do that from the command line, separately from my Angular project.</p>