使用this article and templates,我构建了一个由ASP.NET Core支持的Angular 2应用程序。 Serverside预渲染工作,直到HTTP请求获取一些数据。
简单示例:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import { SchoolSubject, TimetableDay, TimetableSubject } from '../components/timetable/timetable-models';
@Injectable()
export class TimetableService {
private baseUrl: string = '/ClassBook/Timetable/';
constructor(private http: Http) { }
getAllSubjects(): Observable<TimetableSubject[]> {
return this.http.get(this.baseUrl + 'GetAllSubjects')
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
console.log('Body: ' + JSON.stringify(body));
return body.data || {};
}
private handleError(error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || '';
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error("ERROR: "+errMsg);
return Observable.throw(errMsg);
}
}
我从时间表组件中调用getAllSubjects
方法。当我在浏览器中打开它,就像在主组件中打开应用程序一样,然后点击指向时间表组件的链接,使其在浏览器中呈现而无需服务器端预渲染,它可以正常工作。
但是当我直接打开时间表组件的URL以便它被服务器预渲染时,我得到一个超时:
应用程序抛出了未处理的异常。 System.Exception:调用Node模块失败,错误:Prerendering 因为启动功能在30000ms后超时 'Areas / ClassBook / ClientApp / dist / main-server'返回了一个承诺 没有解决或拒绝。始终确保您的启动功能 解决或拒绝其承诺。您可以更改超时值 使用'asp-prerender-timeout'标签助手。在 Microsoft.AspNetCore.NodeServices.HostingModels.HttpNodeInstance.d__7`1.MoveNext()
只有在发出HTTP请求时才会发生。使用没有HTTP请求的组件(如示例模板中的/ home或/ counter)正常工作。我试图启用debugging of serverside JS,但似乎也不起作用。结果是一个空的调试控制台或异常,在捕获请求后连接已丢失。
开发机器是Windows 10 Pro,两者都正常工作。但是应用程序应该使用来自Microsoft的官方映像在docker-container内部运行,并且会发生超时。