feat(preboot): add preboot functionality & fix aspnetcore-engine (TrilonIO#401)

Closes TrilonIO#363

Author: MarkPieszak

ClientApp/app/app.module.browser.ts

@@ -11,6 +11,8 @@ import { AppComponent } from './app.component';
 import { REQUEST } from './shared/constants/request';
 import { BrowserTransferStateModule } from '../modules/transfer-state/browser-transfer-state.module';
 
+import { BrowserPrebootModule } from 'preboot/browser';
+
 export function createConfig(): SignalRConfiguration {
     const signalRConfig = new SignalRConfiguration();
 
@@ -37,6 +39,7 @@ export function getRequest() {
         BrowserModule.withServerTransition({
             appId: 'my-app-id' // make sure this matches with your Server NgModule
         }),
+        BrowserPrebootModule.replayEvents(),
         BrowserAnimationsModule,
         BrowserTransferStateModule,
 

ClientApp/app/app.module.server.ts

@@ -8,13 +8,16 @@ import { AppComponent } from './app.component';
 import { ServerTransferStateModule } from '../modules/transfer-state/server-transfer-state.module';
 import { TransferState } from '../modules/transfer-state/transfer-state';
 
+import { ServerPrebootModule } from 'preboot/server';
+
 @NgModule({
   bootstrap: [AppComponent],
   imports: [
     BrowserModule.withServerTransition({
       appId: 'my-app-id' // make sure this matches with your Browser NgModule
     }),
     ServerModule,
+    ServerPrebootModule.recordEvents({ appRoot: 'app' }),
     NoopAnimationsModule,
 
     ServerTransferStateModule,

ClientApp/polyfills/temporary-aspnetcore-engine.ts

@@ -122,6 +122,7 @@ export function ngAspnetCoreEngine(
 
                 // Strip out Styles / Meta-tags / Title
                 const STYLES = [];
+                const SCRIPTS = [];
                 const META = [];
                 const LINKS = [];
                 let TITLE = '';
@@ -148,6 +149,12 @@ export function ngAspnetCoreEngine(
                     TITLE = element.children[0].data;
                   }
 
+                  if (element.name === 'script') {
+                    SCRIPTS.push(
+                      `<script>${element.children[0].data}</script>`
+                    );
+                  }
+
                   // Broken after 4.0 (worked in rc)
                   // if (element.name === 'style') {
                   //   let styleTag = '<style ';
@@ -188,6 +195,7 @@ export function ngAspnetCoreEngine(
                   globals: {
                     styles: STYLES_STRING,
                     title: TITLE,
+                    scripts: SCRIPTS.join(' '),
                     meta: META.join(' '),
                     links: LINKS.join(' ')
                   }

Server/Controllers/HomeController.cs

@@ -54,6 +54,7 @@ public async Task<IActionResult> Index()
       ViewData["SpaHtml"] = prerenderResult.Html; // our <app> 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 = {};

Views/Shared/_Layout.cshtml

@@ -28,6 +28,7 @@
 
     <!-- Here we're passing down any data to be used by grabbed and parsed by Angular -->
     @Html.Raw(ViewData["TransferData"])
+    @Html.Raw(ViewData["Scripts"])
 
     @RenderSection("scripts", required: false)
 

package.json

@@ -48,7 +48,7 @@
     "ng2-signalr": "2.0.4",
     "ngx-bootstrap": "^2.0.0-beta.2",
     "node-sass": "^4.5.2",
-    "preboot": "^4.5.2",
+    "preboot": "^5.0.0",
     "raw-loader": "^0.5.1",
     "rimraf": "^2.6.1",
     "rxjs": "^5.0.1",