add http-transfer mechanism (TrilonIO#179)

Closes TrilonIO#169
Closes TrilonIO#170

Author: MarkPieszak

Client/app/app.component.ts

@@ -7,6 +7,7 @@ import { LinkService } from './shared/link.service';
 
 // i18n support
 import { TranslateService } from '@ngx-translate/core';
+import { REQUEST } from './shared/constants/request';
 
 @Component({
     selector: 'app',
@@ -29,13 +30,18 @@ export class AppComponent implements OnInit, OnDestroy {
         private title: Title,
         private meta: Meta,
         private linkService: LinkService,
-        public translate: TranslateService
+        public translate: TranslateService,
+        @Inject(REQUEST) private request
     ) {
         // this language will be used as a fallback when a translation isn't found in the current language
         translate.setDefaultLang('en');
 
         // the lang to use, if the lang isn't available, it will use the current loader to get them
         translate.use('en');
+
+        console.log(`What's our REQUEST Object look like?`);
+        console.log(`The Request object only really exists on the Server, but on the Browser we can at least see Cookies`);
+        console.log(this.request);
     }
 
     ngOnInit() {

Client/app/app.module.ts

@@ -21,9 +21,9 @@ import { Ng2BootstrapComponent } from './containers/ng2-bootstrap-demo/ng2bootst
 import { LinkService } from './shared/link.service';
 import { ConnectionResolver } from './shared/route.resolver';
 import { ORIGIN_URL } from './shared/constants/baseurl.constants';
+import { TransferHttpModule } from '../modules/transfer-http/transfer-http.module';
 
 export function createTranslateLoader(http: Http, baseHref) {
-    console.log('\n\n\n New method? ' + baseHref);
     // Temporary Azure hack
     if (baseHref === null && typeof window !== 'undefined') {
         baseHref = window.location.origin;
@@ -41,13 +41,15 @@ export function createTranslateLoader(http: Http, baseHref) {
         HomeComponent,
         ChatComponent,
         Ng2BootstrapComponent
-    ],
+    ], 
     imports: [
         CommonModule,
         HttpModule,
         FormsModule,
         Ng2BootstrapModule.forRoot(), // You could also split this up if you don't want the Entire Module imported
 
+        TransferHttpModule, // Our Http TransferData method
+
         // i18n support
         TranslateModule.forRoot({
             loader: {

Client/app/browser-app.module.ts

@@ -8,6 +8,8 @@ import { SignalRModule, SignalRConfiguration } from 'ng2-signalr';
 import { ORIGIN_URL } from './shared/constants/baseurl.constants';
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
+import { REQUEST } from './shared/constants/request';
+import { BrowserTransferStateModule } from '../modules/transfer-state/browser-transfer-state.module';
 
 export function createConfig(): SignalRConfiguration {
     const signalRConfig = new SignalRConfiguration();
@@ -24,23 +26,35 @@ export function getOriginUrl() {
   return window.location.origin;
 }
 
+export function getRequest() {
+  // the Request object only lives on the server
+  return { cookie: document.cookie };
+}
+
 @NgModule({
     bootstrap: [AppComponent],
     imports: [
         BrowserModule.withServerTransition({
             appId: 'my-app-id' // make sure this matches with your Server NgModule
         }),
         BrowserAnimationsModule,
+        BrowserTransferStateModule,
+
         // Our Common AppModule
         AppModule,
 
         SignalRModule.forRoot(createConfig)
     ],
     providers: [
         {
-            // We need this for our Http calls since they'll be using APP_BASE_HREF (since the Server requires Absolute URLs)
+            // We need this for our Http calls since they'll be using an ORIGIN_URL provided in main.server
+            // (Also remember the Server requires Absolute URLs)
             provide: ORIGIN_URL,
             useFactory: (getOriginUrl)
+        }, {
+            // The server provides these in main.server
+            provide: REQUEST,
+            useFactory: (getRequest)
         }
     ]
 })

Client/app/containers/users/users.component.ts

@@ -7,6 +7,7 @@ import { APP_BASE_HREF } from '@angular/common';
 
 import { Http, URLSearchParams } from '@angular/http';
 import { ORIGIN_URL } from '../../shared/constants/baseurl.constants';
+import { TransferHttp } from '../../../modules/transfer-http/transfer-http';
 
 @Component({
     selector: 'fetchdata',
@@ -33,16 +34,24 @@ export class UsersComponent implements OnInit {
 
     // Use "constructor"s only for dependency injection
     constructor(
-        private http: Http,
+        private transferHttp: TransferHttp, // Use only for GETS that you want re-used between Server render -> Client render
+        private http: Http, // Use for everything else
         @Inject(ORIGIN_URL) private baseUrl: string
     ) { }
 
     // Here you want to handle anything with @Input()'s @Output()'s
     // Data retrieval / etc - this is when the Component is "ready" and wired up
     ngOnInit() {
-        this.newUserName = "";
-        this.http.get(`${this.baseUrl}/api/user/all`).map(res => res.json()).subscribe(result => {
-            console.log(result);
+
+        this.newUserName = '';
+
+        // ** TransferHttp example / concept **
+        //    - Here we make an Http call on the server, save the result on the window object and pass it down with the SSR,
+        //      The Client then re-uses this Http result instead of hitting the server again!
+
+        //  NOTE : transferHttp also automatically does .map(res => res.json()) for you, so no need for these calls
+        this.transferHttp.get(`${this.baseUrl}/api/user/all`).subscribe(result => {
+            console.log('TransferHttp [GET] /api/user/allresult', result);
             this.users = result as IUser[];
         });
     }
@@ -52,9 +61,8 @@ export class UsersComponent implements OnInit {
             if (result.ok) {
                 let position = this.users.indexOf(user);
                 this.users.splice(position, 1);
-            }
-            else {
-                alert("There was an issue, Could not delete user");
+            } else {
+                alert('There was an issue, Could not delete user');
             }
         });
     }
@@ -65,8 +73,9 @@ export class UsersComponent implements OnInit {
         urlSearchParams.append('name', user.name);
 
         this.http.put(`${this.baseUrl}/api/user/update`, urlSearchParams).subscribe(result => {
-            if (!result.ok) {
-                alert("There was an issue, Could not edit user");
+          console.log('result: ', result);
+            if (!result) {
+                alert('There was an issue, Could not edit user');
             }
         });
     }
@@ -76,12 +85,11 @@ export class UsersComponent implements OnInit {
         urlSearchParams.append('name', newUserName);
 
         this.http.post(`${this.baseUrl}/api/user/insert`, urlSearchParams).subscribe(result => {
-            if (result.ok) {
+            if (result) {
                 this.users.push(result.json());
-                this.newUserName = "";
-            }
-            else {
-                alert("There was an issue, Could not edit user");
+                this.newUserName = '';
+            } else {
+                alert('There was an issue, Could not edit user');
             }
         });
     }

Client/app/server-app.module.ts

@@ -1,31 +1,34 @@
 import { NgModule } from '@angular/core';
 import { ServerModule } from '@angular/platform-server';
 import { BrowserModule } from '@angular/platform-browser';
-import { NoopAnimationsModule  } from '@angular/platform-browser/animations';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppModule } from './app.module';
 import { AppComponent } from './app.component';
-
+import { ServerTransferStateModule } from '../modules/transfer-state/server-transfer-state.module';
+import { TransferState } from '../modules/transfer-state/transfer-state';
 
 @NgModule({
-    bootstrap: [ AppComponent ],
-    imports: [
-        BrowserModule.withServerTransition({
-            appId: 'my-app-id' // make sure this matches with your Browser NgModule
-        }),
-        ServerModule,
-        NoopAnimationsModule,
-        
-        // Our Common AppModule
-        AppModule 
-    ]
+  bootstrap: [AppComponent],
+  imports: [
+    BrowserModule.withServerTransition({
+      appId: 'my-app-id' // make sure this matches with your Browser NgModule
+    }),
+    ServerModule,
+    NoopAnimationsModule,
+
+    ServerTransferStateModule,
+
+    // Our Common AppModule
+    AppModule
+  ]
 })
 export class ServerAppModule {
 
-    // constructor(private transferState: TransferState) { }
+  constructor(private transferState: TransferState) { }
 
-    // // Gotcha
-    // ngOnBootstrap = () => {
-    //     this.transferState.inject();
-    // }
+  // Gotcha (needs to be an arrow function)
+  ngOnBootstrap = () => {
+    this.transferState.inject();
+  }
 }

Client/app/shared/constants/request.ts

@@ -0,0 +1,3 @@
+import { InjectionToken } from '@angular/core';
+
+export const REQUEST = new InjectionToken<string>('REQUEST');

Client/main.server.aot.ts

@@ -9,32 +9,33 @@ import { ORIGIN_URL } from './app/shared/constants/baseurl.constants';
 // Grab the (Node) server-specific NgModule
 import { ServerAppModuleNgFactory } from './ngfactory/app/server-app.module.ngfactory';
 // Temporary * the engine will be on npm soon (`@universal/ng-aspnetcore-engine`)
-import { ngAspnetCoreEngineAoT } from './polyfills/temporary-aspnetcore-engine';
+import { ngAspnetCoreEngine, IEngineOptions, createTransferScript } from './polyfills/temporary-aspnetcore-engine';
 
 enableProdMode();
 
 export default createServerRenderer(params => {
 
-    // Platform-server provider configuration
-    const providers = [
-        {
-            provide: INITIAL_CONFIG,
-            useValue: {
-                document: '<app></app>', // Our Root application document
-                url: params.url
-            }
-        }, {
-            provide: ORIGIN_URL,
-            useValue: params.origin
-        }
-    ];
+  // Platform-server provider configuration
+  const setupOptions: IEngineOptions = {
+    appSelector: '<app></app>',
+    ngModule: ServerAppModuleNgFactory,
+    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 ngAspnetCoreEngineAoT(providers, ServerAppModuleNgFactory).then(response => {
-        return ({
-            html: response.html,
-            globals: response.globals
-        });
+  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'
     });
+
+    return ({
+      html: response.html,
+      globals: response.globals
+    });
+  });
 });
 
 /* -------- THIS FILE IS TEMPORARY and will be gone when @ngtools/webpack can handle dual files (w server) ---------- */

Client/main.server.ts

@@ -9,30 +9,32 @@ import { ORIGIN_URL } from './app/shared/constants/baseurl.constants';
 // Grab the (Node) server-specific NgModule
 import { ServerAppModule } from './app/server-app.module';
 // Temporary * the engine will be on npm soon (`@universal/ng-aspnetcore-engine`)
-import { ngAspnetCoreEngine } from './polyfills/temporary-aspnetcore-engine';
+import { ngAspnetCoreEngine, IEngineOptions, createTransferScript } from './polyfills/temporary-aspnetcore-engine';
 
 enableProdMode();
 
-export default createServerRenderer(params => {
+export default createServerRenderer((params: BootFuncParams) => {
 
-    // Platform-server provider configuration
-    const providers = [
-        {
-            provide: INITIAL_CONFIG,
-            useValue: {
-                document: '<app></app>', // Our Root application document
-                url: params.url
-            }
-        }, {
-            provide: ORIGIN_URL,
-            useValue: params.origin
-        }
-    ];
+  // Platform-server provider configuration
+  const setupOptions: IEngineOptions = {
+    appSelector: '<app></app>',
+    ngModule: ServerAppModule,
+    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(providers, ServerAppModule).then(response => {
-        return ({
-            html: response.html,
-            globals: response.globals
-        });
+  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,
+      globals: response.globals
+    });
+  });
 });

Client/modules/transfer-http/transfer-http.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Http, HttpModule } from '@angular/http';
+import { TransferHttp } from './transfer-http';
+
+@NgModule({
+  providers: [
+    TransferHttp
+  ]
+})
+export class TransferHttpModule {}