[英]Angular Universal Prerendering with httpClient for getting data from /static/data.json content
我只是试图使用Angular Universal预呈现一个组件,该组件使用httpClient从app本身的/static
文件夹中获取数据。
我想这个文件是不可访问的,因为在预呈现时应用程序没有在任何服务器上运行。 获取路径是相对的。 稍后在远程服务器上获取文件是可行的,但是在预渲染期间“remoteserver”是不可用的? 怎么能这样做?
我得到一个由httpClient.get()
引起的错误[错误]。 捕获错误错误消息为空。
基本上我有一个服务
doReqeust() = {
return this.httpClient.get("./static/get.json")
}
并在组件中
onInit() {
this.data = this.myService.doRequest();
}
和视图比通过异步管道绑定
{{ data.response.title | async }}
static是项目中的静态文件夹。
您可以访问assets文件夹中的静态文件
请注意,使用angular universal时,请求URL必须是绝对的。 请求URL将是执行预呈现的Web服务器之一(例如http:// localhost:4000 。
Service.ts
import {Inject, Injectable, Optional, PLATFORM_ID} from '@angular/core';
import {isPlatformBrowser} from "@angular/common";
import {HttpClient} from "@angular/common/http";
constructor(private http: HttpClient, @Inject(PLATFORM_ID) private platformId: Object,
@Optional() @Inject('serverUrl') protected serverUrl: string)
{
}
doRequest()
{
let baseUrl = isPlatformBrowser(this.platformId)? '' : this.serverUrl;
return this.http.get(baseUrl + '/assets/static/file.json');
您需要为serverUrl提供值。 这应该在你的后端完成。 假设您正在使用nodejs
server.ts
extraProviders: [
//...
{
provide: 'serverUrl',
useValue: `http://localhost:${NODEJS_PORT}`
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.