Global refactoring. Added support for serveral angular2 applications.

constants.js

@@ -1,32 +1,34 @@
 const fs = require('fs');
 const path = require('path');
 
-exports.ROOT_DIR    = path.resolve(__dirname);
-exports.SRC_DIR     = path.resolve(exports.ROOT_DIR, 'src');
-exports.DIST_DIR    = path.resolve(exports.ROOT_DIR, 'dist');
-exports.PUBLIC_DIR  = path.resolve(exports.DIST_DIR, 'public');
-exports.PRIVATE_DIR = path.resolve(exports.DIST_DIR, 'private');
-exports.SERVER_DIR  = path.resolve(exports.SRC_DIR,  'server');
+exports.ROOT_DIR       = path.resolve(__dirname);
+exports.SRC_DIR        = path.resolve(exports.ROOT_DIR, 'src');
+exports.DIST_DIR       = path.resolve(exports.ROOT_DIR, 'dist');
+exports.PUBLIC_DIR     = path.resolve(exports.DIST_DIR, 'public');
+exports.PRIVATE_DIR    = path.resolve(exports.DIST_DIR, 'private');
+exports.MANIFESTS_DIR  = path.resolve(exports.DIST_DIR, 'manifests');
+exports.SERVER_DIR     = path.resolve(exports.SRC_DIR,  'server');
 
 exports.HOST = process.env.HOST || 'localhost';
 exports.PORT = +process.env.PORT || 3000;
 
-exports.HAS_SS = 'NG2_SS' in process.env ? process.env.NG2_SS === 'true' : true;
-exports.HAS_WW = 'NG2_WW' in process.env ? process.env.NG2_WW === 'true' : true;
+exports.SS = 'NG2_SS' in process.env ? process.env.NG2_SS === 'true' : true;
+exports.WW = 'NG2_WW' in process.env ? process.env.NG2_WW === 'true' : true;
 
-exports.VENDOR_NAME     = 'vendor';
-exports.SERVER_NAME     = 'server';
-exports.BROWSER_NAME    = 'browser';
-exports.WORKER_NAME     = 'worker';
-exports.WORKER_APP_NAME = 'worker_app';
+exports.APPS = [
+  { name: 'admin', path: path.resolve(exports.SRC_DIR, 'admin/index.js'), urlPrefix: '/admin' },
+  { name: 'main',  path: path.resolve(exports.SRC_DIR, 'main/index.js'),  urlPrefix: '/' }
+];
 
-exports.SERVER_SOURCE_PATH     = path.resolve(exports.SRC_DIR, 'server/app.ts');
-exports.BROWSER_SOURCE_PATH    = path.resolve(exports.SRC_DIR, 'boot_browser.ts');
-exports.WORKER_SOURCE_PATH     = path.resolve(exports.SRC_DIR, 'boot_worker.ts');
-exports.WORKER_APP_SOURCE_PATH = path.resolve(exports.SRC_DIR, 'boot_worker_app.ts');
+exports.APPS_SERVER_BUNDLE_NAME     = 'server';
+exports.APPS_BROWSER_BUNDLE_NAME    = 'browser';
+exports.APPS_WORKER_UI_BUNDLE_NAME  = 'worker_ui';
+exports.APPS_WORKER_APP_BUNDLE_NAME = 'worker_app';
 
-exports.VENDOR_DLL_MANIFEST_FILE = 'vendor-manifest.json';
-exports.VENDOR_DLL_MANIFEST_PATH = path.resolve(exports.PUBLIC_DIR, exports.VENDOR_DLL_MANIFEST_FILE);
+exports.VENDOR_BUNDLE_NAME = 'vendor';
+
+exports.MASTER_APP_BUNDLE_NAME = 'app';
+exports.MASTER_APP_SOURCE_PATH = path.resolve(exports.SRC_DIR, 'app.ts');
 
 exports.PREBOOT = { 
   appRoot: 'app', 

package.json

@@ -15,6 +15,7 @@
     "prod": "node tools/prod.js",
     "prebuild": "npm run clean:dist",
     "build": "node tools/build.js",
+    "prebuild:watch": "npm run clean:dist",
     "build:watch": "node tools/build.js --watch",
     "lint": "node tools/lint.js",
     "lint:watch": "node tools/lint.js --watch",
@@ -47,6 +48,7 @@
   "dependencies": {
     "angular2": "2.0.0-beta.3",
     "angular2-universal-preview": "0.50.0",
+    "basic-auth-connect": "^1.0.0",
     "css": "^2.2.1",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",

src/.utils/run_browser.ts

@@ -0,0 +1,15 @@
+import { Router } from 'angular2/router';
+
+document.addEventListener('DOMContentLoaded', function onDOMContentLoaded() {
+  const providers = [];
+
+  window[__APPS_BROWSER_BUNDLE_NAME__].main(providers).then(function(compRef) {
+    const injector = compRef.injector;
+    const router: Router = injector.getOptional(Router);
+
+    return Promise.resolve()
+      .then(() => router && (<any> router)._currentNavigation)
+      .then(() => new Promise(function(resolve) { setTimeout(resolve) }))
+      .then(() => document.dispatchEvent(new Event('BootstrapComplete')))
+  });
+});

src/.utils/run_worker_app.ts

@@ -0,0 +1,17 @@
+import { Router } from 'angular2/router';
+
+const global = new Function('return this')();
+
+setTimeout(function() {
+  const providers = [];
+
+  global[__APPS_WORKER_APP_BUNDLE_NAME__].main(providers).then(function(compRef) {
+    const injector = compRef.injector;
+    const router: Router = injector.getOptional(Router);
+
+    return Promise.resolve()
+      .then(() => router && (<any> router)._currentNavigation)
+      .then(() => new Promise(function(resolve) { setTimeout(resolve) }))
+      .then(() => postMessage('APP_READY', undefined))
+  });
+}, 100);

src/.utils/run_worker_ui.ts

@@ -0,0 +1,20 @@
+import { Provider } from 'angular2/core';
+import { WebWorkerInstance, WORKER_SCRIPT } from 'angular2/platform/worker_render';
+
+document.addEventListener('DOMContentLoaded', function onDOMContentLoaded() {
+  const providers = [
+    new Provider(WORKER_SCRIPT, { useValue: window['__WORKER_SCRIPT_URL'] })
+  ];
+
+  const appRef = window[__APPS_WORKER_UI_BUNDLE_NAME__].main(providers);
+  const worker = appRef.injector.get(WebWorkerInstance).worker;
+
+  worker.addEventListener('message', function onAppReady(event) {
+    if (event.data === 'APP_READY') {
+      worker.removeEventListener('message', onAppReady, false);
+      URL.revokeObjectURL(window['__WORKER_SCRIPT_URL']);
+      delete window['__WORKER_SCRIPT_URL'];
+      setTimeout(function() { document.dispatchEvent(new Event('BootstrapComplete')) });
+    }
+  }, false);
+});

src/.utils/serve.ts

@@ -0,0 +1,154 @@
+import { Request, Response } from 'express';
+import { resolve as resolvePath, relative as relativePath } from 'path';
+import { platform, Provider, ComponentRef, ExceptionHandler } from 'angular2/core';
+import { DOM } from 'angular2/src/platform/dom/dom_adapter';
+import { DOCUMENT } from 'angular2/platform/common_dom';
+import { ROUTER_PROVIDERS, APP_BASE_HREF, Router } from 'angular2/router';
+import { REQUEST_URL } from 'angular2-universal-preview';
+
+const {
+  createPrebootHTML,
+  getBrowserCode,
+  prebootConfigDefault
+} = require('angular2-universal-preview');
+
+const {
+  parseDocument,
+  serializeDocument
+} = require('angular2-universal-preview/dist/server/src/platform/document');
+
+const req = __non_webpack_require__;
+
+const VENDOR_PATH = req.resolve(__PUBLIC_DIR__ + '/' + __VENDOR_BUNDLE_NAME__);
+const VENDOR_URL = '/' + relativePath(__PUBLIC_DIR__, VENDOR_PATH);
+
+const WORKER_APP_LOADER_ORIGIN = 'window.location.origin';
+const WORKER_APP_READY_MESSAGE = 'APP_READY';
+
+function createBrowserScripts(browserUrl) {
+  return `
+    <script type="text/javascript" src="${VENDOR_URL}"></script>
+    <script type="text/javascript" src="${browserUrl}"></script>
+  `;
+}
+
+function createWorkerScripts(workerUrl, workerAppUrl) {
+  return `
+    <script type="text/javascript" src="${VENDOR_URL}"></script>
+    <script type="text/javascript" src="${workerUrl}"></script>
+    <script>
+      window.__WORKER_SCRIPT_URL = URL.createObjectURL(new Blob([
+        "${createWorkerAppScripts(workerAppUrl).replace(/\n/g, '\\n\\\n')}"
+      ], {
+        type: 'text/javascript'
+      }));
+    </script>
+  `
+}
+
+function createWorkerAppScripts(workerAppUrl) {
+  return `
+    var importScripts_ = this.importScripts;
+
+    this.importScripts = function importScripts() {
+      for (var i = 0, scripts = new Array(arguments.length); i < scripts.length; ++i) {
+        var script = arguments[i];
+        var origin = '" + ${WORKER_APP_LOADER_ORIGIN} + "';
+
+        if (script.indexOf('http:') !== 0 || script.indexOf('https:') !== 0) {
+          script =  origin + (script[0] === '/' ? script : '/' + script);
+        }
+
+        scripts[i] = script;
+      }
+
+      return importScripts_.apply(this, scripts);
+    };
+
+    importScripts('${VENDOR_URL}', '${workerAppUrl}');
+  `;
+}
+
+export function serveUniversal(name, indexHtml, options: any = {}) {
+  let server, browserScripts = '', workerScripts = '', prebootHtml = '', prebootPromise = Promise.resolve();
+
+  if (options.server) {
+    const serverPath = typeof options.server === 'string'
+      ? options.server
+      : resolvePath(__PRIVATE_DIR__, name + '-' + __APPS_SERVER_BUNDLE_NAME__ + '.js');
+
+    server = req(serverPath);
+  }
+
+  if (options.browser) {
+    const browserPath = typeof options.browser === 'string'
+      ? options.browser
+      : resolvePath(__PUBLIC_DIR__,  name + '-' + __APPS_BROWSER_BUNDLE_NAME__ + '.js');
+
+    const browserUrl = '/' + relativePath(__PUBLIC_DIR__, browserPath);
+
+    browserScripts = createBrowserScripts(browserUrl);
+  }
+
+  if (options.worker) {
+    const workerPaths = Array.isArray(options.worker)
+      ? options.worker
+      : [
+        resolvePath(__PUBLIC_DIR__,  name + '-' + __APPS_WORKER_UI_BUNDLE_NAME__ + '.js'),
+        resolvePath(__PUBLIC_DIR__,  name + '-' + __APPS_WORKER_APP_BUNDLE_NAME__+ '.js')
+      ];
+
+    const workerUrl    = '/' + relativePath(__PUBLIC_DIR__, workerPaths[0]);
+    const workerAppUrl = '/' + relativePath(__PUBLIC_DIR__, workerPaths[1]);
+
+    workerScripts  = createWorkerScripts(workerUrl, workerAppUrl);
+  }
+
+  const prebootOptions =  options.preboot !== false 
+    ? prebootConfigDefault(Object.assign({}, __PREBOOT__, options.preboot))
+    : false;
+
+  return (req: Request, res: Response, next: Function) => prebootPromise.then(() => Promise.resolve(indexHtml))
+    .then((html) => {
+      if (__SS__ && server) {
+        const REQUEST_PROVIDERS = [
+          new Provider(ExceptionHandler, { useFactory: () => new ExceptionHandler(DOM, true) }),
+          new Provider(DOCUMENT, { useValue: parseDocument(html) }),    
+          new Provider(REQUEST_URL, { useValue: req.originalUrl }),
+        ];
+
+        return server.main(REQUEST_PROVIDERS, req).then(function(compRef) {
+          const injector = compRef.injector;
+          const router: Router = injector.getOptional(Router);
+
+          return Promise.resolve()
+            .then(() => router && (<any> router)._currentNavigation)
+            .then(() => new Promise(function(resolve) { setTimeout(resolve) }))
+            .then(() => serializeDocument(compRef.injector.get(DOCUMENT)))
+        });
+      }
+      return html;
+    })
+    .then((html) => {
+      if (prebootOptions && (workerScripts || browserScripts)) {
+        return getBrowserCode(prebootOptions).then((code) => {
+          const prebootHtml = createPrebootHTML(code, prebootOptions);
+
+          return html.replace('</body>', prebootHtml + '</body>')
+        });
+      }
+      return html;
+    })
+    .then((html) => {
+      let scripts = '';
+
+      if (__WW__ && workerScripts) {
+        scripts = workerScripts;
+      } else if (browserScripts) {
+        scripts = browserScripts;
+      }
+
+      return res.status(200).send(scripts ? html.replace('</body>', scripts + '</body>') : html);
+    })
+    .catch(err => next(err))
+}

src/admin/app.ts

@@ -0,0 +1,7 @@
+import { Component } from 'angular2/core';
+
+@Component({
+  selector: 'app',
+  template: '<h1>Admin application</h1>'
+})
+export class App {}

src/admin/boot_browser.ts

@@ -0,0 +1,12 @@
+import { Provider } from 'angular2/core';
+import { bootstrap } from 'angular2/platform/browser';
+import { ROUTER_PROVIDERS, APP_BASE_HREF } from 'angular2/router';
+import { App } from './app';
+
+export function main(BOOT_PROVIDERS) {
+  return bootstrap(App, [
+    BOOT_PROVIDERS,
+    ROUTER_PROVIDERS,
+    new Provider(APP_BASE_HREF, { useValue: '/' })
+  ]);
+};

src/server/ng.html → src/admin/index.html

@@ -6,6 +6,5 @@
   </head>
   <body>
     <app>Loading...</app>
-    <style>.preboot-spinner { margin: auto; top: 0; right: 0; bottom: 0; left: 0 }</style>
   </body>
 </html>

src/admin/index.js

@@ -0,0 +1,24 @@
+const fs = require('fs');
+const path = require('path');
+const express = require('express');
+const basicAuth = require('basic-auth-connect');
+const Router  = express.Router;
+
+exports.createRouter = function($) {
+  const router    = Router();
+  const indexHtml = fs.readFileSync(path.resolve(__dirname, 'index.html'), { encoding: 'utf8' });
+
+  router.use(basicAuth('user', 'pass'));
+
+  router.get('/*', $.serveUniversal(indexHtml, {
+    browser: true,
+  }));
+
+  return router;
+}
+
+exports.createBuilds = function($) {
+  return [
+    $.createBrowserConfig('./boot_browser.ts'),
+  ];
+}

src/server/app.ts → src/app.ts

@@ -1,12 +1,21 @@
-import * as serveStatic from 'serve-static';
 import * as express from 'express';
+import * as serveStatic from 'serve-static';
 import { Request, Response } from 'express';
-import { router as ngRouter } from './ng';
+import { serveUniversal } from './.utils/serve';
 
 const app = express();
 
-app.use('/', serveStatic(PUBLIC_DIR));
-app.use('/', ngRouter);
+app.use('/', serveStatic(__PUBLIC_DIR__));
+
+__APPS__.forEach((options) => {
+  const appName = options.name;
+  const appPath = options.path;
+  const appUrlPrefix = options.urlPrefix || '/' + appName;
+
+  app.use(appUrlPrefix, __non_webpack_require__(appPath).createRouter({
+    serveUniversal: (indexHtml, options) => serveUniversal(appName, indexHtml, options)
+  }));
+});
 
 /**
  * 404 Not Found
@@ -22,7 +31,7 @@ app.use((req: Request, res: Response, next: Function) => {
  * Errors normalization
  */
 app.use((err: any, req: Request, res: Response, next: Function) => {
-  const status: number = err.status || 500;
+  const status: number = err.staus || 500;
 
   let stack: string = err.message;
   let message: string = err.stack;