commit-for-intial-render-fix

package.json

@@ -10,7 +10,7 @@
     "build:prerender": "npm run build:client-and-server-bundles && npm run compile:server && npm run generate:prerender",
     "build:ssr": "npm run build:client-and-server-bundles && npm run compile:server && npm run move:build",
     "compile:server": "tsc -p server.tsconfig.json",
-    "move:build" : "(cp -r ./server/i18n/ dist/server)",
+    "move:build": "(cp -r ./server/i18n/ dist/server)",
     "generate:prerender": "cd dist && node prerender",
     "serve:prerender": "cd dist/browser && http-server",
     "serve:ssr": "node dist/server"
@@ -38,6 +38,7 @@
     "express": "^4.15.2",
     "express-static-gzip": "^1.1.3",
     "helmet": "^3.18.0",
+    "jsdom": "^15.1.1",
     "moment": "^2.24.0",
     "morgan": "^1.9.1",
     "ngx-cookie-service": "^2.2.0",

server.ts

@@ -1,18 +1,15 @@
 import "zone.js/dist/zone-node";
 import "reflect-metadata";
-const domino = require("domino");
 const fs = require("fs");
 const path = require("path");
 const template = fs
   .readFileSync(path.join(__dirname, ".", "browser", "index.html"))
   .toString();
-const win = domino.createWindow(template);
-// const styleFiles = files.filter(file => file.startsWith('styles'));
-// const hashStyle = styleFiles[0].split('.')[1];
-// const style = fs.readFileSync(path.join(__dirname, '.', 'dist-server', `styles.${hashStyle}.bundle.css`)).toString();
-
-global["window"] = win;
-Object.defineProperty(win.document.body.style, "transform", {
+const jsdom = require("jsdom");
+const { JSDOM } = jsdom;
+const { window } = new JSDOM(template);
+global["window"] = window;
+Object.defineProperty(window.document.body.style, "transform", {
   value: () => {
     return {
       enumerable: true,
@@ -20,10 +17,7 @@ Object.defineProperty(win.document.body.style, "transform", {
     };
   }
 });
-global["document"] = win.document;
-// global["CSS"] = win;
-// global['XMLHttpRequest'] = require('xmlhttprequest').XMLHttpRequest;
-// global["Prism"] = null;
+global["document"] = window.document;
 
 import { enableProdMode } from "@angular/core";
 
@@ -80,7 +74,10 @@ const controllers = [
 app.use(errorMiddleware);
 app.use(bodyParser.json({ limit: "50mb" }));
 app.use(bodyParser.urlencoded({ extended: false }));
-app.use("/api-docs/**", express.static(path.join(__dirname, "./server/swagger")));
+app.use(
+  "/api-docs/**",
+  express.static(path.join(__dirname, "./server/swagger"))
+);
 app.get("/swagger.json", function(req, res) {
   res.setHeader("Content-Type", "application/json");
   res.send(
@@ -95,8 +92,9 @@ controllers.forEach(controller => {
   app.use("/epic_explorer/v1", controller.router);
 });
 // Example Express Rest API endpoints
- app.get('/epic_explorer/v1/**', (req, res) => { res.send({'msg':'Api works.'})});
-
+app.get("/epic_explorer/v1/**", (req, res) => {
+  res.send({ msg: "Api works." });
+});
 
 // * NOTE :: leave this as require() since this file is built Dynamically from webpack
 const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require("./server/main");
@@ -110,10 +108,8 @@ app.engine(
   })
 );
 
-app.set("view engine", "html");
 app.set("views", join(DIST_FOLDER, "browser"));
-
-
+app.set("view engine", "html");
 // Server static files from /browser
 app.get(
   "*.*",
@@ -124,7 +120,7 @@ app.get(
 
 // All regular routes use the Universal engine
 app.get("*", (req, res) => {
-  res.render("index", { req });
+  res.sendFile(join(DIST_FOLDER, "browser") + "/index.html", { req });
 });
 
 // Start up the Node server

src/app/shared/services/trans-service.service.ts

@@ -1,42 +1,55 @@
-import { Injectable } from '@angular/core';
-import {TranslateService} from '@ngx-translate/core';
-import { CookieService } from 'ngx-cookie-service';
+import { Injectable, Inject, PLATFORM_ID } from "@angular/core";
+import { TranslateService } from "@ngx-translate/core";
+import { CookieService } from "ngx-cookie-service";
+import { isPlatformBrowser } from "@angular/common";
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: "root"
 })
-export class TransServiceService{
+export class TransServiceService {
   public langLabel: any = {};
 
-  constructor(public translate : TranslateService,private cookie: CookieService) { 
-    translate.addLangs(['en', 'de']);
-    translate.setDefaultLang('en');
-    this.langLabel = {en: 'English', de: 'German'};
+  constructor(
+    @Inject(PLATFORM_ID) private platformId: Object,
+    public translate: TranslateService,
+    private cookie: CookieService
+  ) {
+    if (isPlatformBrowser(this.platformId)) {
+      translate.addLangs(["en", "de"]);
+      translate.setDefaultLang("en");
+      this.langLabel = { en: "English", de: "German" };
       // console.log('this.getCookie() ifconf',this.getCookie() != 'undefined' ? 1: 2);
       // console.log("(this.getCookie() && this.getCookie() != null) ? this.getCookie() : (this.getCurrentLang() && this.getCurrentLang() != null) ? this.getCurrentLang() : 'en'",(this.getCookie() && this.getCookie() != 'undefined') ? this.getCookie() : (this.getCurrentLang() && this.getCurrentLang() != 'undefined') ? this.getCurrentLang() : 'en');
-    translate.use((this.getCookie() && this.getCookie() != 'undefined') ? this.getCookie() : (this.getCurrentLang() && this.getCurrentLang() != 'undefined') ? this.getCurrentLang() : 'en');
+      translate.use(
+        this.getCookie() && this.getCookie() != "undefined"
+          ? this.getCookie()
+          : this.getCurrentLang() && this.getCurrentLang() != "undefined"
+          ? this.getCurrentLang()
+          : "en"
+      );
 
       this.setCookie(this.getCurrentLang());
     }
+  }
 
-  public getLanguage(){
+  public getLanguage() {
     return this.translate.getLangs();
   }
 
-  public getCurrentLang(){
+  public getCurrentLang() {
     return this.translate.currentLang;
   }
 
-  public changeLang(langSelect){
+  public changeLang(langSelect) {
     this.translate.use(langSelect);
     this.setCookie(langSelect);
   }
 
-  public setCookie(lang){
-    this.cookie.set('Lang',lang);
+  public setCookie(lang) {
+    this.cookie.set("Lang", lang);
   }
 
-  public getCookie(){
-    return this.cookie.get('Lang');
+  public getCookie() {
+    return this.cookie.get("Lang");
   }
 }

src/polyfills.ts

@@ -55,8 +55,8 @@
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js/dist/zone';  // Included with Angular CLI.
-
+import "zone.js/dist/zone"; // Included with Angular CLI.
+(window as any).global = window;
 
 /***************************************************************************************************
  * APPLICATION IMPORTS