Working with --bundle-dependencies=all off, or with --prod off, but not with both on

Author: SteveSandersonMS

package.json

@@ -19,9 +19,11 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
-    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
+    "build:client-and-server-bundles": "ng build && ng build --app 1 --output-hashing=false --bundle-dependencies=all",
+    "build:client-and-server-bundles:prod": "ng build --prod && ng build --prod --app 1 --output-hashing=false --bundle-dependencies=all",
     "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
     "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
+    "build:ssr:prod": "npm run build:client-and-server-bundles:prod && npm run webpack:server",
     "generate:prerender": "cd dist && node prerender",
     "webpack:server": "webpack --config webpack.server.config.js --progress --colors",
     "serve:prerender": "cd dist/browser && http-server",

server.ts

@@ -1,15 +1,7 @@
-import 'zone.js/dist/zone-node';
-import 'reflect-metadata';
-import { renderModuleFactory } from '@angular/platform-server';
-import { enableProdMode } from '@angular/core';
-
 import * as express from 'express';
 import { join } from 'path';
 import { readFileSync } from 'fs';
 
-// Faster server renders w/ Prod mode (dev mode never needed)
-enableProdMode();
-
 // Express server
 const app = express();
 
@@ -20,36 +12,41 @@ const DIST_FOLDER = join(process.cwd(), 'dist');
 const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
 
 // * 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';
-
-// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-app.engine('html', ngExpressEngine({
-  bootstrap: AppServerModuleNgFactory,
-  providers: [
-    provideModuleMap(LAZY_MODULE_MAP)
-  ]
-}));
+const {
+  AppServerModule,
+  AppServerModuleNgFactory,
+  LAZY_MODULE_MAP,
+  provideModuleMap,
+  renderModule,
+  renderModuleFactory,
+  enableProdMode
+} = require('./dist/server/main.bundle');
+
+enableProdMode();
 
 app.set('view engine', 'html');
 app.set('views', join(DIST_FOLDER, 'browser'));
 
-/* - Example Express Rest API endpoints -
-  app.get('/api/**', (req, res) => { });
-*/
-
 // Server static files from /browser
 app.get('*.*', express.static(join(DIST_FOLDER, 'browser'), {
   maxAge: '1y'
 }));
 
-// ALl regular routes use the Universal engine
+// All regular routes use Angular SSR
 app.get('*', (req, res) => {
-  res.render('index', { req });
+  const renderOptions = {
+    document: template,
+    url: req.url,
+    extraProviders: [provideModuleMap(LAZY_MODULE_MAP)]
+  };
+
+  const renderPromise = AppServerModuleNgFactory
+    ? /* prod mode */ renderModuleFactory(AppServerModuleNgFactory, renderOptions)
+    : /* dev mode */ renderModule(AppServerModule, renderOptions);
+
+  renderPromise
+    .then(html => res.send(html), err => res.send(err))
+    .then(() => res.end());
 });
 
 // Start up the Node server

src/main.server.ts

@@ -1 +1,9 @@
+import 'zone.js/dist/zone-node';
+import 'reflect-metadata';
+
+// Because we want to use --bundle-dependencies=all, we export the SSR
+// APIs we want to invoke so they can be called from outside this bundle
 export { AppServerModule } from './app/app.server.module';
+export { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
+export { renderModule, renderModuleFactory } from '@angular/platform-server';
+export { enableProdMode } from '@angular/core';