1

私は学士論文用の大学プロジェクトのためのangular2-universalアプリケーションを構築しています。私は角度の普遍的なサーバーでレンダリングするこのアプリケーションを取得したい。 .jsonファイルをサーバーにロードするにはどうしたらいいですか?サーバー側レンダリングせずに私のバージョンでは、私はこのようなhttp.get要求でjsonsを取得するためにサービスを使用します。私のコンポーネントで角度ユニバーサルでサーバサイドレンダリングで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> 

が、それはまだ動作しますが、それに属するサイトの一部jsonはクライアントで最初に読み込まれ、ngIfのためにサーバーはコードのこの部分を無視して、サーバーから不完全な.htmlファイルを取得します。そこから完全な.htmlサイトを取得するには、これをサーバーにロードする方法を教えてください。

PS:私はangular2とserversideのレンダリングについて全く新しいです。

答えて

1

サーバー側レンダリングが今Angular4と角ユニバーサルの一部は、このような...

として必要とされていないされてまず、私はあなたがまたで答えるためにhttp://rajdeepdeb.me/angular-server-side-rendering-with-a-simple-node-server/

をチェックアウトすることがありAngular4に移行することをお勧めいたしますでしょうあなたは

...あなたが他のサポートが必要な場合は、私に教えてください

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

からのOnInit実装することにより、コンストラクタからngOnInitにあなたのHTTP呼び出しを移動する必要があり、既存の構造

+0

私はこのようなことを最近試みたことを覚えていて、絶対パスを使用する必要があるというエラーが表示されました。何がabsを使わずにこの作品を作るのですか?パス?乾杯! (現在PCにはない/セットアップでコードを試すことはできません) – iMe

関連する問題