Question

我只想尝试使用Angular Universal预呈现一个组件，该组件使用httpClient从应用程序本身的/static文件夹中获取数据。

如何在Angular Universal中正确使用httpClient？
是否可以从项目中访问静态资源并在预渲染时使用httpClient获取它们？

我猜这个文件是不可访问的，因为在预呈现时应用程序没有在任何服务器上运行。获取路径是相对的。稍后在远程服务器上获取文件可以正常工作，但是＆＃34; remoteserver＆＃34;在预渲染期间不可用或？如何才能使这个工作？

我的错误[错误]是由httpClient.get()引起的。捕获错误时错误消息为空。

基本上我有服务

doReqeust() = {
  return this.httpClient.get("./static/get.json")
}

并在组件中

onInit() {
  this.data = this.myService.doRequest();
}

和视图比通过异步管道绑定

{{ data.response.title | async }}

static是项目中的静态文件夹。

Answer 1

您可以访问资产文件夹中的静态文件

请注意，使用angular universal时，请求网址必须是绝对的。请求网址将是执行预呈现的网络服务器之一（例如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}`
  },

使用httpClient进行Angular Universal Prerendering以从/static/data.json内容中获取数据

1 个答案: