Use HttpWithStateTransferModule in Angular template

This commit is contained in:
Steve Sanderson 2017-08-02 10:55:55 +01:00
Родитель 5f1450c9ba
Коммит 1287709feb
5 изменённых файлов: 14 добавлений и 3 удалений

Просмотреть файл

@ -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' },

Просмотреть файл

@ -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));

Просмотреть файл

@ -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();
});

5
templates/AngularSpa/npm-shrinkwrap.json сгенерированный
Просмотреть файл

@ -273,6 +273,11 @@
"from": "asn1.js@>=4.0.0 <5.0.0",
"resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.9.1.tgz"
},
"aspnet-angular": {
"version": "0.1.1",
"from": "aspnet-angular@0.1.1",
"resolved": "https://registry.npmjs.org/aspnet-angular/-/aspnet-angular-0.1.1.tgz"
},
"aspnet-prerendering": {
"version": "3.0.1",
"from": "aspnet-prerendering@3.0.1",

Просмотреть файл

@ -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",