success demo

package.json

@@ -16,7 +16,7 @@
   ],
   "scripts": {
     "ng": "ng",
-    "start": "concurrently --kill-others \"npm run server:watch\" \"ng serve --progress=false --proxy-config proxy.conf.json\"",
+    "start": "concurrently --kill-others \"npm run server:watch\" \"ng serve --aot --progress=false --proxy-config proxy.conf.json\"",
     "client:build": "ng build --prod",
     "client:test": "ng test",
     "client:lint": "ng lint --fix",

src/server/main.ts

@@ -1,10 +1,91 @@
+// These are important and needed before anything else
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+
 import { NestFactory } from '@nestjs/core';
-import { ApplicationModule } from './server.module';
+import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
+
+import * as express from 'express';
 import * as dotenv from 'dotenv';
+
 dotenv.config();
 
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+import { enableProdMode } from '@angular/core';
+import { renderModuleFactory } from '@angular/platform-server';
+import { FOLDER_CLIENT, FOLDER_DIST } from '../shared/constants';
+
+import { ApplicationModule } from './server.module';
+
+const app = express();
+
 async function bootstrap() {
-    const app = await NestFactory.create(ApplicationModule);
-    await app.listen(process.env.PORT || 3666);
+  if (process.env.NODE_ENV === 'production') {
+    serverRender(app);
+  }
+
+  const server = await NestFactory.create(ApplicationModule, app);
+
+  const options = new DocumentBuilder()
+    .setTitle('Typerx api documents')
+    .setDescription('The API description')
+    .setVersion('1.0')
+    .addTag('typerx')
+    .addBearerAuth()
+    .build();
+  const document = SwaggerModule.createDocument(server, options);
+  SwaggerModule.setup('/api2', server, document);
+
+  await server.listen(process.env.PORT || 3666);
+}
+
+/**
+ * Render Angular on Server Side instead on client
+ *
+ * @param {e.Express} expressApp
+ */
+function serverRender(expressApp: express.Express) {
+  enableProdMode();
+
+  // after build
+  const template = readFileSync(
+    join(FOLDER_DIST, FOLDER_CLIENT, 'index.html')
+  ).toString();
+
+  const {
+    AppServerModuleNgFactory,
+    LAZY_MODULE_MAP
+  } = require('../../dist/server/main.bundle');
+
+  const {
+    provideModuleMap
+  } = require('@nguniversal/module-map-ngfactory-loader');
+
+  expressApp.engine('html', (_, options, callback) => {
+    renderModuleFactory(AppServerModuleNgFactory, {
+      // Our index.html
+      document: template,
+      url: options.req.url,
+      // DI so that we can get lazy-loading to work differently (since we need it to just instantly render it)
+      extraProviders: [
+        provideModuleMap(LAZY_MODULE_MAP),
+        {
+          provide: 'serverUrl',
+          useValue: `${options.req.protocol}://${options.req.get('host')}`
+        }
+      ]
+    }).then(html => {
+      callback(null, html);
+    });
+  });
+
+  expressApp.set('view engine', 'html');
+  expressApp.set('views', join(FOLDER_DIST, FOLDER_CLIENT));
+
+  // Server static files from /client
+  expressApp.get('*.*', express.static(join(FOLDER_DIST, FOLDER_CLIENT)));
 }
+
 bootstrap();

webpack.server.config.js

@@ -0,0 +1,35 @@
+const path = require('path');
+const webpack = require('webpack');
+const nodeExternals = require('webpack-node-externals');
+
+module.exports = {
+  entry: {  server: './src/server/main.ts' },
+  resolve: { extensions: ['.js', '.ts'] },
+  target: 'node',
+  // this makes sure we include node_modules and other 3rd party libraries
+  externals: [/(node_modules|main\..*\.js)/, nodeExternals()],
+  // externals: [/(node_modules|main\..*\.js)/],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    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'),
+      {}
+    )
+  ]
+};