Angular Universal (SSR) 对于使用自定义 HTTP (rxjs ajax, axios) 的请求不感知,这是因为 Angular Universal 在服务器端渲染时使用的是 Angular 的 HttpClient,并不支持外部的 HTTP 客户端库。
解决这个问题的一个常见方法是在服务器端使用 Angular 的 HttpClient 来发送请求,以保持一致性。下面是一个示例代码:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class ServerRequestService {
constructor(private http: HttpClient) {}
get(url: string): Observable {
return this.http.get(url);
}
post(url: string, data: any): Observable {
return this.http.post(url, data);
}
}
import 'zone.js/dist/zone-node';
import { enableProdMode } from '@angular/core';
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
import { AppServerModule } from './src/app/app.server.module';
import { ServerRequestService } from './src/app/server-request.service';
enableProdMode();
export default createServerRenderer(params => {
const serverRequestService = new ServerRequestService();
const baseUrl = params.baseUrl;
const url = params.url;
const absoluteUrl = `${baseUrl}${url}`;
return serverRequestService.get(absoluteUrl)
.map(response => {
const renderResult: RenderResult = {
html: response,
globals: { AppServerModule }
};
return renderResult;
});
});
import { NgModule } from '@angular/core';
import { ServerRequestService } from './server-request.service';
@NgModule({
providers: [
ServerRequestService
]
})
export class AppServerModule {}
通过这种方法,服务器端和客户端都将使用相同的请求服务,保持一致性,并且可以在服务器端渲染时使用 Angular Universal (SSR)。