title: Building Typescript for Angular using Gulp
body: <p>I'm trying to setup an angularjs project according to <a href="https://github.com/johnpapa/angular-styleguide/tree/master/a1" rel="nofollow noreferrer">Johnpapa's Angular Style Guide</a> whilst using TypeScript and Gulp as a build tool. I believe Gulp is currently recommended over Grunt but I'm not very experienced with Gulp.</p>
  
  <h3>What I have:</h3>
  
  <p>My project currently looks like this:</p>
  
  <pre><code>src/
     +- ts/        # contains .ts source files
     +- typings/   # contains .d.ts typing definitions
     +- html/      # contains .html files
  dist/
     +- bundle.js  # single .js file containing compiled typescript and sourcemaps
  </code></pre>
  
  <p>Following the angular style guide I have created a separate <code>.ts</code> file for each angular element.</p>
  
  <pre><code>my-app.module.ts
  ----------------
  
  angular.module('myApp', []);
  </code></pre>
  
  <p>for initialization of the module and another for a simple implementation of a controller:</p>
  
  <pre><code>my-controller.controller.ts
  ----------------------------
  
  export class MyController {
      testString = 'test';
  }
  
  angular
      .module('myApp')
      .controller('MyController', MyController);
  </code></pre>
  
  <p>typescript is configured using a simple <code>tsconfig.json</code>. (Note that filesGlob is not active yet - it will become available from TypeScript 2.0)</p>
  
  <pre><code>tsconfig.json
  -------------
  
  {
    "exclude" : [
      "node_modules"
    ],
    "filesGlob" : [
      "./src/typings/index.d.ts",
      "./src/ts/**/*.ts",
      "!./node_modules/**/*.ts"
    ],
    "compilerOptions": {
      "noImplicitAny": true,
      "target": "es5",
      "sourceMap" : true,
      "outFile" : "./dist/bundle.js",
      "removeComments": false
    }
  }
  </code></pre>
  
  <h3>What I want:</h3>
  
  <p>I would ideally like to</p>
  
  <ul>
  <li>Have Gulp monitor new or updated <code>.ts</code> files in <code>./src/ts/**/*.ts</code></li>
  <li>Concatenate all the files from <code>./src/ts/**/*.ts</code>. This is required for angular to work properly. Other methods I've tried using requirejs or browserify can't find the other .ts files without having to manually input references to these files.</li>
  <li>Compile using the definitions from <code>tsconfig.json</code>. This would take into consideration the typings in <code>./src/typings/index.d.ts</code> (for external modules including 'angular'). Also sourcemaps.</li>
  <li>Possibly an uglify or babelify step to finish it.</li>
  </ul>
  
  <h3>What I tried:</h3>
  
  <p>I've tried following the manual from the <a href="https://www.typescriptlang.org/docs/handbook/gulp.html" rel="nofollow noreferrer">typescriptlang handbook</a> but this uses browserify and won't work with angular.</p>
  
  <p>Gulp-typescript also has a note on <a href="https://github.com/ivogabe/gulp-typescript#concatenate-files" rel="nofollow noreferrer">concatenating files</a> but the <code>out</code> option doesn't work like this:</p>
  
  <pre><code>var gulp = require('gulp');
  var ts = require('gulp-typescript');
  var tsProject = ts.createProject('tsconfig.json');
  
  gulp.task('default', function () {
      var tsResult = tsProject.src().pipe(ts(tsProject));
  
      return tsResult.js.pipe(gulp.dest('dist'));
  });
  </code></pre>
  
  <p>This configuration will output an empty file with only comments.</p>
  
  <p>Another method mentioned in <a href="https://stackoverflow.com/questions/36160066/using-gulp-how-to-first-compile-typescript-then-concatenate-the-result-and-uglif">this question</a>:</p>
  
  <pre><code>gulp.task('ts', function () {
      gulp.src('./src/ts/**/*.ts')
          .pipe(ts({
              noImplicitAny: true,
              out: 'output.js'
          }))
          .pipe(gulp.dest('./tmp/ts'));
  });
  
  gulp.task('default', ['ts'], function() {
      gulp.src(['./tmp/ts/output.js'])
          .pipe(sourcemaps.init())
          .pipe(uglify())
          .pipe(sourcemaps.write('/'))
          .pipe(gulp.dest('./dist/'));
  });
  </code></pre>
  
  <p>But this gave two issues: 1. Even though I only pointed at the <code>.ts</code> files in <code>./src/ts</code> the typescript compiler started spewing errors from .ts in <code>./node_modules</code>. 2. It still didn't manage to concatenate everything.</p>
  
  <p>I'm at quite a loss here. Can anyone help me set up this build script? I'm surprised I couldn't find a similar working demo anywhere.</p>
  
  <h1>Solution:</h1>
  
  <p>I've configured the gulp environment based on the solution in <a href="https://stackoverflow.com/a/38214928/557552">this answer</a> and <strong>removed the 'export' statement for classes / objects that are not inside a typescript module</strong>.</p>