Angular rc.1

SystemJs builder

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 app/**/*.js
+app/**/*.js.map
 typings
 npm-debug.log
 public/ng2

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2015 Vlado Tesanovic
+Copyright (c) 2016 Vlado Tesanovic
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

app.js

@@ -9,21 +9,21 @@ var users = require('./routes/users');
 
 var app = express();
 
-// view engine setup
-// app.set('views', path.join(__dirname, 'views'));
-// app.set('view engine', 'jade');
-
 // expose node_modules to client app
 app.use(express.static(__dirname + "/node_modules"));
 
 // uncomment after placing your favicon in /public
-//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
+// app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
 app.use(logger('dev'));
 app.use(bodyParser.json());
 app.use(bodyParser.urlencoded({ extended: false }));
 app.use(cookieParser());
+
+// Do we need this?
 app.use(require('stylus').middleware(path.join(__dirname, 'public')));
+
 app.use(express.static(path.join(__dirname, 'public')));
+app.use(express.static(path.join(__dirname, 'app')));
 
 app.use('/users', users);
 
@@ -35,13 +35,12 @@ app.use(function(req, res, next) {
 });
 
 // error handlers
-
 // development error handler
 // will print stacktrace
 if (app.get('env') === 'development') {
   app.use(function(err, req, res, next) {
     res.status(err.status || 500);
-    res.render('error', {
+    res.json({
       message: err.message,
       error: err
     });
@@ -52,7 +51,7 @@ if (app.get('env') === 'development') {
 // no stacktraces leaked to user
 app.use(function(err, req, res, next) {
   res.status(err.status || 500);
-  res.render('error', {
+  res.json({
     message: err.message,
     error: {}
   });

app/components/app.component.css

@@ -1,5 +1,5 @@
 h1 {
 	color: white;
-	background: darkred;
+	background: darkgray;
 	padding: 20px;
 }

app/components/app.component.html

@@ -1 +1,5 @@
-<h1>My First {{name}} app</h1>
+<h1>My First {{name}} app</h1>
+
+<pre>Response from server: /users</pre>
+<pre>{{ ( users | async)?.name }}</pre>
+<pre>{{ ( users | async)?.last }}</pre>

app/components/app.component.ts

@@ -1,11 +1,17 @@
-import {Component} from '@angular/core';
-import { ApplicationConstants } from '../constants/ApplicationConstants';
+import { Component } from '@angular/core';
+import { Http } from "@angular/http";
+import 'rxjs/add/operator/map';
 
 @Component({
     selector: 'my-app',
-    templateUrl: ApplicationConstants.BASE_TEMPLATE_PATH + 'components/app.component.html',
-    styleUrls: [ApplicationConstants.BASE_TEMPLATE_PATH + 'components/app.component.css']
+    templateUrl: 'components/app.component.html',
+    styleUrls: ['components/app.component.css']
 })
 export class AppComponent {
     name: string = "Angular 2 on Express";
+    users: {};
+
+    constructor(http: Http) {
+        this.users = http.get("/users").map(data => data.json());
+    }
 }

app/constants/ApplicationConstants.ts

@@ -1,5 +1,5 @@
 export class ApplicationConstants {
-
-    public static get BASE_TEMPLATE_PATH(): string { return 'ng2/'; }
-
+    public static get BASE_TEMPLATE_PATH(): string {
+        return 'ng2/';
+    }
 }

app/main.ts

@@ -1,4 +1,8 @@
-import {bootstrap}    from '@angular/platform-browser-dynamic';
-import {AppComponent} from './components/app.component'
+import { bootstrap }    from '@angular/platform-browser-dynamic';
+import { AppComponent } from './components/app.component'
+import { Type } from '@angular/core';
+import { HTTP_PROVIDERS } from "@angular/http";
 
-bootstrap(AppComponent);
+bootstrap(<Type>AppComponent, [
+    HTTP_PROVIDERS
+]);

bin/bundler.js

@@ -0,0 +1,16 @@
+var SystemBuilder = require('systemjs-builder');
+var argv = require('yargs').argv;
+var builder = new SystemBuilder();
+
+builder.loadConfig('./public/js/systemjs.config.js')
+    .then(function(){
+        var outputFile = argv.prod ? './public/js/bundle.min.js' : './public/js/bundle.js';
+        return builder.buildStatic('app', outputFile, {
+            minify: argv.prod,
+            mangle: argv.prod,
+            rollup: argv.prod
+        });
+    })
+    .then(function() {
+        console.log('bundle built successfully!');
+    });

package.json

@@ -4,38 +4,42 @@
   "private": true,
   "scripts": {
     "start": "concurrently \"tsc -w\" \"node ./bin/www\" ",
-    "postinstall": "typings install && tsc"
+    "postinstall": "typings install && tsc && npm run bundle:prod",
+    "tsc": "tsc",
+    "tsc:w": "tsc -w",
+    "typings": "typings install",
+    "bundle": "node bin/bundler.js",
+    "bundle:prod": "node bin/bundler.js --prod"
   },
   "dependencies": {
     "body-parser": "~1.13.2",
     "cookie-parser": "~1.3.5",
     "debug": "~2.2.0",
     "express": "~4.13.1",
-    "jade": "~1.11.0",
     "morgan": "~1.6.1",
     "serve-favicon": "~2.3.0",
     "stylus": "0.42.3",
-    "@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",
-    "@angular/router-deprecated":  "2.0.0-rc.1",
-    "@angular/upgrade":  "2.0.0-rc.1",
-
+    "@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",
+    "@angular/router-deprecated": "2.0.0-rc.1",
+    "@angular/upgrade": "2.0.0-rc.1",
     "systemjs": "0.19.27",
     "core-js": "^2.4.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "5.0.0-beta.6",
     "zone.js": "^0.6.6",
-
-    "angular2-in-memory-web-api": "0.0.9",
-    "typings": "^0.6.8",
-    "typescript": "^1.8.0"
+    "angular2-in-memory-web-api": "0.0.9"
   },
   "devDependencies": {
-    "concurrently": "^2.0.0"
+    "concurrently": "^2.0.0",
+    "systemjs-builder": "^0.15.17",
+    "typescript": "^1.8.10",
+    "typings": "^0.8.1",
+    "yargs": "^4.7.1"
   }
 }

public/css/style.css

@@ -0,0 +1,10 @@
+@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);
+
+body {
+  padding: 50px;
+  font-family: 'Source Code Pro', serif;
+}
+
+a {
+  color: #00B7FF;
+}

public/index.html

@@ -3,16 +3,19 @@
     <title>Angular 2 QuickStart</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="stylesheets/style.css">
+    <link rel="stylesheet" href="css/style.css">
 
     <!-- Polyfill(s) for older browsers -->
     <script src="core-js/client/shim.min.js"></script>
 
     <script src="zone.js/dist/zone.js"></script>
     <script src="reflect-metadata/Reflect.js"></script>
     <script src="systemjs/dist/system.src.js"></script>
+    <!--
 
-    <script src="javascripts/systemjs.config.js"></script>
+    Development mod
+
+    <script src="js/systemjs.config.js"></script>
     <script>
       System.config({
         defaultJSExtensions: true,
@@ -23,13 +26,17 @@
           }
         }
       });
-      System.import('ng2/main')
+      System.import('main')
             .then(null, console.error.bind(console));
     </script>
+    -->
   </head>
 
   <!-- 3. Display the application -->
   <body>
     <my-app>Loading...</my-app>
+
+    <!-- Production mod -->
+    <script src="js/bundle.min.js"></script>
   </body>
 </html>

public/javascripts/systemjs.config.js → public/js/systemjs.config.js

@@ -1,24 +1,24 @@
+var isPublic = typeof window != "undefined";
+
 /**
- * System configuration for Angular 2 apps
+ * System configuration for Angular 2 samples
  * Adjust as necessary for your application needs.
  */
 (function(global) {
 
   // map tells the System loader where to look for things
   var map = {
     'app':                        'app', // 'dist',
-    '@angular':                   '@angular',
-    'angular2-in-memory-web-api': 'angular2-in-memory-web-api',
-    'rxjs':                       'rxjs'
+    '@angular':                   (isPublic)? '@angular' : 'node_modules/@angular',
+    'angular2-in-memory-web-api': (isPublic)? 'angular2-in-memory-web-api' : 'node_modules/angular2-in-memory-web-api',
+    'rxjs':                       (isPublic)? 'rxjs' : 'node_modules/rxjs'
   };
-
   // packages tells the System loader how to load when no filename and/or no extension
   var packages = {
     'app':                        { main: 'main.js',  defaultExtension: 'js' },
     'rxjs':                       { defaultExtension: 'js' },
-    'angular2-in-memory-web-api': { defaultExtension: 'js' },
+    'angular2-in-memory-web-api': { defaultExtension: 'js' }
   };
-
   var ngPackageNames = [
     'common',
     'compiler',
@@ -30,22 +30,13 @@
     'router-deprecated',
     'upgrade'
   ];
-
   // Add package entries for angular packages
   ngPackageNames.forEach(function(pkgName) {
-
-    // Bundled (~40 requests):
     packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
-
-    // Individual files (~300 requests):
-    //packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
   });
-
   var config = {
     map: map,
     packages: packages
   };
-
   System.config(config);
-
-})(this);
+})(this);

readme.md

@@ -1,6 +1,7 @@
-## Angular2 Express slim starter ( Heroku ready )
+## Angular2 Express slim starter
+### Heroku ready wih SystemJS builder
 
-- Angular 2 beta.9 ( https://angular.io/docs/ts/latest/quickstart.html )
+- Angular 2 rx.1 ( https://angular.io/docs/ts/latest/quickstart.html )
 - Express ( from generator )
 
 ## Install

routes/users.js

@@ -4,8 +4,8 @@ var router = express.Router();
 /* GET users listing. */
 router.get('/', function(req, res, next) {
   res.json({
-    name: "Name",
-    last: "Last name"  
+    name: "John",
+    last: "Smith"
   });
 });
 

tsconfig.json

@@ -1,17 +1,12 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "module": "system",
-    "rootDir": "app",
-    "outDir": "app",
+    "module": "commonjs",
     "moduleResolution": "node",
-    "sourceMap": false,
-    "inlineSources": true,
-    "inlineSourceMap": true,
+    "sourceMap": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": false,
-    "outDir": "public/ng2",
     "noImplicitAny": false
   },
   "exclude": [

typings.json

@@ -1,6 +1,7 @@
 {
   "ambientDependencies": {
-    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#4de74cb527395c13ba20b438c3a7a419ad931f1c",
-    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#d594ef506d1efe2fea15f8f39099d19b39436b71"
+    "core-js": "registry:dt/core-js#0.0.0+20160317120654",
+    "jasmine": "registry:dt/jasmine#2.2.0+20160412134438",
+    "node": "registry:dt/node#4.0.0+20160509154515"
   }
-}	
+}