Http precache

.gitignore

@@ -52,3 +52,7 @@ test/coverage
 /modules/angular2-grunt-prerender/tasks
 /modules/grunt-prerender/tasks
 
+
+/examples/dist
+
+examples/typings

examples/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "examples",
+  "version": "0.0.0",
+  "description": "Universal (isomorphic) javascript support for Angular2",
+  "main": "index.js",
+  "scripts": {
+    "prebuild": "rm -rf dist",
+    "remove-modules": "rm -rf dist node_modules/angular2-universal node_modules/preboot node_modules/angular2-universal-preview node_modules/angular2-express-engine",
+    "reload": "npm run remove-modules && npm install",
+    "build": "tsc || true",
+    "start": "npm run build && node dist/index.js",
+    "debug": "npm run build && node-debug dist/index.js",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "preinstall": "typings install"
+  },
+  "author": "PatrickJS",
+  "license": "MIT",
+  "devDependencies": {
+    "connect-history-api-fallback": "^1.1.0",
+    "express": "^4.13.4",
+    "falcor": "^0.1.16",
+    "falcor-express": "^0.1.2",
+    "falcor-router": "^0.3.0",
+    "gulp-insert": "^0.5.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-uglify": "^1.5.3",
+    "morgan": "^1.7.0",
+    "ts-node": "^0.6.1",
+    "vinyl-buffer": "^1.0.0",
+    "vinyl-source-stream": "^1.1.0",
+    "preboot": "file:../modules/preboot",
+    "angular2-express-engine": "file:../modules/express-engine",
+    "angular2-universal-preview": "file:../modules/universal"
+  },
+  "dependencies": {
+    "angular2": "2.0.0-beta.9",
+    "css": "2.2.1",
+    "es6-shim": "^0.33.3",
+    "express": "^4.13.3",
+    "parse5": "^1.5.0",
+    "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.2",
+    "xhr2": "^0.1.3",
+    "zone.js": "0.5.15",
+    "systemjs": "^0.19.18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/universal"
+  }
+}

examples/src/index.ts

@@ -0,0 +1,82 @@
+var SERVER_IP = '127.0.0.1';
+
+import 'angular2-universal-preview/polyfills';
+
+var port = process.env.PORT || 3000;
+
+// Module dependencies
+import http = require('http');
+import path = require('path');
+
+
+// Start server
+var framework = process.argv[2] || 'express';
+var server = null;
+var example = '';
+var ROOT = path.join(__dirname, '..');
+
+if (framework === 'hapi') {
+  // hapi
+
+  example = `./server/hapi/server`;
+  server = require(example)(ROOT, {
+    port,
+    address: SERVER_IP
+  });
+  module.exports.Server = server
+    .start(() => {
+      console.log(`Listening on port: ${port}`);
+      // for smoke testing
+      // smokeTest();
+    });
+
+} else {
+  // express or other express compliant frameworks
+
+  example = `./server/${framework}/server`;
+  try {
+    server = require(example)(ROOT);
+  } catch (e) {
+    console.trace(e);
+    process.exit(1);
+  }
+
+  module.exports.Server = http
+    .createServer(server)
+    .listen(port, SERVER_IP, function() {
+      console.log(`Listening on port: ${port}`);
+      // for smoke testing
+      // smokeTest();
+    });
+
+}
+console.log(`Using framework: "${framework}"`);
+
+
+function smokeTest() {
+  var req = http.get({
+    host: 'localhost',
+    port: 3000,
+    path: '/?server=true&client=false&preboot=false&bootstrap=false',
+  }, function(res) {
+    // console.log('STATUS: ' + res.statusCode);
+    // console.log('HEADERS: ' + JSON.stringify(res.headers, null, 2));
+
+    // Buffer the body entirely for processing as a whole.
+    var bodyChunks = [];
+    res.
+    on('data', function(chunk) {
+      // You can process streamed parts here...
+      bodyChunks.push(chunk);
+    }).
+    on('end', function() {
+      var body = Buffer.concat(bodyChunks);
+      // console.log('GOOD' /*, body.toString()*/ );
+      // ...and/or process the entire body here.
+    })
+  });
+
+  req.on('error', function(e) {
+    console.error('ERROR: ' + e.message);
+  });
+}

examples/app/server/express/routes.ts → examples/src/server/express/routes.ts

@@ -6,11 +6,9 @@ var {Router} = require('express');
 module.exports = function(ROOT) {
   var router = Router();
 
-  var universalPath = `${ROOT}/dist/examples/app/universal`;
-
-  var appPage = require(`${universalPath}/test_page/app`);
-  var todoApp = require(`${universalPath}/todo/app`);
-  var routerApp = require(`${universalPath}/test_router/app`);
+  var appPage = require('../../universal/test_page/app');
+  var todoApp = require('../../universal/todo/app');
+  var routerApp = require('../../universal/test_router/app');
 
   var {enableProdMode, provide} = require('angular2/core');
   var {ROUTER_PROVIDERS, APP_BASE_HREF} = require('angular2/router');
@@ -20,8 +18,10 @@ module.exports = function(ROOT) {
   var {
     NODE_HTTP_PROVIDERS,
     NODE_LOCATION_PROVIDERS,
+    NODE_PRELOAD_CACHE_HTTP_PROVIDERS,
     REQUEST_URL,
     PRIME_CACHE,
+    BASE_URL,
     queryParamsToBoolean
   } = require('angular2-universal-preview');
   // require('angular2-universal')
@@ -33,17 +33,24 @@ module.exports = function(ROOT) {
       let options = Object.assign(queryParams, {
         // client url for systemjs
         buildClientScripts: true,
-        componentUrl: 'examples/app/universal/test_page/browser',
+        componentUrl: 'examples/src/universal/test_page/browser',
 
         directives: [appPage.App, appPage.MyApp],
         providers: [
+          NODE_LOCATION_PROVIDERS,
+          provide(REQUEST_URL, {useValue: req.originalUrl}),
+          provide(APP_BASE_HREF, {useValue: '/'}),
+
+          provide(BASE_URL, {useExisting: req.originalUrl}),
+          provide(PRIME_CACHE, {useExisting: true}),
+
           // NODE_HTTP_PROVIDERS,
-          // NODE_LOCATION_PROVIDERS,
-          // provide(BASE_URL, {useExisting: req.originalUrl}),
-          // provide(PRIME_CACHE, {useExisting: true})
+          NODE_PRELOAD_CACHE_HTTP_PROVIDERS,
         ],
         data: {},
 
+        precache: true,
+
         preboot: queryParams.preboot === false ? null : {
           start:    true,
           freeze:   'spinner',     // show spinner w button click & freeze page
@@ -56,7 +63,7 @@ module.exports = function(ROOT) {
 
       });
 
-      res.render('app/universal/test_page/index', options);
+      res.render('src/universal/test_page/index', options);
 
     });
 
@@ -67,7 +74,7 @@ module.exports = function(ROOT) {
       let options = Object.assign(queryParams , {
         // client url for systemjs
         buildClientScripts: true,
-        componentUrl: 'examples/app/universal/todo/browser',
+        componentUrl: 'examples/src/universal/todo/browser',
 
         directives: [todoApp.TodoApp],
         providers: [
@@ -78,11 +85,11 @@ module.exports = function(ROOT) {
         ],
         data: {},
 
-        preboot: queryParams.preboot === false ? null : true
+        preboot: queryParams.preboot === false ? null : {debug: true, uglify: false}
 
       });
 
-      res.render('app/universal/todo/index', options);
+      res.render('src/universal/todo/index', options);
 
     });
 
@@ -93,7 +100,7 @@ module.exports = function(ROOT) {
       let options = Object.assign(queryParams , {
         // client url for systemjs
         buildClientScripts: true,
-        componentUrl: 'examples/app/universal/falcor_todo/client',
+        componentUrl: 'examples/src/universal/falcor_todo/client',
 
         directives: [todoApp.TodoApp],
         providers: [
@@ -104,11 +111,11 @@ module.exports = function(ROOT) {
         ],
         data: {},
 
-        preboot: queryParams.preboot === false ? null : true
+        preboot: queryParams.preboot === false ? null : {debug: true, uglify: false}
 
       });
 
-      res.render('app/universal/falcor_todo/index', options);
+      res.render('src/universal/falcor_todo/index', options);
 
     });
 
@@ -120,7 +127,7 @@ module.exports = function(ROOT) {
     let options = Object.assign(queryParams , {
       // client url for systemjs
       buildClientScripts: true,
-      componentUrl: 'examples/app/universal/test_router/browser',
+      componentUrl: 'examples/src/universal/test_router/browser',
       // ensure that we test only server routes
       client: false,
 
@@ -134,11 +141,11 @@ module.exports = function(ROOT) {
       ],
       data: {},
 
-      preboot: queryParams.preboot === false ? null : true
+      preboot: queryParams.preboot === false ? null : {debug: true, uglify: false}
 
     });
 
-    res.render('app/universal/test_router/index', options);
+    res.render('src/universal/test_router/index', options);
 
   }
 
@@ -154,7 +161,7 @@ module.exports = function(ROOT) {
   router.use('/angular2', serveStatic(`${ROOT}/node_modules/angular2`));
   router.use('/rxjs', serveStatic(`${ROOT}/node_modules/rxjs`));
   router.use('/node_modules',  serveStatic(`${ROOT}/node_modules`));
-  router.use('/examples/app',  serveStatic(`${ROOT}/dist/examples/app`));
+  router.use('/examples/src',  serveStatic(`${ROOT}/dist`));
 
   router.use(historyApiFallback({
     // verbose: true

examples/app/server/express/server.ts → examples/src/server/express/server.ts

@@ -8,16 +8,16 @@ module.exports = function(ROOT) {
   var {expressEngine} = require('angular2-universal-preview');
   // rendering engine
   app.engine('ng2.html', expressEngine);
-  app.set('views', path.join(ROOT, 'examples'));
+  app.set('views', path.join(ROOT));
   app.set('view engine', 'ng2.html');
   app.set('view options', { doctype: 'html' });
 
   var routes = require('./routes');
   var api = require('./api');
   var graphApi = require('./graph_api');
 
-  app.use(serveStatic(`${ROOT}/dist`));
-  app.use(serveStatic(`${ROOT}/examples/app/public`));
+  app.use(serveStatic(path.join(ROOT, 'dist')));
+  app.use(serveStatic(path.join(ROOT, 'public')));
 
   app.use('/api', api(ROOT));
   app.use('/graph_api', api(ROOT));

examples/app/universal/test_page/app.ts → examples/src/universal/test_page/app.ts

@@ -1,4 +1,7 @@
 import {Component} from 'angular2/core';
+import {Http} from 'angular2/http';
+
+const URL = 'http://127.0.0.1:3000';
 
 
 function transformData(data) {
@@ -95,7 +98,7 @@ export class MyApp {
 })
 export class App {
   static queries = {
-    todos: '/api/todos'
+    todos: URL + '/api/todos'
   };
 
   value: string        = 'value8';
@@ -109,22 +112,22 @@ export class App {
   //   .filter(res => res.status >= 200 && res.status < 300)
   //   .map(res => res.json())
   //   .map(data => transformData(data)); // ensure correct data prop types
-  // todosObs2$ = this.http.get(App.queries.todos)
-  //   .filter(res => res.status >= 200 && res.status < 300)
-  //   .map(res => res.json())
-  //   .map(data => transformData(data)); // ensure correct data prop types
+  todosObs2$ = this.http.get(App.queries.todos)
+    .filter(res => res.status >= 200 && res.status < 300)
+    .map(res => res.json())
+    .map(data => transformData(data)); // ensure correct data prop types
   // todosObs3$ = this.http.get(App.queries.todos)
   //   .map(res => res.json())
   //   .map(data => transformData(data));
 
-  constructor(/*private http: Http*/) {
+  constructor(private http: Http) {
 
   }
 
   ngOnInit() {
-    this.addItem();
-    this.addItem();
-    this.addItem();
+    // this.addItem();
+    // this.addItem();
+    // this.addItem();
 
     // this.todosObs1$.subscribe(
     //   // onValue
@@ -142,22 +145,22 @@ export class App {
     //     console.log('complete request1');
     //   });
 
-    // this.todosObs2$.subscribe(
-    //   // onValue
-    //   todos => {
-    //     console.log('another call 2', todos);
-    //     todos.map(todo => this.addItem(todo));
-    //     // this.anotherAjaxCall();
-    //   },
-    //   // onError
-    //   err => {
-    //     console.error('err', err);
-    //     throw err;
-    //   },
-    //   // onComplete
-    //   () => {
-    //     console.log('complete request2');
-    //   });
+    this.todosObs2$.subscribe(
+      // onValue
+      todos => {
+        console.log('another call 2', todos);
+        todos.map(todo => this.addItem(todo));
+        this.anotherAjaxCall();
+      },
+      // onError
+      err => {
+        console.error('err', err);
+        throw err;
+      },
+      // onComplete
+      () => {
+        console.log('complete request2');
+      });
 
   }
   anotherAjaxCall() {