Как загрузить json при рендеринге на стороне сервера с помощью angular universal

Я создаю универсальное приложение angular2 для университетского проекта для своей дипломной работы. Я хочу, чтобы это приложение отображалось на сервере с помощью angular universal. Как я могу загрузить файлы .json на сервер? В моей версии без рендеринга на стороне сервера я использую сервис для получения jsons с запросом http.get следующим образом:

@Injectable()
export class VideoService {

private movieSubject: BehaviorSubject<Video[]> = new BehaviorSubject<Video[]>([]);
  movies$: Observable<Video[]> = this.movieSubject.asObservable();

constructor(private http : Http) {
    this.http.get('./json/movies/movies.json').subscribe(
      res => this.movieSubject.next(res.json()),
      error => console.error(error)
    )
}
}

В моем компоненте я получаю json со следующим кодом:

movieInfos: MovieInfos;

  constructor(private movieService: MovieService) {
    movieService.movies$.subscribe(
      infos => this.movieInfos = infos,
      error => console.error(error)
    );
  }

И в шаблоне я использую приведенный ниже код для ввода данных в другой компонент:

<app-info-site *ngIf="movieInfos" [movieInfos]="movieInfos"></app-info-site>

Когда я использую этот код с угловым универсальным, он все еще работает, но часть сайта, которая принадлежит json, загружается в первый раз на клиенте, и из-за ngIf сервер игнорирует эту часть кода, поэтому я получаю неполный .html файл с сервера. Как я могу загрузить это на сервер, чтобы получить оттуда полный сайт .html?

PS: я совершенно новичок в angular2 и рендеринге на стороне сервера.


node.js json angular angular-universal server-side-rendering
person m8xp0w3r    schedule 17.02.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Во-первых, я бы порекомендовал вам перейти на Angular4, поскольку рендеринг на стороне сервера теперь является частью Angular4, а Angular Universal как таковой не требуется...

Вы также можете проверить http://rajdeepdeb.me/angular-server-side-rendering-with-a-simple-node-server/

Чтобы ответить в вашей существующей структуре, вы должны переместить свои http-вызовы из конструктора в ngOnInit, реализовав OnInit из

import { OnInit } from '@angular/core';

export class YourComponent implements OnInit {
    ...other variable and functions...
    ngOnInit() {
        this.http.get('./json/movies/movies.json').subscribe(
            res => this.movieSubject.next(res.json()),
            error => console.error(error)
        );
    }
}

Дайте мне знать, если вам нужна какая-либо другая поддержка...

person rex    schedule 02.10.2017
comment
Я помню, как недавно пытался сделать что-то подобное и получил сообщение об ошибке, в котором говорилось, что мне нужно использовать абсолютные пути. Что заставляет это работать без использования абс. пути? Ваше здоровье! (в настоящее время не на ПК / не могу опробовать код на моей установке) - person iMe; 11.10.2017
comment
@rex, глядя на опубликованную вами статью, на самом деле вы не используете Angular Univeral для рендеринга на стороне сервера. Я использую Angular 6 и хотел бы отказаться от Universal и вместо этого просто создать простой сервер NodeJS. - person colouredFunk; 12.10.2018