[#20][greengerong] platform-server

.angular-cli.json

@@ -29,6 +29,31 @@
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }
+    },
+    {
+      "platform": "server",
+      "root": "src",
+      "outDir": "dist-server",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.server.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.server.json",
+      "testTsconfig": "tsconfig.spec.json",
+      "prefix": "app",
+      "styles": [
+        "styles/bootstrap.scss"
+      ],
+      "scripts": [
+      ],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
     }
   ],
   "e2e": {

package.json

@@ -27,7 +27,12 @@
     "commitmsg": "node ./build/commit-msg.js",
     "prepush": "npm test",
     "prettier-watch": "onchange '**/*.ts' -- prettier --write --single-quote --trailing-comma=all {{changed}}",
-    "prettier": "prettier --parser typescript --single-quote --trailing-comma=all --write \"./**/*.ts\""
+    "prettier": "prettier --parser typescript --single-quote --trailing-comma=all --write \"./**/*.ts\"",
+    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
+    "serve:ssr": "node dist-server/server.js",
+    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
+    "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
+    "ssr": "npm run build:ssr && npm run serve:ssr"
   },
   "lint-staged": {
     "*.{js,css,scss,ts}": [
@@ -44,7 +49,10 @@
     "@angular/forms": "^5.0.0",
     "@angular/platform-browser": "^5.0.0",
     "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/platform-server": "^5.0.1",
     "@angular/router": "^5.0.0",
+    "@nguniversal/express-engine": "^5.0.0-beta.5",
+    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
     "bootstrap-sass": "^3.3.7",
     "classlist.js": "^1.1.20150312",
     "core-js": "^2.5.1",
@@ -63,6 +71,7 @@
   "devDependencies": {
     "@angular/cli": "^1.5.0",
     "@angular/compiler-cli": "^5.0.0",
+    "@angular/http": "^5.0.1",
     "@compodoc/compodoc": "^1.0.0-beta.10",
     "@types/jasmine": "^2.5.54",
     "@types/jasminewd2": "^2.0.3",
@@ -91,6 +100,7 @@
     "protractor": "^5.1.2",
     "stubby": "^4.0.0",
     "sw-precache": "^5.2.0",
+    "ts-loader": "^3.1.1",
     "ts-node": "^3.3.0",
     "tslint": "~5.7.0",
     "tslint-config-prettier": "^1.6.0",

server.ts

@@ -0,0 +1,57 @@
+// These are important and needed before anything else
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+
+import { enableProdMode } from '@angular/core';
+
+import * as express from 'express';
+import { join } from 'path';
+
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
+
+// Express server
+const app = express();
+
+const PORT = process.env.PORT || 4000;
+const CLIENT_DIST_FOLDER = join(process.cwd(), 'dist');
+
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const {
+  AppServerModuleNgFactory,
+  LAZY_MODULE_MAP,
+} = require('./dist-server/main.bundle');
+
+// Express Engine
+import { ngExpressEngine } from '@nguniversal/express-engine';
+// Import module map for lazy loading
+import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
+
+app.engine(
+  'html',
+  ngExpressEngine({
+    bootstrap: AppServerModuleNgFactory,
+    providers: [provideModuleMap(LAZY_MODULE_MAP)],
+  }),
+);
+
+app.set('view engine', 'html');
+app.set('views', join(CLIENT_DIST_FOLDER, 'browser'));
+
+// TODO: implement data requests securely
+app.get('/api/*', (req, res) => {
+  res.status(404).send('data requests are not supported');
+});
+
+// Server static files from /browser
+app.get('*.*', express.static(CLIENT_DIST_FOLDER));
+
+// All regular routes use the Universal engine
+app.get('*', (req, res) => {
+  res.render(join(CLIENT_DIST_FOLDER, 'index.html'), { req });
+});
+
+// Start up the Node server
+app.listen(PORT, () => {
+  console.log(`Node server listening on http://localhost:${PORT}`);
+});

src/app/app.module.ts

@@ -12,6 +12,7 @@ import { SharedModule } from './shared/shared.module';
   declarations: [AppComponent],
   imports: [
     BrowserModule,
+    BrowserModule.withServerTransition({ appId: 'rebirth-admin' }),
     BrowserAnimationsModule,
     CoreModule,
     SharedModule,

src/app/app.server.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+import { ModuleMapLoaderModule } from '@nguniversal/module-map-ngfactory-loader';
+
+import { AppModule } from './app.module';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  imports: [AppModule, ServerModule, ModuleMapLoaderModule],
+  providers: [
+    // Add universal-only providers here
+  ],
+  bootstrap: [AppComponent],
+})
+export class AppServerModule {}

src/main.server.ts

@@ -0,0 +1 @@
+export { AppServerModule } from './app/app.server.module';

src/tsconfig.app.json

@@ -8,6 +8,7 @@
   },
   "exclude": [
     "test.ts",
-    "**/*.spec.ts"
+    "**/*.spec.ts",
+    "test-utils/**/*.ts"
   ]
 }

src/tsconfig.server.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/app",
+    "baseUrl": "./",
+    "module": "commonjs",
+    "types": []
+  },
+  "exclude": [
+    "test.ts",
+    "**/*.spec.ts",
+    "test-utils/**/*.ts"
+  ],
+  "angularCompilerOptions": {
+    "entryModule": "app/app.server.module#AppServerModule"
+  }
+}

webpack.server.config.js

@@ -0,0 +1,33 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+  entry: {server: './server.ts'},
+  resolve: {extensions: ['.js', '.ts']},
+  target: 'node',
+  // this makes sure we include node_modules and other 3rd party libraries
+  externals: [/(node_modules|main\..*\.js)/],
+  output: {
+    path: path.join(__dirname, 'dist-server'),
+    filename: '[name].js'
+  },
+  module: {
+    rules: [
+      {test: /\.ts$/, loader: 'ts-loader'}
+    ]
+  },
+  plugins: [
+    // Temporary Fix for issue: https://github.com/angular/angular/issues/11580
+    // for "WARNING Critical dependency: the request of a dependency is an expression"
+    new webpack.ContextReplacementPlugin(
+      /(.+)?angular(\\|\/)core(.+)?/,
+      path.join(__dirname, 'src'), // location of your src
+      {} // a map of your routes
+    ),
+    new webpack.ContextReplacementPlugin(
+      /(.+)?express(\\|\/)(.+)?/,
+      path.join(__dirname, 'src'),
+      {}
+    )
+  ]
+}