Угловой универсальный предварительный рендеринг с httpClient для получения данных из содержимого /static/data.json

Я просто пытаюсь предварительно отобразить компонент с помощью Angular Universal, который извлекает данные с помощью httpClient из папки /static в самом приложении.

  1. Как правильно использовать httpClient в Angular Universal?
  2. Можно ли получить доступ к статическим ресурсам из проекта и получить их с помощью httpClient во время предварительного рендеринга?

Я предполагаю, что файл недоступен, поскольку приложение не работает ни на одном сервере во время предварительного рендеринга. Путь получения считается относительным. Получение файла позже на удаленном сервере работает, однако «удаленный сервер» недоступен во время предварительного рендеринга или? Как это можно заставить работать?

Я получаю сообщение об ошибке [ERROR], вызванное ошибкой httpClient.get(). При обнаружении ошибки сообщение об ошибке пусто.

в основном у меня есть сервис

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

и в компоненте

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

и представление, чем оно связано через асинхронный канал

{{ data.response.title | async }}

где static является статической папкой внутри проекта.


angular angular-universal angular-http-interceptors angular-httpclient angular-http
person Manuel    schedule 18.01.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы можете получить доступ к статическим файлам в папке активов

Обратите внимание, что при использовании angular universal URL-адреса запросов должны быть абсолютными. URL-адрес запроса будет URL-адресом веб-сервера, выполняющего предварительную визуализацию (например, 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}`
  },
person David    schedule 19.01.2018