changes to server.ts

server.ts

@@ -1,3 +1,20 @@
+/**
+ * *** NOTE ON IMPORTING FROM ANGULAR AND NGUNIVERSAL IN THIS FILE ***
+ *
+ * If your application uses third-party dependencies, you'll need to
+ * either use Webpack or the Angular CLI's `bundleDependencies` feature
+ * in order to adequately package them for use on the server without a
+ * node_modules directory.
+ *
+ * However, due to the nature of the CLI's `bundleDependencies`, importing
+ * Angular in this file will create a different instance of Angular than
+ * the version in the compiled application code. This leads to unavoidable
+ * conflicts. Therefore, please do not explicitly import from @angular or
+ * @nguniversal in this file. You can export any needed resources
+ * from your application's main.server.ts file, as seen below with the
+ * import for `ngExpressEngine`.
+ */
+
 import 'zone.js/dist/zone-node';
 import 'reflect-metadata';
 import 'rxjs';
@@ -10,30 +27,33 @@ import * as express from 'express';
 import * as bodyParser from 'body-parser';
 import * as compression from 'compression';
 import * as cookieParser from 'cookie-parser';
+import { join } from 'path';
 
 import { enableProdMode, NgModuleFactory, Type } from '@angular/core';
 
-import { ngExpressEngine } from '@nguniversal/express-engine';
-
 import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
 import { environment } from './src/environments/environment';
 
-export function startServer(bootstrap: Type<{}> | NgModuleFactory<{}>) {
-  const app = express();
+const DIST_FOLDER = join(process.cwd(), 'dist/browser');
 
-  if (environment.production) {
+// * NOTE :: leave this as require() since this file is built Dynamically from webpack
+const { ServerAppModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap } = require('./dist/server/main');
+
+const app = express();
+
+if (environment.production) {
   enableProdMode();
   app.use(compression());
-  }
+}
 
-  app.use(morgan('dev'));
+app.use(morgan('dev'));
 
-  app.use(cookieParser());
-  app.use(bodyParser.json());
+app.use(cookieParser());
+app.use(bodyParser.json());
 
-  app.engine('html', (_, options, callback) =>
+app.engine('html', (_, options, callback) =>
   ngExpressEngine({
-      bootstrap: bootstrap,
+    bootstrap: ServerAppModuleNgFactory,
     providers: [
       {
         provide: REQUEST,
@@ -43,27 +63,28 @@ export function startServer(bootstrap: Type<{}> | NgModuleFactory<{}>) {
         provide: RESPONSE,
         useValue: (options as any).req.res,
       },
+      provideModuleMap(LAZY_MODULE_MAP)
     ],
   })(_, (options as any), callback)
-  );
+);
 
-  app.set('view engine', 'ejs');
-  app.set('view engine', 'html');
-  app.set('views', 'src');
+app.set('view engine', 'ejs');
+app.set('view engine', 'html');
+app.set('views', DIST_FOLDER);
 
-  function cacheControl(req, res, next) {
+function cacheControl(req, res, next) {
   // instruct browser to revalidate
   res.header('Cache-Control', environment.cache.control || 'max-age=60');
   next();
-  }
+}
 
-  app.use('/', cacheControl, express.static('dist', { index: false }));
+app.use('/', cacheControl, express.static('dist', { index: false }));
 
 // TODO: either remove or update mock backend
 // app.get('/data.json', serverApi);
 // app.use('/api', createMockApi());
 
-  function ngApp(req, res) {
+function ngApp(req, res) {
   const dspace = {
     originalRequest: {
       headers: req.headers,
@@ -80,13 +101,13 @@ export function startServer(bootstrap: Type<{}> | NgModuleFactory<{}>) {
   function onHandleError(parentZoneDelegate, currentZone, targetZone, error) {
     if (!res._headerSent) {
       console.warn('Error in SSR, serving for direct CSR. Error details : ', error);
-        res.sendFile('index.csr.html', { root: './src' });
+      res.sendFile('index.csr.html', { root: DIST_FOLDER });
     }
   }
 
   if (environment.universal.preboot) {
     Zone.current.fork({ name: 'CSR fallback', onHandleError }).run(() => {
-        res.render('../dist/index.html', {
+      res.render(DIST_FOLDER, {
         req,
         res,
         preboot: environment.universal.preboot,
@@ -100,26 +121,28 @@ export function startServer(bootstrap: Type<{}> | NgModuleFactory<{}>) {
   } else {
     console.log('Universal off, serving for direct CSR');
     res.render('index-csr.ejs', {
-        root: './src',
+      root: DIST_FOLDER,
       scripts: `<script>window.dspace = ${JSON.stringify(dspace)}</script>`
     });
   }
-  }
+}
 
-  function serverStarted() {
+app.get('*.*', ngApp);
+
+function serverStarted() {
   console.log(`[${new Date().toTimeString()}] Listening at ${environment.ui.baseUrl}`);
-  }
+}
 
-  function createHttpsServer(keys) {
+function createHttpsServer(keys) {
   https.createServer({
     key: keys.serviceKey,
     cert: keys.certificate
   }, app).listen(environment.ui.port, environment.ui.host, () => {
     serverStarted();
   });
-  }
+}
 
-  if (environment.ui.ssl) {
+if (environment.ui.ssl) {
   let serviceKey;
   try {
     serviceKey = fs.readFileSync('./config/ssl/key.pem');
@@ -150,8 +173,8 @@ export function startServer(bootstrap: Type<{}> | NgModuleFactory<{}>) {
       createHttpsServer(keys);
     });
   }
-  } else {
+} else {
   app.listen(environment.ui.port, environment.ui.host, () => {
     serverStarted();
   });
-  }}
+}