Use HttpWithStateTransferModule in Angular template

Author: SteveSandersonMS

templates/AngularSpa/ClientApp/app/app.module.shared.ts

@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { HttpModule } from '@angular/http';
 import { RouterModule } from '@angular/router';
+import { HttpWithStateTransferModule } from 'aspnet-angular';
 
 import { AppComponent } from './components/app/app.component';
 import { NavMenuComponent } from './components/navmenu/navmenu.component';
@@ -21,6 +22,7 @@ import { CounterComponent } from './components/counter/counter.component';
     imports: [
         CommonModule,
         HttpModule,
+        HttpWithStateTransferModule,
         FormsModule,
         RouterModule.forRoot([
             { path: '', redirectTo: 'home', pathMatch: 'full' },

templates/AngularSpa/ClientApp/app/components/fetchdata/fetchdata.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { Http } from '@angular/http';
+import { HttpWithStateTransfer } from 'aspnet-angular';
 
 @Component({
     selector: 'fetchdata',
@@ -8,7 +8,7 @@ import { Http } from '@angular/http';
 export class FetchDataComponent {
     public forecasts: WeatherForecast[];
 
-    constructor(http: Http, @Inject('BASE_URL') baseUrl: string) {
+    constructor(http: HttpWithStateTransfer, @Inject('BASE_URL') baseUrl: string) {
         http.get(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
             this.forecasts = result.json() as WeatherForecast[];
         }, error => console.error(error));

templates/AngularSpa/ClientApp/boot.server.ts

@@ -6,6 +6,7 @@ import { enableProdMode, ApplicationRef, NgZone, ValueProvider } from '@angular/
 import { platformDynamicServer, PlatformState, INITIAL_CONFIG } from '@angular/platform-server';
 import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
 import { AppModule } from './app/app.module.server';
+import { HttpWithStateTransfer } from 'aspnet-angular';
 
 enableProdMode();
 
@@ -20,6 +21,7 @@ export default createServerRenderer(params => {
         const appRef: ApplicationRef = moduleRef.injector.get(ApplicationRef);
         const state = moduleRef.injector.get(PlatformState);
         const zone = moduleRef.injector.get(NgZone);
+        const http: HttpWithStateTransfer = moduleRef.injector.get(HttpWithStateTransfer);
 
         return new Promise<RenderResult>((resolve, reject) => {
             zone.onError.subscribe((errorInfo: any) => reject(errorInfo));
@@ -28,7 +30,8 @@ export default createServerRenderer(params => {
                 // completing the request in case there's an error to report
                 setImmediate(() => {
                     resolve({
-                        html: state.renderToString()
+                        html: state.renderToString(),
+                        globals: { ...http.stateForTransfer() }
                     });
                     moduleRef.destroy();
                 });

templates/AngularSpa/npm-shrinkwrap.json

@@ -20,6 +20,7 @@
     "@ngtools/webpack": "1.5.0",
     "@types/webpack-env": "1.13.0",
     "angular2-template-loader": "0.6.2",
+    "aspnet-angular": "^0.1.1",
     "aspnet-prerendering": "^3.0.1",
     "aspnet-webpack": "^2.0.1",
     "awesome-typescript-loader": "3.2.1",