Can't boot Angular app after compiling to single file

Question

I'm having trouble booting my app after upgrading to TypeScript 1.8 and compiling my app to a single file with outFile.

All my files are compiled to a single app.js in the dist folder of my project. I can see in the network inspector that app.js is correctly loaded from the server. No errors are shown but it seems like my bootstrap function for app is never executed. The app works fine when not compiled.

SystemJS setup

System.config({
  map: {
    'app': '/path/to/dist'
  },
  packages: {        
    '/path/to/dist': {
      main: 'app',
      format: 'register',
      defaultExtension: 'js'
    }
  }
});
System.import('app')
  .then(null, console.error.bind(console));

boot.ts

// Required for https://github.com/angular/angular/issues/7052
///<reference path="../node_modules/angular2/typings/browser.d.ts"/> 
import {bootstrap} from 'angular2/platform/browser';
import {ComponentRef, provide} from 'angular2/core';
import {AppComponent} from './components/app/app.component';
import {HTTP_PROVIDERS} from 'angular2/http';
import {ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy, APP_BASE_HREF} from 'angular2/router';
import {PanelsService} from './components/panels/panels.service';
import {StoriesService} from './components/stories/stories.service';
import {UrlService} from './components/common/url.service';
import {UserService} from './components/user/user.service';
import {AppService} from './components/app/app.service';
import {AlertsService} from './components/alerts/alerts.service';

.................
.................
.................
.................

bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  ROUTER_PROVIDERS,
  provide(LocationStrategy, {useClass: HashLocationStrategy}),
  PanelsService,
  .............
  .............
  .............
  AlertsService
]).catch(err => console.error(err));

I'm sure I'm missing something straightforward here. Do I need to NOT include my boot.ts in my concatenated file?

For the sake of completeness, I'm using gulp-typescript 2.12.0 to compile my source files using the following task....

return gulp
  .src('app/**/*.ts')
  .pipe(sourcemaps.init())
  .pipe(typescript(tscConfig.compilerOptions))
  .pipe(sourcemaps.write('.'))
  .pipe(gulp.dest('./dist'));

...and my tsconfig.json is the following

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outFile": "app.js"
  },
  "exclude": [
    "node_modules"
  ]
}

Any help would be greatly appreciated.

Answer 1

I think that you have all your compiled JS code into your single file. So you need to include this JS file in a script tag and to update your SystemJS configuration:

<script src="/path/to/dist/app.js"></script
<script>
  System.config({
  });
  System.import('app')
    .then(null, console.error.bind(console));
</script>