25-350 Configuring server side rendering

.angular-cli.json

@@ -28,6 +28,30 @@
         "dev": "environments/environment.ts",
         "prod": "environments/environment.prod.ts"
       }
+    },
+    {
+      "name": "universal",
+      "platform": "server",
+      "root": "src",
+      "outDir": "dist-server",
+      "assets": [
+        "assets",
+        "favicon.ico"
+      ],
+      "index": "index.html",
+      "main": "main.server.ts",
+      "tsconfig": "tsconfig.server.json",
+      "prefix": "app",
+      "styles": [
+        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
+        "styles.css"
+      ],
+      "scripts": [],
+      "environmentSource": "environments/environment.ts",
+      "environments": {
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
     }
   ],
   "e2e": {

package-lock.json

@@ -257,6 +257,17 @@
         "tslib": "1.8.0"
       }
     },
+    "@angular/platform-server": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmjs.org/@angular/platform-server/-/platform-server-5.0.5.tgz",
+      "integrity": "sha1-LryQdrQMFuhSZXwjFh8QzM2VTlo=",
+      "dev": true,
+      "requires": {
+        "domino": "1.0.30",
+        "tslib": "1.8.0",
+        "xhr2": "0.1.4"
+      }
+    },
     "@angular/router": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.0.2.tgz",
@@ -2298,6 +2309,12 @@
         "domelementtype": "1.3.0"
       }
     },
+    "domino": {
+      "version": "1.0.30",
+      "resolved": "https://registry.npmjs.org/domino/-/domino-1.0.30.tgz",
+      "integrity": "sha512-ikq8WiDSkICdkElud317F2Sigc6A3EDpWsxWBwIZqOl95km4p/Vc9Rj98id7qKgsjDmExj0AVM7JOd4bb647Xg==",
+      "dev": true
+    },
     "domutils": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
@@ -9380,6 +9397,12 @@
       "integrity": "sha1-OS2LotDxw00e4tYw8V0O+2jhBIo=",
       "dev": true
     },
+    "xhr2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/xhr2/-/xhr2-0.1.4.tgz",
+      "integrity": "sha1-f4dliEdxbbUCYyOBL4GMras4el8=",
+      "dev": true
+    },
     "xml-char-classes": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/xml-char-classes/-/xml-char-classes-1.0.0.tgz",

package.json

@@ -6,6 +6,7 @@
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
+    "build:ssr":  "ng build --prod && ng build --prod --app 1 --output-hashing=false",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
@@ -35,6 +36,7 @@
     "@angular/cli": "^1.5.4",
     "@angular/compiler-cli": "^5.0.0",
     "@angular/language-service": "^5.0.0",
+    "@angular/platform-server": "^5.0.5",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",

src/app/app.module.ts

@@ -21,7 +21,7 @@ import { AuthEffects } from './auth/ngrx/auth.effects';
     AppComponent
   ],
   imports: [
-    BrowserModule,
+    BrowserModule.withServerTransition({appId: 'my-recipebook-app'}),
     HttpClientModule,
     AppRoutingModule,
     SharedModule,

src/app/app.server.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { ServerModule } from '@angular/platform-server';
+
+import { AppModule } from "./app.module";
+import { AppComponent } from './app.component';
+
+@NgModule({
+    imports: [
+        AppModule,
+        ServerModule
+    ],
+    bootstrap: [AppComponent]
+})
+export class AppServerModule {}

src/main.server.ts

@@ -0,0 +1,4 @@
+import { enableProdMode } from '@angular/core';
+export { AppServerModule } from './app/app.server.module';
+
+enableProdMode()

src/tsconfig.server.json

@@ -0,0 +1,17 @@
+{
+    "extends": "../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../out-tsc/app",
+        "baseUrl": "./",
+        "module": "commonjs",
+        "types": []
+    },
+    "exclude": [
+        "test.ts",
+        "**/*.spec.ts"
+    ],
+    "angularCompilerOptions": {
+        "entryModule": "app/app.server.module#AppServerModule"
+    }
+}
+