From 47545c0906aabab826de26ed146a6e8fa7dec4d7 Mon Sep 17 00:00:00 2001 From: Anthony Nahas Date: Tue, 30 Oct 2018 12:28:40 +0100 Subject: [PATCH] demo(app): minor changes to support prerendering --- demo/angular.json | 30 ++++--- demo/package-lock.json | 76 ++++++++--------- demo/package.json | 23 ++++-- demo/prerender.ts | 26 +++--- demo/server.ts | 2 +- demo/src/app/app.server.module.ts | 2 + .../getting-started.component.html | 81 ++++++++----------- demo/src/app/home/home.component.html | 8 +- demo/src/app/home/home.component.spec.ts | 9 +-- demo/src/app/shared/shared.module.ts | 4 +- demo/webpack.server.config.js | 7 +- 11 files changed, 138 insertions(+), 130 deletions(-) diff --git a/demo/angular.json b/demo/angular.json index 47479159..3b809f2f 100644 --- 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 index f5210528..5f14b9a0 100644 --- a/demo/package-lock.json +++ b/demo/package-lock.json @@ -979,19 +979,19 @@ } }, "@angular-devkit/schematics": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.8.3.tgz", - "integrity": "sha512-NzsRc0O6nlwCviynZbbkrSWPvTSICviqyYxCXkmEkrbiXqvvahJjSQ/sXQQV0TRkgyTFdhnDF4WIwpeJM4UDeg==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-0.8.4.tgz", + "integrity": "sha512-Wt2JE/PnwtJiy8yCPEKP//1FnCumXiXX3HU/FosWufDtMga3qc2MWFwrNWlm4GCbpfNbBXj0LuJwfcwi27Hhdg==", "dev": true, "requires": { - "@angular-devkit/core": "0.8.3", + "@angular-devkit/core": "0.8.4", "rxjs": "~6.2.0" }, "dependencies": { "@angular-devkit/core": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.8.3.tgz", - "integrity": "sha512-2KHt5osMs3zACYXev20ZU5SXdWoinoKwZkj2caj2LCj9W7QNHmsz34QvaygNq7YdJzF3jkXkdy0GSUgUgDke0w==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.8.4.tgz", + "integrity": "sha512-oqMHezbIZMApud9JZDupWaxJeczTA17hLFGJ1qyAaPBRADtjnuguygXLcBLzYYAhzHKstrHwPJ4R1jj3oG28Ow==", "dev": true, "requires": { "ajv": "~6.4.0", @@ -1369,16 +1369,16 @@ } }, "@angular/cli": { - "version": "6.2.3", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.2.3.tgz", - "integrity": "sha512-6cKPEwtVXWRipDcWmJns32TY9LmbsUPhzWh/y7DLW+FzzJv/5amX1/mdMqUS0hTdq4gKm7hZ/muVx6bLooVPxA==", + "version": "6.2.4", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-6.2.4.tgz", + "integrity": "sha512-Jl902wCgiV/tI3QM4W6aadEb2LPIS0t30wfAr+ikz7n2V3j3Ovf9iWM0ds4zZMreZfeoz4rCU/4FaKg1UbJvBA==", "dev": true, "requires": { - "@angular-devkit/architect": "0.8.3", - "@angular-devkit/core": "0.8.3", - "@angular-devkit/schematics": "0.8.3", - "@schematics/angular": "0.8.3", - "@schematics/update": "0.8.3", + "@angular-devkit/architect": "0.8.4", + "@angular-devkit/core": "0.8.4", + "@angular-devkit/schematics": "0.8.4", + "@schematics/angular": "0.8.4", + "@schematics/update": "0.8.4", "json-schema-traverse": "^0.4.1", "opn": "^5.3.0", "rxjs": "~6.2.0", @@ -1388,19 +1388,19 @@ }, "dependencies": { "@angular-devkit/architect": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.8.3.tgz", - "integrity": "sha512-cFku50grgEJPg1CZZ0DXt4CkA6WnV6zN3hCXzpWbOfc/Id923Mml/jsEaoByeXHsRqb5rIZKZAhz7R509ya8OQ==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.8.4.tgz", + "integrity": "sha512-Xg/HgFgE3zu1jwI6quCRaGQK0dWyaK2GOYp2n1a+yQ8E+yngQqFW1EsdQE9L8EV1XtVL8njunZ/oOEL/KI6Oxw==", "dev": true, "requires": { - "@angular-devkit/core": "0.8.3", + "@angular-devkit/core": "0.8.4", "rxjs": "~6.2.0" } }, "@angular-devkit/core": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.8.3.tgz", - "integrity": "sha512-2KHt5osMs3zACYXev20ZU5SXdWoinoKwZkj2caj2LCj9W7QNHmsz34QvaygNq7YdJzF3jkXkdy0GSUgUgDke0w==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.8.4.tgz", + "integrity": "sha512-oqMHezbIZMApud9JZDupWaxJeczTA17hLFGJ1qyAaPBRADtjnuguygXLcBLzYYAhzHKstrHwPJ4R1jj3oG28Ow==", "dev": true, "requires": { "ajv": "~6.4.0", @@ -2099,20 +2099,20 @@ "dev": true }, "@schematics/angular": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.8.3.tgz", - "integrity": "sha512-kAax08neZQhIsWfqnNdmpSekWbLku+po+1ndfxOMDIhQOAgS/3QTc2mxfSRz/JyQMw1UMSDiXHG8F2Q7gkFIZw==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-0.8.4.tgz", + "integrity": "sha512-a85I7I7gYsmHRRnoNsCAa8ZlznIqnFjnOabVO6Z41XjUh57kOeWfLl7BQpd1CubvHu7q+juQXjBu1J+F4H/cOw==", "dev": true, "requires": { - "@angular-devkit/core": "0.8.3", - "@angular-devkit/schematics": "0.8.3", + "@angular-devkit/core": "0.8.4", + "@angular-devkit/schematics": "0.8.4", "typescript": ">=2.6.2 <2.10" }, "dependencies": { "@angular-devkit/core": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.8.3.tgz", - "integrity": "sha512-2KHt5osMs3zACYXev20ZU5SXdWoinoKwZkj2caj2LCj9W7QNHmsz34QvaygNq7YdJzF3jkXkdy0GSUgUgDke0w==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.8.4.tgz", + "integrity": "sha512-oqMHezbIZMApud9JZDupWaxJeczTA17hLFGJ1qyAaPBRADtjnuguygXLcBLzYYAhzHKstrHwPJ4R1jj3oG28Ow==", "dev": true, "requires": { "ajv": "~6.4.0", @@ -2474,13 +2474,13 @@ } }, "@schematics/update": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.8.3.tgz", - "integrity": "sha512-Cf9cRimaPd8s5ew8uT1EUFfmoYm3YUDFPyDKZUuNZS3+OU/j1HMGpGBsuDOvjqA5zB1V3B0OvyfNFOhJem35xg==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.8.4.tgz", + "integrity": "sha512-iJkJZurP0FV1PPRUBmlrxxdp4JgDnzm573y4WAnleHb5IJlDME79WoGC8wNemxeuHQUMvZbZQrzgmdmzqU83GA==", "dev": true, "requires": { - "@angular-devkit/core": "0.8.3", - "@angular-devkit/schematics": "0.8.3", + "@angular-devkit/core": "0.8.4", + "@angular-devkit/schematics": "0.8.4", "npm-registry-client": "^8.5.1", "rxjs": "~6.2.0", "semver": "^5.3.0", @@ -2488,9 +2488,9 @@ }, "dependencies": { "@angular-devkit/core": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.8.3.tgz", - "integrity": "sha512-2KHt5osMs3zACYXev20ZU5SXdWoinoKwZkj2caj2LCj9W7QNHmsz34QvaygNq7YdJzF3jkXkdy0GSUgUgDke0w==", + "version": "0.8.4", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-0.8.4.tgz", + "integrity": "sha512-oqMHezbIZMApud9JZDupWaxJeczTA17hLFGJ1qyAaPBRADtjnuguygXLcBLzYYAhzHKstrHwPJ4R1jj3oG28Ow==", "dev": true, "requires": { "ajv": "~6.4.0", diff --git a/demo/package.json b/demo/package.json index 235a3596..07b51a12 100644 --- 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 index 41df3327..c03891cd 100644 --- 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 index 8d62554e..cd7110f9 100644 --- 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 index 2942b686..34bf830d 100644 --- a/demo/src/app/app.server.module.ts +++ b/demo/src/app/app.server.module.ts @@ -4,6 +4,7 @@ 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: [ @@ -11,6 +12,7 @@ import {ModuleMapLoaderModule} from '@nguniversal/module-map-ngfactory-loader'; // by the ServerModule from @angular/platform-server. AppModule, ServerModule, + FlexLayoutServerModule, ModuleMapLoaderModule ], // Since the bootstrapped component is not inherited from your diff --git a/demo/src/app/getting-started/getting-started.component.html b/demo/src/app/getting-started/getting-started.component.html index 2f7ccc35..20e6f866 100644 --- a/demo/src/app/getting-started/getting-started.component.html +++ b/demo/src/app/getting-started/getting-started.component.html @@ -21,7 +21,7 @@

Getting Started

-
+