使用angular2服務器渲染

我有一個簡單的組件，從服務器檢索數據時，如何從REST服務的數據。使用angular2服務器渲染

@Component({ 
    selector: 'app', 
    template: ` 
    <h1>HEllo {{category}}</h1> 
    `, 
    providers: [ 
    HTTP_PROVIDERS, 
    CategoryService 
    ] 
}) 
export class App implements OnInit { 
    private category; 
    constructor(private _categoryService: CategoryService){} 
    ngOnInit() { 
    this._categoryService.getCategories().subscribe(categories => this.category = categories.name); 
    } 
}

我的服務看起來像

@Injectable() 
export default class CategoryService { 
    constructor(private http: Http){} 

    private _categoriesUrl = 'http://localhost:3000/api/photo'; 
    getCategories() { 
    return this.http.get(this._categoriesUrl) 
        .map(res => return res.json().data;) 
        .do(data => console.log(data)) 
        .catch(this.handleError); 
    } 

    private handleError(error: Response) { 
    return Observable.throw(error.json().error || 'Server error'); 
    } 
}

它工作得很好，當我使其在客戶端，但是當我使用angular2的通用預覽渲染它在服務器端，它拋出一個錯誤

XMLHttpRequest is not defined

我怎樣才能使它與服務器端渲染？

來源

2016-03-15 Dymich

除了ANSWER JUST提示： - 它能夠更好地提供'HTTP_PROVIDERS'在自舉，而不是在每個部件提供的時間。 –

您需要添加

providers: [ 
    NODE_HTTP_PROVIDERS, 
    CategoryService 
    ]

參見https://github.com/angular/universal/issues/292

我認爲這將是最好添加NODE_HTTP_PROVIDERS到bootstrap(AppComponent, [NODE_HTTP_PROVIDERS])，而不是每一個（或一些部件），當你有一個很好的理由，要求除各個組件的Http的不同實例。

來源

2016-03-15 16:52:24

據我瞭解我有服務器呈現自舉時，在客戶端和'NODE_HTTP_PROVIDERS'從'angular2萬能-preview'自舉時添加'HTTP_PROVIDERS'從'angular2/http'。當我做這個變化的應用程序開始工作，但數據未取在服務器端，而不是請求的客戶端進行。它是否以這種方式工作？原因我期望該頁面應該完全加載到服務器端，並且不應該在客戶端進行請求。 – Dymich

對不起，我不知道服務器端渲染。我只是偶然發現了這個NODE_HTTP_PROVIDERS。 –

使用angular2服務器渲染

回答

相關問題