title: Typescript module not loading after compile
body: <p>New to Angular/ts/js. I went through the Tour of Heroes tutorial, now I am trying to incorporate compiling and building via gulp. Seems to be going well enough but I can't seem to figure this roadblock out. </p>
  
  <p>In a single example, I have the app/components/app.module.ts file (disregard the deep relative import pathing; I plan on refactoring it later):</p>
  
  <pre><code>import { BrowserModule } from '../../node_modules/@angular/platform-browser';
  import { NgModule } from '../../node_modules/@angular/core';
  import { FormsModule } from '../../node_modules/@angular/forms';
  import { HttpModule } from '../../node_modules/@angular/http';
  
  import { InMemoryWebApiModule } from '../../node_modules/angular-in-memory-web-api';
  import { InMemoryDataService } from './in-memory-data.service';
  
  import { AppComponent } from './app.component';
  import { AppRoutingModule } from './app-routing.module';
  import { HeroService } from './hero.service';
  import { DashboardComponent } from './dashboard.component';
  import { HeroesComponent } from './heroes.component';
  import { HeroDetailComponent } from './hero-detail.component';
  import { HeroSearchComponent } from './hero-search.component';
  
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule,
      AppRoutingModule,
      HttpModule,
      InMemoryWebApiModule.forRoot(InMemoryDataService, { delay: 600 })
    ],
    declarations: [
      AppComponent,
      DashboardComponent,
      HeroSearchComponent,
      HeroesComponent,
      HeroDetailComponent,
    ],
    providers: [HeroService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>After I compile it to js and serve up the application, the console tells me: </p>
  
  <blockquote>
    <p>"Cannot GET /js/components/app.component" </p>
  </blockquote>
  
  <p>(along with all the other modules after it), even though that js DOES exist at the location. </p>
  
  <p>I believe I found that it's still expecting it to be the ts file. If I explicitly change the import to be a js file as </p>
  
  <pre><code>"import { AppComponent } from './app.component.js';" 
  </code></pre>
  
  <p>then it loads fine.</p>
  
  <p>In my research, I think I may need a sourcemap, but being entirely green at this I'm not sure. I'm not entirely sure how to describe/define the issue so web searches haven't netted me anything definitive. Can someone get me on the right track?</p>
  
  <p><strong>Update</strong>
  Here is my gulpfile. Still learning so I know it's messy.</p>
  
  <pre><code>// grab our packages
  var gulp   = require('gulp'),
      jshint = require('gulp-jshint'),
      clean = require('gulp-clean'),
      connect = require('gulp-connect'),
      gnf = require('gulp-npm-files');
  
  const tscConfig = require('./tsconfig.json');
  
  var ts = require('gulp-typescript');
  var merge = require('merge2');
  
  // define the default task and add the watch task to it
  gulp.task('default', ['watch']);
  
  // configure the jshint task
  gulp.task('jshint', function() {
    return gulp.src('app/components/js/**/*.js')
      .pipe(jshint())
      .pipe(jshint.reporter('jshint-stylish'));
  });
  
  // configure which files to watch and what tasks to use on file changes
  gulp.task('watch', function() {
    gulp.watch('app/components/js/**/*.js', ['jshint']);
  });
  
  
  gulp.task('compileTs', function () {
    var tsResult = gulp.src('app/**/*.ts')
        .pipe(ts({
            declaration: true
        }));
  
    return merge([
        tsResult.dts.pipe(gulp.dest('dist/definitions')),
        tsResult.js.pipe(gulp.dest('dist/js'))
    ]);
  });
  
  gulp.task('compileEnviroTs', function () {
    var tsResult = gulp.src('environments/**/*.ts')
        .pipe(ts({
            declaration: true
        }));
  
    return merge([
        tsResult.dts.pipe(gulp.dest('dist/definitions')),
        tsResult.js.pipe(gulp.dest('dist/environments'))
    ]);
  });
  
  
  
  gulp.task('cleanDist', function() {
    return gulp.src('dist', {read: false})
      .pipe(clean());
  });
  
  
  gulp.task('copyDeps', ['cleanDist'], function() {
    gulp
      .src(gnf(null, './package.json'), {base:'./'})
      .pipe(gulp.dest('dist'));
  });
  
  
  gulp.task('copyEnvironments', ['copyDeps'], function() {
    return gulp.src('environments/**/*')
      .pipe(gulp.dest('dist/environments'));
  });
  
  gulp.task('copyComponents', ['copyEnvironments'], function() {
    return gulp.src('app/components/**/*')
      .pipe(gulp.dest('dist/components'));
  });
  
  gulp.task('copyCss', ['copyComponents'], function() {
    return gulp.src('app/css/**/*')
      .pipe(gulp.dest('dist/css'));
  });
  
  gulp.task('copyImg', ['copyCss'], function() {
    return gulp.src('app/img/**/*')
      .pipe(gulp.dest('dist/img'));
  });
  
  gulp.task('copyJs', ['copyImg'], function() {
    return gulp.src('app/js/**/*')
      .pipe(gulp.dest('dist/js'));
  });
  
  gulp.task('copyPartials', ['copyJs'], function() {
    return gulp.src('app/partials/**/*')
      .pipe(gulp.dest('dist/partials'));
  });
  
  gulp.task('copyFiles', ['copyPartials'], function() {
    return gulp.src('app/**/*')
      .pipe(gulp.dest('dist'));
  });
  
  
  gulp.task('connect', ['copyFiles', 'compileTs'], function () {
    connect.server({
      root: 'dist/',
      port: 8888
    });
  });
  
  
  gulp.task('dev', ['cleanDist', 'compileTs', 'compileEnviroTs', 'copyDeps', 'copyFiles', 'connect']);
  </code></pre>
  
  <p><strong>Update</strong>
  Here is my code repo, if it helps any. I'm in the gulp branch.
  <a href="https://github.com/fmjnax/LearningAngular.git" rel="nofollow noreferrer">https://github.com/fmjnax/LearningAngular.git</a></p>