Update to Angular2.rc-1 and bundle app files

.gitignore

@@ -1,9 +1,10 @@
-.sass-cache
-.coverrun
 .coverdata
-node_modules
-dist
-src/api/vendor
+.coverrun
 api-coverage
+build
 coverage.html
+dist
+node_modules
+src/api/vendor
+typings
 

gulpfile.js

@@ -4,28 +4,28 @@ let gulp = require('gulp'),
     fs = require('fs'),
     del = require('del'),
     merge = require('merge-stream'),
-
-    composer = require('gulp-composer'),
-    tsc = require('gulp-typescript'),
-    jsMinify = require('gulp-uglify'),
+    SystemBuilder = require('systemjs-builder'),
 
     mocha = require('gulp-mocha'),
     coverage = require('gulp-coverage'),
     phpunit = require('gulp-phpunit'),
 
+    concat = require('gulp-concat'),
+    imageMin = require('gulp-imagemin'),
+    composer = require('gulp-composer'),
+
+    tsc = require('gulp-typescript'),
+    jsMinify = require('gulp-uglify'),
+
     scsslint = require('gulp-scss-lint'),
     sass = require('gulp-sass'),
-
-    concat = require('gulp-concat'),
     cssPrefixer = require('gulp-autoprefixer'),
     cssMinify = require('gulp-cssnano'),
-    imageMin = require('gulp-imagemin'),
 
     paths = {
         bourbon: 'node_modules/bourbon/app/assets/stylesheets',
         neat: 'node_modules/bourbon-neat/app/assets/stylesheets',
         scss_base: 'node_modules/scss-base/src',
-        tsconfig: 'src/app/tsconfig.json',
 
         tests_app: 'test/app/**/*.spec.js',
         tests_api: 'test/api/**/*.php',
@@ -37,20 +37,11 @@ let gulp = require('gulp'),
         ],
         images: 'src/images/**/*.*',
         scss: 'src/scss/**/*.scss',
-        scssmain: 'src/scss/main.scss',
+        scssMain: 'src/scss/main.scss',
         api: [
             'src/api/**/*.*',
             'src/api/.htaccess',
             '!src/api/composer.*'
-        ],
-        vendor: [
-            'node_modules/angular2/bundles/angular2-polyfills.js',
-            'node_modules/es6-shim/es6-shim.js',
-            'node_modules/systemjs/dist/system.src.js',
-            'node_modules/rxjs/bundles/Rx.js',
-            'node_modules/angular2/bundles/angular2.dev.js',
-            'node_modules/angular2/bundles/router.dev.js',
-            'node_modules/angular2/bundles/http.dev.js'
         ]
     };
 
@@ -75,7 +66,7 @@ gulp.task('lintScss', () => {
 });
 
 gulp.task('styles', () => {
-    return gulp.src(paths.scssmain)
+    return gulp.src(paths.scssMain)
         .pipe(sass({
             precision: 10,
             includePaths: [
@@ -90,30 +81,41 @@ gulp.task('styles', () => {
 });
 
 gulp.task('tsc', () => {
-    let tsProject = tsc.createProject(paths.tsconfig),
+    let tsProject = tsc.createProject('tsconfig.json'),
         tsResult = tsProject.src()
             .pipe(tsc(tsProject));
 
     return tsResult.js
-        .pipe(gulp.dest('dist/app/'));
+        .pipe(gulp.dest('build/'));
 });
 
-gulp.task('vendor', () => {
-    return gulp.src(paths.vendor)
-        .pipe(concat('vendor.js'))
+gulp.task('shims', () => {
+    return gulp.src([
+            'node_modules/zone.js/dist/zone.js',
+            'node_modules/reflect-metadata/Reflect.js'
+        ])
+        .pipe(concat('shims.js'))
         .pipe(gulp.dest('dist/js/'));
 });
 
+gulp.task('system-build', ['tsc'], () => {
+    var builder = new SystemBuilder();
+
+    return builder.loadConfig('system.config.js')
+        .then(() => builder.buildStatic('app', 'dist/js/bundle.js'))
+        .then(() => del('build'));
+});
+
 gulp.task('minify', () => {
-    let js = gulp.src('dist/js/vendor.js')
+    let js = gulp.src('dist/js/**/*.js')
         .pipe(jsMinify())
         .pipe(gulp.dest('dist/js/'));
 
-    let styles = gulp.src('dist/css/styles.css')
+    let css = gulp.src('dist/css/styles.css')
         .pipe(cssMinify())
         .pipe(gulp.dest('dist/css/'));
 
-    return merge(js, styles);
+    return merge(js, css);
 });
 
 gulp.task('composer', () => {
@@ -129,15 +131,15 @@ gulp.task('api', () => {
 
 gulp.task('test', ['test-app', 'test-api']);
 
-gulp.task('test-app', ['tsc', 'vendor'], () => {
+gulp.task('test-app', ['tsc'], () => {
     return gulp.src(paths.tests_app)
         .pipe(mocha());
 });
 
-gulp.task('coverage', ['tsc', 'vendor'], () => {
+gulp.task('coverage', ['tsc'], () => {
     return gulp.src(paths.tests_app)
         .pipe(coverage.instrument({
-            pattern: ['dist/app/**/*.js']
+            pattern: ['build/**/*.js']
         }))
         .pipe(mocha())
         .pipe(coverage.gather())
@@ -157,7 +159,7 @@ gulp.task('test-api-single', () => {
 });
 
 gulp.task('watch', () => {
-    let watchTs = gulp.watch(paths.ts, ['tsc']),
+    let watchTs = gulp.watch(paths.ts, ['system-build']),
         watchScss = gulp.watch(paths.scss, ['lintScss', 'styles']),
         watchHtml = gulp.watch(paths.html, ['html']),
         watchImages = gulp.watch(paths.images, ['images']),
@@ -187,7 +189,15 @@ gulp.task('watchtests', () => {
     watchTs.on('change', onChanged);
 });
 
-gulp.task('default', ['tsc', 'vendor', 'html', 'images', 'lintScss', 'styles', 'api'], () => {
+gulp.task('default', [
+    'shims',
+    'system-build',
+    'html',
+    'images',
+    'lintScss',
+    'styles',
+    'api'
+], () => {
     fs.chmod('dist/api', '0777');
 });
 

package.json

@@ -6,7 +6,7 @@
   "private": true,
   "scripts": {
     "test": "gulp test-api && gulp test-app",
-    "postinstall": "gulp composer"
+    "postinstall": "gulp composer && typings i"
   },
   "repository": {
     "type": "git",
@@ -29,7 +29,13 @@
   },
   "homepage": "https://github.com/kiswa/TaskBoard#readme",
   "devDependencies": {
-    "angular2": "^2.0.0-beta.17",
+    "@angular/common": "^2.0.0-rc.1",
+    "@angular/compiler": "^2.0.0-rc.1",
+    "@angular/core": "^2.0.0-rc.1",
+    "@angular/http": "^2.0.0-rc.1",
+    "@angular/platform-browser": "^2.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "^2.0.0-rc.1",
+    "@angular/router": "^2.0.0-rc.1",
     "bourbon": "^4.2.7",
     "bourbon-neat": "^1.7.4",
     "chai": "^3.5.0",
@@ -47,14 +53,16 @@
     "gulp-phpunit": "^0.14.0",
     "gulp-sass": "^2.3.1",
     "gulp-scss-lint": "^0.3.9",
-    "gulp-typescript": "^2.13.0",
+    "gulp-typescript": "^2.13.1",
     "gulp-uglify": "^1.5.3",
     "gulp-util": "^3.0.7",
     "merge-stream": "^1.0.0",
-    "reflect-metadata": "0.1.2",
+    "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "scss-base": "^1.1.0",
     "systemjs": "^0.19.27",
+    "systemjs-builder": "^0.15.16",
+    "typings": "^0.8.1",
     "zone.js": "^0.6.12"
   }
 }

src/app/app.component.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+import { TopNav } from './top-nav/top-nav.component';
+
+@Component({
+    selector: 'app-component',
+    directives: [ TopNav ],
+    templateUrl: 'app/app.template.html'
+})
+export class AppComponent {
+}
+

src/app/app.ts

@@ -1,15 +0,0 @@
-import { Component } from 'angular2/core';
-import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
-
-import 'rxjs/Rx'; // Import all of RxJs
-
-import { TopNav } from './top-nav/top-nav.component';
-
-@Component({
-    selector: 'app-component',
-    directives: [ ROUTER_DIRECTIVES, TopNav ],
-    templateUrl: 'app/app.template.html'
-})
-export class AppComponent {
-}
-

src/app/boot.ts

@@ -1,15 +0,0 @@
-///<reference path="../../node_modules/angular2/typings/browser.d.ts"/>
-
-import { bootstrap } from 'angular2/platform/browser';
-import { ROUTER_PROVIDERS } from 'angular2/router';
-import { HTTP_PROVIDERS } from 'angular2/http';
-//import { enableProdMode } from 'angular2/core';
-
-import { AppComponent } from './app';
-
-//enableProdMode();
-
-bootstrap(AppComponent, [
-    ROUTER_PROVIDERS,
-    HTTP_PROVIDERS ]);
-

src/app/main.ts

@@ -0,0 +1,14 @@
+import { bootstrap } from '@angular/platform-browser-dynamic';
+import { ROUTER_PROVIDERS } from '@angular/router';
+import { HTTP_PROVIDERS } from '@angular/http';
+//import { enableProdMode } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+//enableProdMode();
+
+bootstrap(AppComponent, [
+    ROUTER_PROVIDERS,
+    HTTP_PROVIDERS
+]);
+

src/app/top-nav/top-nav.component.ts

@@ -1,4 +1,4 @@
-import { Component } from 'angular2/core';
+import { Component } from '@angular/core';
 
 @Component({
     selector: 'top-nav',

src/app/tsconfig.json

@@ -1,13 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "ES5",
-        "module": "commonjs",
-        "moduleResolution": "node",
-        "declaration": false,
-        "noImplicitAny": false,
-        "removeComments": true,
-        "noLib": false,
-        "experimentalDecorators": true,
-        "emitDecoratorMetadata": true
-    }
-}

src/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <title>TaskBoard</title>
-        <base href="/web/TaskBoard/dist/">
+        <base href="/dist/">
 
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -12,24 +12,15 @@
         <meta name="author" content="Matthew Ross">
 
         <link rel="stylesheet" href="css/styles.css">
-        <script src="js/vendor.js"></script>
+        <script src="js/shims.js"></script>
     </head>
     <body>
-        <script>
-            System.config({
-                packages: {
-                    'app': { defaultExtension: 'js' }
-                }
-            });
-            System.import('app/boot').
-                then(null, console.error.bind(console));
-        </script>
-
         <div class="container">
             <app-component>
                 <div class="loading">TaskBoard is Loading...</div>
             </app-component>
         </div>
+        <script src="js/bundle.js"></script>
     </body>
 </html>
 

system.config.js

@@ -0,0 +1,35 @@
+(function(global) {
+    var map = {
+        'app':      'build',
+        'rxjs':     'node_modules/rxjs',
+        '@angular': 'node_modules/@angular'
+    };
+
+    var packages = {
+        'app':  { main: 'main.js',  defaultExtension: 'js' },
+        'rxjs': { defaultExtension: 'js' }
+    };
+
+    var angularPackages = [
+        '@angular/common',
+        '@angular/compiler',
+        '@angular/core',
+        '@angular/http',
+        '@angular/platform-browser',
+        '@angular/platform-browser-dynamic',
+        '@angular/router'
+    ];
+
+    angularPackages.forEach(function(pkgName) {
+        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+    });
+
+    var config = {
+        map: map,
+        packages: packages
+    };
+
+  System.config(config);
+
+})(this);
+

tsconfig.json

@@ -0,0 +1,17 @@
+{
+    "compilerOptions": {
+        "target": "es5",
+        "module": "commonjs",
+        "moduleResolution": "node",
+        "sourceMap": false,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "removeComments": true,
+        "noImplicitAny": false
+    },
+    "exclude": [
+        "node_modules",
+        "typings/main",
+        "typings/main.d.ts"
+    ]
+}

typings.json

@@ -0,0 +1,5 @@
+{
+    "ambientDependencies": {
+        "es6-shim": "registry:dt/es6-shim#0.31.2+20160317120654"
+    }
+}