feat: Angular 9

Author: Gorniv

angular.json

@@ -23,8 +23,7 @@
               "src/robots.txt",
               "src/manifest.json"
             ],
-            "styles": [
-            ],
+            "styles": [],
             "scripts": []
           },
           "configurations": {
@@ -96,8 +95,7 @@
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
-            "styles": [
-            ],
+            "styles": [],
             "assets": [
               "src/assets",
               "src/favicon.ico",
@@ -132,9 +130,9 @@
                   "replace": "src/environments/environment.ts",
                   "with": "src/environments/server/environment.ts"
                 }
-              ]
-            ,              "optimization": true
-},
+              ],
+              "optimization": true
+            },
             "production": {
               "optimization": true,
               "outputHashing": "all",
@@ -214,5 +212,8 @@
     "@schematics/angular:directive": {
       "prefix": "app"
     }
+  },
+  "cli": {
+    "analytics": "64925903-0f96-433a-83be-7a3fb8485063"
   }
-}
+}

package-lock.json

@@ -54,7 +54,7 @@
     "@ngx-meta/core": "8.0.2",
     "@ngx-translate/core": "12.0.0",
     "@ngx-translate/http-loader": "4.0.0",
-    "@gorniv/ngx-universal": "2.2.0",
+    "@gorniv/ngx-universal": "2.2.2",
     "cookie-parser": "1.4.4",
     "core-js": "3.6.4",
     "express": "^4.15.2",

package.json

@@ -55,7 +55,7 @@ const PORT = process.env.PORT || 4000;
 import { ROUTES } from './static.paths';
 // for test
 import { exit } from 'process';
-import { NgxRequest, NgxResponce } from '@gorniv/ngx-universal';
+import { NgxRequest, NgxResponse } from '@gorniv/ngx-universal';
 
 enableProdMode();
 

server.ts.bak server.bak.tsserver.ts.bak renamed to server.bak.ts

@@ -7,31 +7,155 @@ import { join } from 'path';
 import { AppServerModule } from './src/main.server';
 import { APP_BASE_HREF } from '@angular/common';
 import { existsSync } from 'fs';
+import { REQUEST, RESPONSE } from '@nguniversal/express-engine/tokens';
+import { NgxRequest, NgxResponse } from '@gorniv/ngx-universal';
+import * as compression from 'compression';
+import * as cookieparser from 'cookie-parser';
+import { exit } from 'process';
+// for debug
+require('source-map-support').install();
+
+// for tests
+const test = process.env['TEST'] === 'true';
+
+// ssr DOM
+const domino = require('domino');
+const fs = require('fs');
+const path = require('path');
+// index from browser build!
+const template = fs.readFileSync(path.join('.', 'dist', 'index.html')).toString();
+// for mock global window by domino
+const win = domino.createWindow(template);
+// from server build
+const files = fs.readdirSync(`${process.cwd()}/dist-server`);
+// mock
+global['window'] = win;
+// not implemented property and functions
+Object.defineProperty(win.document.body.style, 'transform', {
+  value: () => {
+    return {
+      enumerable: true,
+      configurable: true,
+    };
+  },
+});
+// mock documnet
+global['document'] = win.document;
+// othres mock
+global['CSS'] = null;
+// global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
+global['Prism'] = null;
 
 // The Express app is exported so that it can be used by serverless Functions.
 export function app() {
   const server = express();
   const distFolder = join(process.cwd(), 'dist');
-  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';
+  const indexHtml = existsSync(join(distFolder, 'index.original.html'))
+    ? 'index.original.html'
+    : 'index';
+
+  // redirects!
+  const redirectowww = false;
+  const redirectohttps = false;
+  const wwwredirecto = true;
+  server.use((req, res, next) => {
+    // for domain/index.html
+    if (req.url === '/index.html') {
+      res.redirect(301, 'https://' + req.hostname);
+    }
+
+    // check if it is a secure (https) request
+    // if not redirect to the equivalent https url
+    if (
+      redirectohttps &&
+      req.headers['x-forwarded-proto'] !== 'https' &&
+      req.hostname !== 'localhost'
+    ) {
+      // special for robots.txt
+      if (req.url === '/robots.txt') {
+        next();
+        return;
+      }
+      res.redirect(301, 'https://' + req.hostname + req.url);
+    }
+
+    // www or not
+    if (redirectowww && !req.hostname.startsWith('www.')) {
+      res.redirect(301, 'https://www.' + req.hostname + req.url);
+    }
+
+    // www or not
+    if (wwwredirecto && req.hostname.startsWith('www.')) {
+      const host = req.hostname.slice(4, req.hostname.length);
+      res.redirect(301, 'https://' + host + req.url);
+    }
 
+    // for test
+    if (test && req.url === '/test/exit') {
+      res.send('exit');
+      exit(0);
+      return;
+    }
+
+    next();
+  });
   // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
-  server.engine('html', ngExpressEngine({
-    bootstrap: AppServerModule,
-  }));
+  server.engine(
+    'html',
+    ngExpressEngine({
+      bootstrap: AppServerModule,
+    }),
+  );
 
   server.set('view engine', 'html');
   server.set('views', distFolder);
 
   // Example Express Rest API endpoints
   // app.get('/api/**', (req, res) => { });
   // Serve static files from /browser
-  server.get('*.*', express.static(distFolder, {
-    maxAge: '1y'
-  }));
+  server.get(
+    '*.*',
+    express.static(distFolder, {
+      maxAge: '1y',
+    }),
+  );
 
   // All regular routes use the Universal engine
   server.get('*', (req, res) => {
-    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
+    global['navigator'] = req['headers']['user-agent'];
+    const http =
+      req.headers['x-forwarded-proto'] === undefined ? 'http' : req.headers['x-forwarded-proto'];
+
+    res.render(indexHtml, {
+      req,
+      providers: [
+        { provide: APP_BASE_HREF, useValue: req.baseUrl },
+
+        // for http and cookies
+        {
+          provide: REQUEST,
+          useValue: req,
+        },
+        {
+          provide: RESPONSE,
+          useValue: res,
+        },
+        /// for cookie
+        {
+          provide: NgxRequest,
+          useValue: req,
+        },
+        {
+          provide: NgxResponse,
+          useValue: res,
+        },
+        // for absolute path
+        {
+          provide: 'ORIGIN_URL',
+          useValue: `${http}://${req.headers.host}`,
+        },
+      ],
+    });
   });
 
   return server;
@@ -42,6 +166,11 @@ function run() {
 
   // Start up the Node server
   const server = app();
+  // gzip
+  server.use(compression());
+  // cokies
+  server.use(cookieparser());
+
   server.listen(port, () => {
     console.log(`Node Express server listening on http://localhost:${port}`);
   });
@@ -52,7 +181,7 @@ function run() {
 // 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 || '';
+const moduleFilename = (mainModule && mainModule.filename) || '';
 if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
   run();
 }

server.ts

@@ -12,6 +12,6 @@
   },
   "files": [
     "main.server.ts",
-    "server.ts"
+    "../server.ts"
   ]
 }