feat(@angular/cli): add ability to build bundle for node

Author: FrozenPandaz

packages/@angular/cli/lib/config/schema.json

@@ -83,6 +83,11 @@
             "type": "string",
             "description": "Base url for the application being built."
           },
+          "platform": {
+            "type": "string",
+            "default": "browser",
+            "description": "The runtime platform of the app."
+          },
           "index": {
             "type": "string",
             "default": "index.html",

packages/@angular/cli/models/webpack-config.ts

@@ -7,6 +7,7 @@ import {
   getDevConfig,
   getProdConfig,
   getStylesConfig,
+  getServerConfig,
   getNonAotConfig,
   getAotConfig
 } from './webpack-configs';
@@ -37,9 +38,12 @@ export class NgCliWebpackConfig {
   }
 
   public buildConfig() {
+    const platformConfig = this.wco.appConfig.platform === 'server' ?
+      getServerConfig(this.wco) : getBrowserConfig(this.wco);
+
     let webpackConfigs = [
       getCommonConfig(this.wco),
-      getBrowserConfig(this.wco),
+      platformConfig,
       getStylesConfig(this.wco),
       this.getTargetConfig(this.wco)
     ];

packages/@angular/cli/models/webpack-configs/index.ts

@@ -2,6 +2,7 @@ export * from './browser';
 export * from './common';
 export * from './development';
 export * from './production';
+export * from './server';
 export * from './styles';
 export * from './test';
 export * from './typescript';

packages/@angular/cli/models/webpack-configs/server.ts

@@ -0,0 +1,38 @@
+import { WebpackConfigOptions } from '../webpack-config';
+
+/**
+ * Returns a partial specific to creating a bundle for node
+ * @param _wco Options which are include the build options and app config
+ */
+export const getServerConfig = function (_wco: WebpackConfigOptions) {
+  return {
+    target: 'node',
+    output: {
+      libraryTarget: 'commonjs'
+    },
+    externals: [
+      /^@angular/,
+      function (_: any, request: any, callback: (error?: any, result?: any) => void) {
+        // Absolute & Relative paths are not externals
+        if (request.match(/^\.{0,2}\//)) {
+          return callback();
+        }
+
+        try {
+          // Attempt to resolve the module via Node
+          const e = require.resolve(request);
+          if (/node_modules/.test(e)) {
+            // It's a node_module
+            callback(null, request);
+          } else {
+            // It's a system thing (.ie util, fs...)
+            callback();
+          }
+        } catch (e) {
+          // Node couldn't find it, so it must be user-aliased
+          callback();
+        }
+      }
+    ]
+  };
+};

tests/e2e/tests/build/platform-server.ts

@@ -0,0 +1,66 @@
+import { normalize } from 'path';
+
+import { updateJsonFile, updateTsConfig } from '../../utils/project';
+import { expectFileToMatch, writeFile, replaceInFile, prependToFile } from '../../utils/fs';
+import { ng, exec } from '../../utils/process';
+import { getGlobalVariable } from '../../utils/env';
+
+export default function () {
+  // Skip this in Appveyor tests.
+  if (getGlobalVariable('argv').appveyor) {
+    return Promise.resolve();
+  }
+
+  return Promise.resolve()
+    .then(() => updateJsonFile('.angular-cli.json', configJson => {
+      const app = configJson['apps'][0];
+      delete app['polyfills'];
+      delete app['styles'];
+      app['platform'] = 'server';
+    }))
+    .then(() => updateJsonFile('package.json', packageJson => {
+      const dependencies = packageJson['dependencies'];
+      dependencies['@angular/platform-server'] = '^4.0.0';
+    }))
+    .then(() => updateTsConfig(tsConfig => {
+      tsConfig['angularCompilerOptions'] = {
+        entryModule: 'app/app.module#AppModule'
+      };
+    }))
+    .then(() => writeFile('./src/main.ts', 'export { AppModule } from \'./app/app.module\';'))
+    .then(() => prependToFile('./src/app/app.module.ts',
+      'import { ServerModule } from \'@angular/platform-server\';'))
+    .then(() => replaceInFile('./src/app/app.module.ts', /\[\s*BrowserModule/g,
+      `[BrowserModule.withServerTransition(\{ appId: 'app' \}), ServerModule`))
+    .then(() => exec(normalize('npm'), 'install', '--silent', '--no-progress'))
+    .then(() => ng('build'))
+    // files were created successfully
+    .then(() => expectFileToMatch('dist/main.bundle.js',
+      /__webpack_exports__, "AppModule"/))
+    .then(() => writeFile('./index.js', `
+      require('zone.js/dist/zone-node');
+      require('reflect-metadata');
+      const fs = require('fs');
+      const \{ AppModule \} = require('./dist/main.bundle');
+      const \{ renderModule \} = require('@angular/platform-server');
+
+      renderModule(AppModule, \{
+        url: '/',
+        document: '<app-root></app-root>'
+      \}).then(html => \{
+        fs.writeFileSync('dist/index.html', html);
+      \});
+    `))
+    .then(() => exec(normalize('node'), 'index.js'))
+    .then(() => expectFileToMatch('dist/index.html',
+      new RegExp('<h2 _ngcontent-c0="">Here are some links to help you start: </h2>')))
+    .then(() => ng('build', '--aot'))
+    // files were created successfully
+    .then(() => expectFileToMatch('dist/main.bundle.js',
+      /__webpack_exports__, "AppModuleNgFactory"/))
+    .then(() => replaceInFile('./index.js', /AppModule/g, 'AppModuleNgFactory'))
+    .then(() => replaceInFile('./index.js', /renderModule/g, 'renderModuleFactory'))
+    .then(() => exec(normalize('node'), 'index.js'))
+    .then(() => expectFileToMatch('dist/index.html',
+      new RegExp('<h2 _ngcontent-c0="">Here are some links to help you start: </h2>')));
+}