feature(5.0): Upgrade to working copy of Angular 5.0 + Universal

Author: MarkPieszak

ClientApp/boot.server.PRODUCTION.ts

@@ -0,0 +1,38 @@
+import 'zone.js/dist/zone-node';
+import './polyfills/server.polyfills';
+import { enableProdMode } from '@angular/core';
+import { createServerRenderer } from 'aspnet-prerendering';
+
+// Grab the (Node) server-specific NgModule
+const { AppModuleNgFactory } = require('./app/app.module.server.ngfactory'); // <-- ignore this - this is Production only
+import { ngAspnetCoreEngine, IEngineOptions, createTransferScript } from '@nguniversal/aspnetcore-engine';
+
+enableProdMode();
+
+export default createServerRenderer((params) => {
+
+  // Platform-server provider configuration
+  const setupOptions: IEngineOptions = {
+    appSelector: '<app-root></app-root>',
+    ngModule: AppModuleNgFactory,
+    request: params,
+    providers: [
+      // Optional - Any other Server providers you want to pass
+      // (remember you'll have to provide them for the Browser as well)
+    ]
+  };
+
+  return ngAspnetCoreEngine(setupOptions).then(response => {
+
+    // Apply your transferData to response.globals
+    response.globals.transferData = createTransferScript({
+      someData: 'Transfer this to the client on the window.TRANSFER_CACHE {} object',
+      fromDotnet: params.data.thisCameFromDotNET // example of data coming from dotnet, in HomeController
+    });
+
+    return ({
+      html: response.html, // our <app-root> serialized
+      globals: response.globals // all of our styles/scripts/meta-tags/link-tags for aspnet to serve up
+    });
+  });
+});

ClientApp/tsconfig.app.json

@@ -8,6 +8,7 @@
   },
   "exclude": [
     "test.ts",
-    "**/*.spec.ts"
+    "**/*.spec.ts",
+    "boot.server.PRODUCTION.ts"
   ]
 }

Server/Controllers/HomeController.cs

@@ -19,15 +19,15 @@ public class HomeController : Controller
     [HttpGet]
     public async Task<IActionResult> Index()
     {
-      // var prerenderResult = await Request.BuildPrerender();
-
-      // ViewData["SpaHtml"] = prerenderResult.Html; // our <app-root /> from Angular
-      // ViewData["Title"] = prerenderResult.Globals["title"]; // set our <title> from Angular
-      // ViewData["Styles"] = prerenderResult.Globals["styles"]; // put styles in the correct place
-      // ViewData["Scripts"] = prerenderResult.Globals["scripts"]; // scripts (that were in our header)
-      // ViewData["Meta"] = prerenderResult.Globals["meta"]; // set our <meta> SEO tags
-      // ViewData["Links"] = prerenderResult.Globals["links"]; // set our <link rel="canonical"> etc SEO tags
-      // ViewData["TransferData"] = prerenderResult.Globals["transferData"]; // our transfer data set to window.TRANSFER_CACHE = {};
+      var prerenderResult = await Request.BuildPrerender();
+
+      ViewData["SpaHtml"] = prerenderResult.Html; // our <app-root /> from Angular
+      ViewData["Title"] = prerenderResult.Globals["title"]; // set our <title> from Angular
+      ViewData["Styles"] = prerenderResult.Globals["styles"]; // put styles in the correct place
+      ViewData["Scripts"] = prerenderResult.Globals["scripts"]; // scripts (that were in our header)
+      ViewData["Meta"] = prerenderResult.Globals["meta"]; // set our <meta> SEO tags
+      ViewData["Links"] = prerenderResult.Globals["links"]; // set our <link rel="canonical"> etc SEO tags
+      ViewData["TransferData"] = prerenderResult.Globals["transferData"]; // our transfer data set to window.TRANSFER_CACHE = {};
 
       return View();
     }

Views/Home/Index.cshtml

@@ -1,6 +1,8 @@
-<!-- @Html.Raw(ViewData["SpaHtml"]) -->
+<!-- Remove this if you want to remove Server-side rendering -->
+@Html.Raw(ViewData["SpaHtml"])
 
-<app-root></app-root>
+<!-- if you only want Client-side rendering uncomment this -->
+<!-- <app-root></app-root> -->
 
 <script src="~/dist/vendor.js" asp-append-version="true"></script>
 @section scripts {

package.json

@@ -19,7 +19,6 @@
     "@angular/animations": "^5.0.0",
     "@angular/common": "^5.0.0",
     "@angular/compiler": "^5.0.0",
-    "@angular/compiler-cli": "^5.0.0",
     "@angular/core": "^5.0.0",
     "@angular/forms": "^5.0.0",
     "@angular/http": "^5.0.0",
@@ -56,19 +55,20 @@
     "preboot": "^5.0.0",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.6.2",
-    "rxjs": "^5.4.3",
+    "rxjs": "^5.5.6",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
     "to-string-loader": "^1.1.5",
-    "typescript": "2.5.3",
+    "typescript": "~2.5.0",
     "url-loader": "^0.5.7",
     "webpack": "^3.6.0",
     "webpack-hot-middleware": "^2.19.1",
     "webpack-merge": "^4.1.0",
     "zone.js": "^0.8.17"
   },
   "devDependencies": {
-    "@angular/cli": "^1.5.0",
+    "@angular/cli": "^1.7.0-beta.1",
+    "@angular/compiler-cli": "^5.2.1",
     "@ngtools/webpack": "^1.9.0",
     "@types/chai": "^3.4.34",
     "@types/jasmine": "^2.5.37",

webpack.config.js

@@ -59,14 +59,17 @@ module.exports = (env) => {
         ] : [
             // new BundleAnalyzerPlugin(),
             // Plugins that apply in production builds only
-            // new webpack.optimize.UglifyJsPlugin(),
             new AngularCompilerPlugin({
               mainPath: path.join(__dirname, 'ClientApp/boot.browser.ts'),
               tsConfigPath: './tsconfig.json',
               entryModule: path.join(__dirname, 'ClientApp/app/app.module.browser#AppModule'),
               exclude: ['./**/*.server.ts']
-            })
-        ]),
+            }),
+            // new webpack.optimize.UglifyJsPlugin({
+            //   compress: false,
+            //   mangle: false
+            // })
+          ]),
         devtool: isDevBuild ? 'cheap-eval-source-map' : false,
         node: {
           fs: "empty"
@@ -76,7 +79,10 @@ module.exports = (env) => {
     // Configuration for server-side (prerendering) bundle suitable for running in Node
     const serverBundleConfig = merge(sharedConfig, {
         // resolve: { mainFields: ['main'] },
-        entry: { 'main-server': './ClientApp/boot.server.ts' },
+        entry: {
+          'main-server':
+          isDevBuild ? './ClientApp/boot.server.ts' : './ClientApp/boot.server.PRODUCTION.ts'
+        },
         plugins: [
             new webpack.DllReferencePlugin({
                 context: __dirname,
@@ -103,7 +109,7 @@ module.exports = (env) => {
             // }),
             // Plugins that apply in production builds only
             new AngularCompilerPlugin({
-              mainPath: path.join(__dirname, 'ClientApp/boot.server.ts'),
+              mainPath: path.join(__dirname, 'ClientApp/boot.server.PRODUCTION.ts'),
               tsConfigPath: './tsconfig.json',
               entryModule: path.join(__dirname, 'ClientApp/app/app.module.server#AppModule'),
               exclude: ['./**/*.browser.ts']