title: Tryping to compile TypeScript for Angular with Gulp
body: <p>I'm trying to learn TypeScript and Gulp, but I cant seem to get the basics working..</p>
  
  <p>gulpfile.ts:</p>
  
  <pre><code>"use strict";
  
  const gulp = require("gulp");
  const del = require("del");
  const tsc = require("gulp-typescript");
  const sourcemaps = require('gulp-sourcemaps');
  const tsProject = tsc.createProject("tsconfig.json");
  
  /**
  * Remove build directory.
  */
  gulp.task('clean', (cb) =&gt; {
      return del(["build"], cb);
  });
  
  /**
  * Compile TypeScript sources and create sourcemaps in dist directory.
  */
  gulp.task("compile", () =&gt; {
      let tsResult = gulp.src("src/**/*.ts")
      .pipe(sourcemaps.init())
      .pipe(tsc(tsProject));
      return tsResult.js
      .pipe(sourcemaps.write(".", {sourceRoot: '/src'}))
      .pipe(gulp.dest("dist"));
  });
  
  /**
  * Copy all required libraries into dist directory.
  */
  gulp.task("libs", () =&gt; {
      return gulp.src([
          'core-js/client/shim.min.js',
          'systemjs/dist/system-polyfills.js',
          'systemjs/dist/system.src.js',
          'reflect-metadata/Reflect.js',
          'rxjs/**',
          'zone.js/dist/**',
          '@angular/**'
      ], {cwd: "node_modules/**"}) /* Glob required here. */
      .pipe(gulp.dest("dist/lib"));
  });
  
  /**
  * Copy all resources that are not TypeScript files into dist directory.
  */
  gulp.task("resources", () =&gt; {
      return gulp.src(["src/**/*", "!**/*.ts"])
      .pipe(gulp.dest("dist"));
  });
  
  /**
  * Watch for changes in TypeScript, HTML and CSS files.
  */
  gulp.task('watch', function () {
      gulp.watch(["src/**/*.ts"], ['compile']).on('change', function (e) {
          console.log('TypeScript file ' + e.path + ' has been changed. Compiling.');
      });
  
      gulp.watch(["src/**/*.html", "src/**/*.css"], ['resources']).on('change', function (e) {
          console.log('Resource file ' + e.path + ' has been changed. Updating.');
      });
  });
  
  /**
  * Build the project.
  */
  gulp.task("build", ['compile', 'resources', 'libs'], () =&gt; {
      console.log("Building the project ...");
  });
  </code></pre>
  
  <ul>
  <li>My folder structure: <a href="https://i.imgur.com/yyPHAIU.png" rel="nofollow noreferrer">https://i.imgur.com/yyPHAIU.png</a></li>
  <li>gulpfile.ts: <a href="https://pastebin.com/mJwT3RVF" rel="nofollow noreferrer">https://pastebin.com/mJwT3RVF</a></li>
  <li>main.ts: <a href="https://pastebin.com/5ShRiZUy" rel="nofollow noreferrer">https://pastebin.com/5ShRiZUy</a></li>
  <li>app.module.ts: <a href="https://pastebin.com/LsZqK1uC" rel="nofollow noreferrer">https://pastebin.com/LsZqK1uC</a></li>
  <li>app.component.ts: <a href="https://pastebin.com/LW1BQu71" rel="nofollow noreferrer">https://pastebin.com/LW1BQu71</a></li>
  <li>Output: <a href="https://pastebin.com/gujyp3zR" rel="nofollow noreferrer">https://pastebin.com/gujyp3zR</a></li>
  </ul>
  
  <p>Can anyone point out what I'm doing wrong?</p>