如何使用角度通用在服务器端渲染中加载 json

Posted 2023-03-07

【中文标题】如何使用角度通用在服务器端渲染中加载 json

【英文标题】：How to load json in serverside rendering with angular universal

【发布时间】：2017-07-06 22:11:48

【问题描述】：

我正在为我的学士论文的大学项目构建一个 angular2-universal 应用程序。我想用 Angular Universal 在服务器上渲染这个应用程序。如何在服务器上加载我的 .json 文件？在我的没有服务器端渲染的版本中，我使用服务通过 http.get 请求获取 json，如下所示：

@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>

当我将此代码与 Angular Universal 一起使用时，它仍然可以工作，但是属于 json 的站点部分是第一次在客户端上加载，并且由于 ngIf 服务器忽略了这部分代码，所以我从服务器获取不完整的 .html 文件。如何将其加载到服务器上以从那里获取完整的 .html 站点？

PS：我对 angular2 和服务器端渲染完全陌生。

【参考方案1】：

首先，我建议您迁移到 Angular4，因为服务器端渲染现在是 Angular4 的一部分，因此不需要 Angular Universal...

您也可以结帐http://rajdeepdeb.me/angular-server-side-rendering-with-a-simple-node-server/

要在您现有的结构中回答，您应该通过实现 OnInit 将 http 调用从构造函数移动到 ngOnInit

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)
        );
    

如果您需要任何其他支持，请告诉我...

【讨论】：

我记得最近尝试过这样的事情，但收到一个错误，说我需要使用绝对路径。是什么让这项工作不使用 abs。路径？干杯! （目前不在 PC 上/无法在我的设置中试用代码）

@rex 查看您发布的文章，您实际上并没有使用 Angular Universal 进行服务器端渲染。我正在使用 Angular 6，并且很想排除 Universal，而是构建简单的 NodeJS 服务器。