docs(aio): Upgrade server-side rendering example to Angular V6 (#23649)

PR Close #23649

aio/content/examples/universal/server.ts

@@ -17,7 +17,7 @@ const PORT = process.env.PORT || 4000;
 const DIST_FOLDER = join(process.cwd(), 'dist');
 
 // * 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');
 
 // Express Engine
 import { ngExpressEngine } from '@nguniversal/express-engine';
@@ -51,7 +51,7 @@ app.get('*.*', express.static(join(DIST_FOLDER, 'browser')));
 // #docregion navigation-request
 // All regular routes use the Universal engine
 app.get('*', (req, res) => {
-  res.render(join(DIST_FOLDER, 'browser', 'index.html'), { req });
+  res.render('index', { req });
 });
 // #enddocregion navigation-request
 

aio/content/examples/universal/webpack.server.config.js

@@ -5,8 +5,9 @@ module.exports = {
   entry: { server: './server.ts' },
   resolve: { extensions: ['.js', '.ts'] },
   target: 'node',
+  mode: 'none',
   // this makes sure we include node_modules and other 3rd party libraries
-  externals: [/(node_modules|main\..*\.js)/],
+  externals: [/node_modules/],
   output: {
     path: path.join(__dirname, 'dist'),
     filename: '[name].js'

aio/content/guide/universal.md

@@ -442,9 +442,9 @@ First add the _build_ and _serve_ commands to the `scripts` section of the `pack
 <code-example format="." language="ts">
 "scripts": {
     ...
-    "build:universal": "npm run build:client-and-server-bundles && npm run webpack:server",
+    "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
-    "serve:universal": "node dist/server.js",
+    "serve:ssr": "node dist/server",
-    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
+    "build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
     "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
     ...
 }
@@ -457,7 +457,7 @@ First add the _build_ and _serve_ commands to the `scripts` section of the `pack
 From the command prompt, type
 
 <code-example format="." language="bash">
-npm run build:universal
+npm run build:ssr
 </code-example>
 
 The Angular CLI compiles and bundles the universal app into two different folders, `browser` and `server`.
@@ -469,7 +469,7 @@ Webpack transpiles the `server.ts` file into Javascript.
 After building the application, start the server.
 
 <code-example format="." language="bash">
-npm run serve:universal
+npm run serve:ssr
 </code-example>
 
 The console window should say

aio/tools/example-zipper/customizer/package-json/base.json

@@ -6,13 +6,11 @@
     "@angular/animations",
     "@angular/common",
     "@angular/compiler",
-    "@angular/compiler-cli",
     "@angular/core",
     "@angular/forms",
     "@angular/http",
     "@angular/platform-browser",
     "@angular/platform-browser-dynamic",
-    "@angular/platform-server",
     "@angular/router",
     "@angular/upgrade",
     "angular-in-memory-web-api",
@@ -21,6 +19,8 @@
     "zone.js"
   ],
   "devDependencies": [
+    "@angular/compiler-cli",
+    "@angular/platform-server",
     "@types/jasmine",
     "@types/node",
     "jasmine-core",

aio/tools/example-zipper/customizer/package-json/universal.json

@@ -7,19 +7,20 @@
     { "name": "e2e", "command": "ng e2e" },
     { "name": "build:ssr", "command": "npm run build:client-and-server-bundles && npm run webpack:server" },
     { "name": "serve:ssr", "command": "node dist/server.js" },
-    { "name": "build:client-and-server-bundles", "command": "ng build --prod && ng build --prod --app 1 --output-hashing=false" },
+    { "name": "build:client-and-server-bundles", "command": "ng build --prod && ng run angular.io-example:server" },
     { "name": "webpack:server", "command": "webpack --config webpack.server.config.js --progress --colors" }
   ],
   "dependencies": [
     "@nguniversal/express-engine",
-    "@nguniversal/module-map-ngfactory-loader",
+    "@nguniversal/module-map-ngfactory-loader"
-    "ts-loader"
   ],
   "devDependencies": [
     "@angular/cli",
     "@types/jasminewd2",
     "jasmine-spec-reporter",
     "karma-coverage-istanbul-reporter",
-    "ts-node"
+    "ts-loader",
+    "ts-node",
+    "webpack-cli"
   ]
 }

aio/tools/example-zipper/exampleZipper.js

@@ -55,8 +55,8 @@ class ExampleZipper {
   }
 
   // rename a custom main.ts or index.html file
-  _renameFile(file) {
+  _renameFile(file, exampleType) {
-    if (/src\/main[-.]\w+\.ts$/.test(file)) {
+    if (/src\/main[-.]\w+\.ts$/.test(file) && exampleType !== 'universal') {
       return 'src/main.ts';
     }
 
@@ -158,7 +158,7 @@ class ExampleZipper {
     let zip = this._createZipArchive(outputFileName);
     fileNames.forEach((fileName) => {
       let relativePath = path.relative(exampleDirName, fileName);
-      relativePath = this._renameFile(relativePath);
+      relativePath = this._renameFile(relativePath, exampleType);
       let content = fs.readFileSync(fileName, 'utf8');
       let extn = path.extname(fileName).substr(1);
       // if we don't need to clean up the file then we can do the following.

aio/tools/examples/example-boilerplate.js

@@ -57,7 +57,7 @@ BOILERPLATE_PATHS.i18n = [
 
 BOILERPLATE_PATHS.universal = [
   ...cliRelativePath,
-  '.angular-cli.json',
+  'angular.json',
   'package.json'
 ];
 

aio/tools/examples/example-boilerplate.spec.js

@@ -100,7 +100,7 @@ describe('example-boilerplate tool', () => {
       );
       // for example
       expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/universal`, 'a/b', '../cli/tslint.json');
-      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/universal`, 'a/b', '.angular-cli.json');
+      expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/universal`, 'a/b', 'angular.json');
       expect(exampleBoilerPlate.copyFile).toHaveBeenCalledWith(`${boilerplateDir}/common`, 'c/d', 'src/styles.css');
     });
 

aio/tools/examples/shared/boilerplate/universal/.angular-cli.json

@@ -1,84 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "angular.io-example"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist/browser",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    },
-    {
-      "platform": "server",
-      "root": "src",
-      "outDir": "dist/server",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.server.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.server.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "component": {}
-  }
-}

aio/tools/examples/shared/boilerplate/universal/angular.json

@@ -0,0 +1,156 @@
+{
+  "$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular.io-example": {
+      "root": "",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/browser",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              },
+              {
+                "glob": "favicon.ico",
+                "input": "src",
+                "output": "/"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular.io-example:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular.io-example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "src/assets",
+                "output": "/assets"
+              },
+              {
+                "glob": "favicon.ico",
+                "input": "src",
+                "output": "/"
+              }
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "server": {
+          "builder": "@angular-devkit/build-angular:server",
+          "options": {
+            "outputPath": "dist/server",
+            "main": "src/main.server.ts",
+            "tsConfig": "src/tsconfig.server.json"
+          }
+        }
+      }
+    },
+    "angular.io-example-e2e": {
+      "root": "",
+      "projectType": "application",
+      "cli": {},
+      "schematics": {},
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "angular.io-example:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "cli": {},
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

aio/tools/examples/shared/boilerplate/universal/package.json

@@ -11,49 +11,52 @@
     "e2e": "ng e2e",
     "build:ssr": "npm run build:client-and-server-bundles && npm run webpack:server",
     "serve:ssr": "node dist/server.js",
-    "build:client-and-server-bundles": "ng build --prod && ng build --prod --app 1 --output-hashing=false",
+    "build:client-and-server-bundles": "ng build --prod && ng run angular.io-example:server",
     "webpack:server": "webpack --config webpack.server.config.js --progress --colors"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.0.0",
+    "@angular/animations": "^6.0.0-rc.5",
-    "@angular/common": "^5.0.0",
+    "@angular/common": "^6.0.0-rc.5",
-    "@angular/compiler": "^5.0.0",
+    "@angular/compiler": "^6.0.0-rc.5",
-    "@angular/compiler-cli": "^5.0.0",
+    "@angular/core": "^6.0.0-rc.5",
-    "@angular/core": "^5.0.0",
+    "@angular/forms": "^6.0.0-rc.5",
-    "@angular/forms": "^5.0.0",
+    "@angular/http": "^6.0.0-rc.5",
-    "@angular/http": "^5.0.0",
+    "@angular/platform-browser": "^6.0.0-rc.5",
-    "@angular/platform-browser": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
-    "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/router": "^6.0.0-rc.5",
-    "@angular/platform-server": "^5.0.0",
+    "angular-in-memory-web-api": "^0.6.0",
-    "@angular/router": "^5.0.0",
+    "@nguniversal/common": "6.0.0-rc.2",
-    "@nguniversal/express-engine": "^1.0.0-beta.3",
+    "@nguniversal/express-engine": "6.0.0-rc.2",
-    "@nguniversal/module-map-ngfactory-loader": "^1.0.0-beta.3",
+    "@nguniversal/module-map-ngfactory-loader": "6.0.0-rc.2",
-    "core-js": "^2.4.1",
+    "core-js": "^2.5.4",
-    "rxjs": "^5.4.2",
+    "rxjs": "6.0.0-uncanny-rc.7",
-    "ts-loader": "^3.1.1",
     "web-animations-js": "^2.3.1",
-    "zone.js": "^0.8.14"
+    "zone.js": "^0.8.24"    
   },
   "devDependencies": {
-    "@angular/cli": "1.5.0",
+    "@angular/cli": "~6.0.0-rc.4",
-    "@angular/compiler-cli": "^4.2.4",
+    "@angular/compiler-cli": "^6.0.0-rc.5",
-    "@angular/language-service": "^4.2.4",
+    "@angular/language-service": "^6.0.0-rc.5",
-    "@types/jasmine": "~2.8.0",
+    "@angular/platform-server": "^6.0.0-rc.5",
-    "@types/jasminewd2": "~2.0.2",
+    "@angular-devkit/build-angular": "~0.5.0",
-    "@types/node": "~6.0.60",
+    "@types/jasmine": "~2.8.6",
-    "codelyzer": "~3.1.1",
+    "@types/jasminewd2": "~2.0.3",
-    "jasmine-core": "~2.8.0",
+    "@types/node": "~8.9.4",
-    "jasmine-spec-reporter": "~4.1.0",
+    "codelyzer": "~4.2.1",
-    "karma": "~1.7.0",
+    "jasmine-core": "~2.99.1",
-    "karma-chrome-launcher": "~2.1.1",
+    "jasmine-marbles": "^0.3.1",
-    "karma-cli": "~1.0.1",
+    "jasmine-spec-reporter": "~4.2.1",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
+    "karma": "~2.0.0",
-    "karma-jasmine": "~1.1.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~1.4.2",
+    "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.1.2",
+    "protractor": "~5.3.0",
-    "ts-node": "~3.2.0",
+    "ts-loader": "^4.2.0",
-    "tslint": "~5.3.2",
+    "ts-node": "~5.0.1",
-    "typescript": "~2.3.3"
+    "tslint": "~5.9.1",
+    "typescript": "~2.7.2",
+    "webpack-cli": "^2.1.2"
   }
 }

aio/tools/examples/shared/package.json

@@ -21,30 +21,29 @@
     "@angular/animations": "^6.0.0-rc.5",
     "@angular/common": "^6.0.0-rc.5",
     "@angular/compiler": "^6.0.0-rc.5",
-    "@angular/compiler-cli": "^6.0.0-rc.5",
     "@angular/core": "^6.0.0-rc.5",
     "@angular/forms": "^6.0.0-rc.5",
     "@angular/http": "^6.0.0-rc.5",
     "@angular/platform-browser": "^6.0.0-rc.5",
     "@angular/platform-browser-dynamic": "^6.0.0-rc.5",
-    "@angular/platform-server": "^6.0.0-rc.5",
     "@angular/router": "^6.0.0-rc.5",
     "@angular/service-worker": "^6.0.0-rc.5",
     "@angular/upgrade": "^6.0.0-rc.5",
-    "@nguniversal/express-engine": "^1.0.0-beta.3",
+    "@nguniversal/express-engine": "6.0.0-rc.2",
-    "@nguniversal/module-map-ngfactory-loader": "^1.0.0-beta.3",
+    "@nguniversal/module-map-ngfactory-loader": "6.0.0-rc.2",
     "angular-in-memory-web-api": "^0.6.0",
     "core-js": "^2.5.4",
     "express": "^4.14.1",
     "rxjs": "6.0.0-uncanny-rc.7",
     "systemjs": "0.19.39",
-    "ts-loader": "^3.1.1",
     "web-animations-js": "^2.3.1",
     "zone.js": "^0.8.24"
   },
   "devDependencies": {
     "@angular/cli": "6.0.0-rc.4",
+    "@angular/compiler-cli": "^6.0.0-rc.5",
     "@angular/language-service": "^6.0.0-rc.5",
+    "@angular/platform-server": "^6.0.0-rc.5",
     "@angular-devkit/build-angular": "~0.5.0",
     "@types/angular": "^1.5.16",
     "@types/angular-animate": "^1.5.5",
@@ -85,9 +84,11 @@
     "rollup-plugin-node-resolve": "2.0.0",
     "rollup-plugin-uglify": "^1.0.1",
     "source-map-explorer": "^1.3.2",
+    "ts-loader": "^4.2.0",
     "ts-node": "^5.0.1",
     "tslint": "^5.9.1",
-    "typescript": "2.7.2"
+    "typescript": "2.7.2",
+    "webpack-cli": "^2.0.14"
   },
   "repository": {}
 }