Raven Raven - 1 year ago 164
AngularJS Question

Building Typescript for Angular using Gulp

I'm trying to setup an angularjs project according to Johnpapa's Angular Style Guide 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.

What I have:

My project currently looks like this:

+- ts/ # contains .ts source files
+- typings/ # contains .d.ts typing definitions
+- html/ # contains .html files
+- bundle.js # single .js file containing compiled typescript and sourcemaps

Following the angular style guide I have created a separate
file for each angular element.


angular.module('myApp', []);

for initialization of the module and another for a simple implementation of a controller:


export class MyController {
testString = 'test';

.controller('MyController', MyController);

typescript is configured using a simple
. (Note that filesGlob is not active yet - it will become available from TypeScript 2.0)


"exclude" : [
"filesGlob" : [
"compilerOptions": {
"noImplicitAny": true,
"target": "es5",
"sourceMap" : true,
"outFile" : "./dist/bundle.js",
"removeComments": false

What I want:

I would ideally like to

  • Have Gulp monitor new or updated
    files in

  • Concatenate all the files from
    . 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.

  • Compile using the definitions from
    . This would take into consideration the typings in
    (for external modules including 'angular'). Also sourcemaps.

  • Possibly an uglify or babelify step to finish it.

What I tried:

I've tried following the manual from the typescriptlang handbook but this uses browserify and won't work with angular.

Gulp-typescript also has a note on concatenating files but the
option doesn't work like this:

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'));

This configuration will output an empty file with only comments.

Another method mentioned in this question:

gulp.task('ts', function () {
noImplicitAny: true,
out: 'output.js'

gulp.task('default', ['ts'], function() {

But this gave two issues: 1. Even though I only pointed at the
files in
the typescript compiler started spewing errors from .ts in
. 2. It still didn't manage to concatenate everything.

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.


I've configured the gulp environment based on the solution in this answer and removed the 'export' statement for classes / objects that are not inside a typescript module.

Answer Source

If that helps, here is a Angular Typescript Gulp Tutorial that has a basic TypeScript, Angular, Gulp, etc. setup that concatenate the app and the vendor/nodes files. There is the demo code on github.

/* File: gulpfile.js */

// grab our gulp packages
var gulp  = require('gulp');
// Include plugins
var plugins = require("gulp-load-plugins")({
    pattern: ['gulp-*', 'gulp.*', 'main-bower-files', 'del'],
    replaceString: /\bgulp[\-.]/

var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;

// create a default task to build the app
gulp.task('default', ['jade', 'typescript', 'bowerjs', 'bowercss', 'appcss'], function() {
  return plugins.util.log('App is built!')

In my example, we use Jade to HTML:

// Jade to HTML
gulp.task('jade', function() {
    return gulp.src('src/**/*.jade')
        .pipe(plugins.jade()) // pip to jade plugin
        .pipe(gulp.dest('dist')) // tell gulp our output folder
        .pipe(reload({stream: true}))

For TypeScript, we compiled into one single app.js file:

// TYPESCRIPT to JavaScript
gulp.task('typescript', function () {
    return gulp.src('src/**/*.ts')
            noImplicitAny: true,
            out: 'app.js'
    .pipe(reload({stream: true}))

For bower, we merge all the js files in vendor.js and CSS in vendor.css:

gulp.task('bowerjs', function() {



gulp.task('bowercss', function() {


Custom CSS:

// APP css
gulp.task('appcss', function () {
    return gulp.src('src/css/**/*.css')
            stream: true

gulp.task('clean', function(done) {
    var delconfig = [].concat(

    // force: clean files outside current directory
    plugins.del(delconfig, {
        force: true
    }, done);

This is what reloads the browser when changes occur:

// Watch scss AND html files, doing different things with each.
gulp.task('serve', ['default'], function () {

    // Serve files from the root of this project
        server: {
            baseDir: "./dist/"

    gulp.watch("src/**/*.jade", ['jade']).on("change", reload);
    gulp.watch("src/**/*.ts", ['typescript']).on("change", reload);
        gulp.watch("src/**/*.css", ['appcss']).on("change", reload);

My tsconfig.json looks like this... I put the JS files that are automatically compiled from the text editor (Atom) into .tmp/js/atom ... some people put the .js in the same directory as the .ts but I find it confusing... less files is better for me:

  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "outDir": ".tmp/js/atom"
  "exclude": [
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download