remove bundle workaround, update dependencies and build

angular.json

@@ -177,16 +177,13 @@
               }
             },
             "outputPath": "dist/server",
-            "main": "src/main.server.ts",
+            "main": "server.ts",
             "tsConfig": "tsconfig.server.json"
           },
           "configurations": {
             "production": {
               "sourceMap": false,
-              "optimization": {
+              "optimization": true
-                "scripts": false,
-                "styles": true
-              }
             }
           }
         },

package.json

@@ -25,16 +25,14 @@
     "build": "ng build",
     "build:stats": "ng build --stats-json",
     "build:prod": "yarn run build:ssr",
-    "build:ssr": "yarn run build:client-and-server-bundles && yarn run compile:server",
+    "build:ssr": "ng build --configuration production && ng run dspace-angular:server:production",
-    "build:client-and-server-bundles": "ng build --prod && ng run dspace-angular:server:production --bundleDependencies true",
     "test:watch": "npm-run-all --parallel config:test:watch test",
     "test": "ng test --sourceMap=true --watch=true",
     "test:headless": "ng test --watch=false --sourceMap=true --browsers=ChromeHeadless --code-coverage",
     "lint": "ng lint",
     "lint-fix": "ng lint --fix=true",
     "e2e": "ng e2e",
-    "compile:server": "webpack --config webpack.server.config.js --progress --color",
+    "serve:ssr": "node dist/server/main",
-    "serve:ssr": "node dist/server",
     "clean:coverage": "rimraf coverage",
     "clean:dist": "rimraf dist",
     "clean:doc": "rimraf doc",
@@ -61,6 +59,7 @@
   "private": true,
   "resolutions": {
     "minimist": "^1.2.5",
+    "tslib": "^2.0.0",
     "webdriver-manager": "^12.1.8"
   },
   "dependencies": {
@@ -93,9 +92,9 @@
     "caniuse-lite": "^1.0.30001165",
     "cerialize": "0.1.18",
     "cli-progress": "^3.8.0",
+    "compression": "^1.7.4",
     "cookie-parser": "1.4.5",
     "core-js": "^3.7.0",
-    "debug-loader": "^0.0.1",
     "deepmerge": "^4.2.2",
     "express": "^4.17.1",
     "express-rate-limit": "^5.1.3",
@@ -104,11 +103,13 @@
     "filesize": "^6.1.0",
     "font-awesome": "4.7.0",
     "https": "1.0.0",
+    "http-proxy-middleware": "^1.0.5",
     "js-cookie": "2.2.1",
     "json5": "^2.1.3",
     "jsonschema": "1.4.0",
     "jwt-decode": "^3.1.2",
     "klaro": "^0.7.10",
+    "lodash": "^4.17.21",
     "mirador": "^3.0.0",
     "mirador-dl-plugin": "^0.13.0",
     "mirador-share-plugin": "^0.10.0",
@@ -116,7 +117,7 @@
     "morgan": "^1.10.0",
     "ng-mocks": "10.5.4",
     "ng2-file-upload": "1.4.0",
-    "ng2-nouislider": "^1.8.2",
+    "ng2-nouislider": "^1.8.3",
     "ngx-infinite-scroll": "^10.0.1",
     "ngx-moment": "^5.0.0",
     "ngx-pagination": "5.0.0",
@@ -128,23 +129,23 @@
     "react-dom": "^16.14.0",
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.6.3",
-    "rxjs-spy": "^7.5.3",
-    "sass-resources-loader": "^2.1.1",
     "sortablejs": "1.13.0",
     "tslib": "^2.0.0",
+    "url-parse": "^1.5.3",
+    "uuid": "^8.3.2",
     "webfontloader": "1.6.28",
     "zone.js": "^0.10.3"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "10.0.1",
-    "@angular-devkit/build-angular": "~0.1002.0",
+    "@angular-devkit/build-angular": "~0.1002.3",
     "@angular/cli": "~10.2.0",
     "@angular/compiler-cli": "~10.2.3",
     "@angular/language-service": "~10.2.3",
     "@cypress/schematic": "^1.5.0",
     "@fortawesome/fontawesome-free": "^5.5.0",
     "@ngrx/store-devtools": "^10.0.1",
-    "@ngtools/webpack": "10.2.0",
+    "@ngtools/webpack": "10.2.3",
     "@nguniversal/builders": "~10.1.0",
     "@types/deep-freeze": "0.1.2",
     "@types/express": "^4.17.9",
@@ -162,12 +163,12 @@
     "cssnano": "^4.1.10",
     "cypress": "8.6.0",
     "cypress-axe": "^0.13.0",
+    "debug-loader": "^0.0.1",
     "deep-freeze": "0.0.1",
     "dotenv": "^8.2.0",
     "fork-ts-checker-webpack-plugin": "^6.0.3",
     "html-loader": "^1.3.2",
     "html-webpack-plugin": "^4.5.0",
-    "http-proxy-middleware": "^1.0.5",
     "jasmine-core": "^3.6.0",
     "jasmine-marbles": "0.6.0",
     "jasmine-spec-reporter": "^6.0.0",
@@ -189,16 +190,19 @@
     "protractor-istanbul-plugin": "2.0.0",
     "raw-loader": "0.5.1",
     "rimraf": "^3.0.2",
+    "rxjs-spy": "^7.5.3",
+    "sass-resources-loader": "^2.1.1",
     "script-ext-html-webpack-plugin": "2.1.5",
     "string-replace-loader": "^2.3.0",
     "terser-webpack-plugin": "^2.3.1",
     "ts-loader": "^5.2.0",
-    "ts-node": "^8.8.1",
+    "ts-node": "^8.10.2",
     "tslint": "^6.1.3",
     "typescript": "~4.0.5",
     "webpack": "^4.44.2",
     "webpack-bundle-analyzer": "^4.4.0",
     "webpack-cli": "^4.2.0",
+    "webpack-dev-server": "^4.5.0",
     "webpack-node-externals": "1.7.2"
   }
 }

server.ts

@@ -30,6 +30,7 @@ import { join } from 'path';
 
 import { enableProdMode } from '@angular/core';
 import { existsSync } from 'fs';
+import { ngExpressEngine } from '@nguniversal/express-engine';
 import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
 import { environment } from './src/environments/environment';
 import { createProxyMiddleware } from 'http-proxy-middleware';
@@ -37,6 +38,8 @@ import { hasValue, hasNoValue } from './src/app/shared/empty.util';
 import { APP_BASE_HREF } from '@angular/common';
 import { UIServerConfig } from './src/config/ui-server-config.interface';
 
+import { ServerAppModule } from './src/main.server';
+
 /*
  * Set path for the browser application's dist folder
  */
@@ -46,9 +49,6 @@ const IIIF_VIEWER = join(process.cwd(), 'dist/iiif');
 
 const indexHtml = existsSync(join(DIST_FOLDER, 'index.html')) ? 'index.html' : 'index';
 
-// * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const { ServerAppModule, ngExpressEngine } = require('./dist/server/main');
-
 const cookieParser = require('cookie-parser');
 
 // The Express app is exported so that it can be used by serverless Functions.
@@ -59,7 +59,6 @@ export function app() {
    */
   const server = express();
 
-
   /*
    * If production mode is enabled in the environment file:
    * - Enable Angular's production mode
@@ -227,47 +226,59 @@ function run() {
   });
 }
 
-/*
+function start() {
- * If SSL is enabled
+  /*
- * - Read credentials from configuration files
+  * If SSL is enabled
- * - Call script to start an HTTPS server with these credentials
+  * - Read credentials from configuration files
- * When SSL is disabled
+  * - Call script to start an HTTPS server with these credentials
- * - Start an HTTP server on the configured port and host
+  * When SSL is disabled
- */
+  * - Start an HTTP server on the configured port and host
-if (environment.ui.ssl) {
+  */
-  let serviceKey;
+  if (environment.ui.ssl) {
-  try {
+    let serviceKey;
-    serviceKey = fs.readFileSync('./config/ssl/key.pem');
+    try {
-  } catch (e) {
+      serviceKey = fs.readFileSync('./config/ssl/key.pem');
-    console.warn('Service key not found at ./config/ssl/key.pem');
+    } catch (e) {
-  }
+      console.warn('Service key not found at ./config/ssl/key.pem');
+    }
 
-  let certificate;
+    let certificate;
-  try {
+    try {
-    certificate = fs.readFileSync('./config/ssl/cert.pem');
+      certificate = fs.readFileSync('./config/ssl/cert.pem');
-  } catch (e) {
+    } catch (e) {
-    console.warn('Certificate not found at ./config/ssl/key.pem');
+      console.warn('Certificate not found at ./config/ssl/key.pem');
-  }
+    }
 
-  if (serviceKey && certificate) {
+    if (serviceKey && certificate) {
-    createHttpsServer({
+      createHttpsServer({
-      serviceKey: serviceKey,
+        serviceKey: serviceKey,
-      certificate: certificate
+        certificate: certificate
-    });
+      });
+    } else {
+      console.warn('Disabling certificate validation and proceeding with a self-signed certificate. If this is a production server, it is recommended that you configure a valid certificate instead.');
+
+      process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; // lgtm[js/disabling-certificate-validation]
+
+      pem.createCertificate({
+        days: 1,
+        selfSigned: true
+      }, (error, keys) => {
+        createHttpsServer(keys);
+      });
+    }
   } else {
-    console.warn('Disabling certificate validation and proceeding with a self-signed certificate. If this is a production server, it is recommended that you configure a valid certificate instead.');
+    run();
-
-    process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0'; // lgtm[js/disabling-certificate-validation]
-
-    pem.createCertificate({
-      days: 1,
-      selfSigned: true
-    }, (error, keys) => {
-      createHttpsServer(keys);
-    });
   }
-} else {
+}
-  run();
+
+// Webpack will replace 'require' with '__webpack_require__'
+// '__non_webpack_require__' is a proxy to Node 'require'
+// The below code is to ensure that the server is run only when not requiring the bundle.
+declare const __non_webpack_require__: NodeRequire;
+const mainModule = __non_webpack_require__.main;
+const moduleFilename = (mainModule && mainModule.filename) || '';
+if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
+  start();
 }
 
 export * from './src/main.server';

tsconfig.server.json

@@ -2,10 +2,14 @@
   "extends": "./tsconfig.app.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app-server",
-    "module": "commonjs"
+    "target": "es2016",
+    "types": [
+      "node"
+    ]
   },
   "files": [
-    "src/main.server.ts"
+    "src/main.server.ts",
+    "server.ts"
   ],
   "angularCompilerOptions": {
     "entryModule": "./src/modules/app/server-app.module#ServerAppModule"

webpack.server.config.js

@@ -1,55 +0,0 @@
-// Work around for https://github.com/angular/angular-cli/issues/7200
-
-const path = require('path');
-const webpack = require('webpack');
-
-module.exports = {
-  mode: 'none',
-  entry: {
-    // This is our Express server for Dynamic universal
-    server: './server.ts'
-  },
-  externals: {
-    './dist/server/main': 'require("./server/main")'
-  },
-  target: 'node',
-  resolve: { extensions: ['.ts', '.js'] },
-  optimization: {
-    minimize: false
-  },
-  output: {
-    // Puts the output at the root of the dist folder
-    path: path.join(__dirname, 'dist'),
-    filename: '[name].js'
-  },
-  module: {
-    noParse: /polyfills-.*\.js/,
-    rules: [
-      {
-        test: /\.ts$/, loader: 'ts-loader',
-        options: {
-          configFile: "tsconfig.server.json"
-        } },
-      {
-        // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
-        // Removing this will cause deprecation warnings to appear.
-        test: /(\\|\/)@angular(\\|\/)core(\\|\/).+\.js$/,
-        parser: { system: true },
-      },
-    ]
-  },
-  plugins: [
-    new webpack.ContextReplacementPlugin(
-      // fixes WARNING Critical dependency: the request of a dependency is an expression
-      /(.+)?angular(\\|\/)core(.+)?/,
-      path.join(__dirname, 'src'), // location of your src
-      {} // a map of your routes
-    ),
-    new webpack.ContextReplacementPlugin(
-      // fixes WARNING Critical dependency: the request of a dependency is an expression
-      /(.+)?express(\\|\/)(.+)?/,
-      path.join(__dirname, 'src'),
-      {}
-    )
-  ]
-};

webpack/webpack.prod.ts

@@ -16,7 +16,7 @@ module.exports = Object.assign({}, commonExports, {
   ],
   mode: 'production',
   recordsOutputPath: projectRoot('webpack.records.json'),
-  entry: projectRoot('./src/main.server.ts'),
+  entry: projectRoot('./server.ts'),
   target: 'node',
   externals: [nodeExternals({
     whitelist: [