demo(app): minor changes to support prerendering

angular-material-extensions · Oct 30, 2018 · 47545c0 · 47545c0
1 parent 2102828
commit 47545c0
Show file tree

Hide file tree

Showing 11 changed files with 138 additions and 130 deletions.
diff --git a/demo/angular.json b/demo/angular.json
@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "bsr": {
+    "password-strength": {
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
@@ -65,21 +65,21 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "bsr:build"
+            "browserTarget": "password-strength:build"
           },
           "configurations": {
             "hmr": {
-              "browserTarget": "bsr:build:hmr"
+              "browserTarget": "password-strength:build:hmr"
             },
             "production": {
-              "browserTarget": "bsr:build:production"
+              "browserTarget": "password-strength:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "bsr:build"
+            "browserTarget": "password-strength:build"
           }
         },
         "test": {
@@ -116,13 +116,23 @@
           "builder": "@angular-devkit/build-angular:server",
           "options": {
             "outputPath": "dist/server",
-            "main": "main.server.ts",
-            "tsConfig": "tsconfig.server.json"
+            "main": "src/main.server.ts",
+            "tsConfig": "src/tsconfig.server.json"
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
           }
         }
       }
     },
-    "bsr-e2e": {
+    "password-strength-e2e": {
       "root": "",
       "sourceRoot": "",
       "projectType": "application",
@@ -131,7 +141,7 @@
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "./protractor.conf.js",
-            "devServerTarget": "bsr:serve"
+            "devServerTarget": "password-strength:serve"
           }
         },
         "lint": {
@@ -148,7 +158,7 @@
       }
     }
   },
-  "defaultProject": "bsr",
+  "defaultProject": "password-strength",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "app",

diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -5,13 +5,24 @@
   "description": "Demo app for @angular-material-extensions/password-strength",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "serve:prod": "ng serve --prod",
     "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
+    "build:doc": "cd ../ && gulp build:doc",
+    "build:prod": "ng build --prod ",
+    "build:client-and-server-bundles": "ng build --prod &&  ng run password-strength:server:production",
+    "build:prerender": "npm run build:client-and-server-bundles && npm run webpack:server && npm run generate:prerender",
+    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
+    "compile:server": "tsc -p server.tsconfig.json",
+    "deploy:firebase": "npm run build:prod && npm run build:doc && firebase deploy",
     "e2e": "ng e2e",
-    "postinstall": "npm link @angular-material-extensions/password-strength"
+    "generate:prerender": "cd dist && node prerender",
+    "lint": "ng lint",
+    "test": "ng test",
+    "postinstall": "npm link @angular-material-extensions/password-strength",
+    "start": "ng serve",
+    "serve:prod": "ng serve --prod",
+    "serve:prerender": "cd dist/browser && http-server",
+    "serve:ssr": "node dist/server",
+    "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
   },
   "private": true,
   "dependencies": {
@@ -46,7 +57,7 @@
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^0.7.5",
-    "@angular/cli": "^6.2.3",
+    "@angular/cli": "^6.2.4",
     "@angular/compiler-cli": "6.1.8",
     "@angular/language-service": "6.1.8",
     "@angularclass/hmr": "~2.1.3",

diff --git a/demo/prerender.ts b/demo/prerender.ts
@@ -1,24 +1,22 @@
 // Load zone.js for the server.
 import 'zone.js/dist/zone-node';
 import 'reflect-metadata';
-import { readFileSync, writeFileSync, existsSync, mkdirSync } from 'fs';
-import { join } from 'path';
-
-import { enableProdMode } from '@angular/core';
-// Faster server renders w/ Prod mode (dev mode never needed)
-enableProdMode();
+import {existsSync, mkdirSync, readFileSync, writeFileSync} from 'fs';
+import {join} from 'path';
 
+import {enableProdMode} from '@angular/core';
 // Express Engine
-import { ngExpressEngine } from '@nguniversal/express-engine';
 // Import module map for lazy loading
-import { provideModuleMap } from '@nguniversal/module-map-ngfactory-loader';
-import { renderModuleFactory } from '@angular/platform-server';
-import { ROUTES } from './static.paths';
+import {provideModuleMap} from '@nguniversal/module-map-ngfactory-loader';
+import {renderModuleFactory} from '@angular/platform-server';
+import {ROUTES} from './static.paths';
+// Faster server renders w/ Prod mode (dev mode never needed)
+enableProdMode();
 
 // * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
+const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main');
 
-const BROWSER_FOLDER = join(process.cwd(), 'dist', 'browser');
+const BROWSER_FOLDER = join(process.cwd(), 'browser');
 
 // Load the index.html file containing referances to your application bundle.
 const index = readFileSync(join(BROWSER_FOLDER, 'index.html'), 'utf8');
@@ -27,10 +25,10 @@ let previousRender = Promise.resolve();
 
 // Iterate each route path
 ROUTES.forEach(route => {
-  var fullPath = join(BROWSER_FOLDER, route);
+  const fullPath = join(BROWSER_FOLDER, route);
 
   // Make sure the directory structure is there
-  if(!existsSync(fullPath)){
+  if (!existsSync(fullPath)) {
     mkdirSync(fullPath);
   }
 

diff --git a/demo/server.ts b/demo/server.ts
@@ -22,7 +22,7 @@ const DIST_FOLDER = join(process.cwd(), 'dist');
 const template = readFileSync(join(DIST_FOLDER, 'browser', 'index.html')).toString();
 
 // * NOTE :: leave this as require() since this file is built Dynamically from webpack
-const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');
+const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main');
 
 const { provideModuleMap } = require('@nguniversal/module-map-ngfactory-loader');
 

diff --git a/demo/src/app/app.server.module.ts b/demo/src/app/app.server.module.ts
@@ -4,13 +4,15 @@ import {ServerModule} from '@angular/platform-server';
 import {AppModule} from './app.module';
 import {AppComponent} from './app.component';
 import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader';
+import {FlexLayoutServerModule} from '@angular/flex-layout/server';
 
 @NgModule({
   imports: [
     // The AppServerModule should import your AppModule followed
     // by the ServerModule from @angular/platform-server.
     AppModule,
     ServerModule,
+    FlexLayoutServerModule,
     ModuleMapLoaderModule
   ],
   // Since the bootstrapped component is not inherited from your