6
私はAngular Universalのバックエンドとフロントエンドの間の通信があることを証明するためにPOCを行っています。フロントエンドサービスModelServiceから検索したいheroes.jsonというJSONファイルがバックエンドにあるmodel.service.tsにあります。私はgetStuff()と呼ばれる方法でいくつかのデータを取得するためのHTTPリクエストを作成したいjsonファイルの角2 http GETが返されます404
model.service.ts（フロントエンド）内：
私はこのフォルダ構造を持っています。
私はmodel.service.tsでこれを持っている：私はこのエラーを取得してい
export class HomeComponent {
public data: any = {};
constructor(public modelService: ModelService) {
// we need the data synchronously for the client to set the server response
// we create another method so we have more control for testing
this.universalInit();
}
public universalInit() {
this.modelService.getStuff().subscribe((data) => {
this.data = data;
});
}
：：私はModelService.getHeroesを呼び出していますフロントエンドコンポーネントから
// domain/feature service
@Injectable()
export class ModelService {
private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file
// This is only one example of one Model depending on your domain
constructor(public api: ApiService, public cacheService: CacheService, private http: Http) {
}
public getStuff(): Observable<any[]> {
return this.http.get(this.heroesUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || "";
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ""} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
// domain/feature service
@Injectable()
export class ModelService {
private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON file
// This is only one example of one Model depending on your domain
constructor(public api: ApiService, public cacheService: CacheService, private http: Http) {
}
public getStuff(): Observable<any[]> {
return this.http.get(this.heroesUrl)
.map(this.extractData)
.catch(this.handleError);
}
private extractData(res: Response) {
let body = res.json();
return body.data || { };
}
private handleError (error: Response | any) {
// In a real world app, we might use a remote logging infrastructure
let errMsg: string;
if (error instanceof Response) {
const body = error.json() || "";
const err = body.error || JSON.stringify(body);
errMsg = `${error.status} - ${error.statusText || ""} ${err}`;
} else {
errMsg = error.message ? error.message : error.toString();
}
console.error(errMsg);
return Observable.throw(errMsg);
}
GET /src/backend/heroes.json 404 3.698 ms - 46
404 - {"status":404,"message":"No Content"}
EXCEPTION: 404 - {"status":404,"message":"No Content"}
/private/var/root/vepo/node_modules/rxjs/Subscriber.js:227
throw err;
^
404 - {"status":404,"message":"No Content"}
[nodemon] app crashed - waiting for file changes before starting...
サービスで私のURL private heroesUrl = "http://localhost:4000/src/backend/heroes.json"; // URL to JSON fileが間違っています。そのフォルダ構造を考えると、どのようなURLですか？実走行のプロジェクトなので、出力は、DISTである：
だから私はModelService.heroesUrlに入れてよく分かりません。 ModelService.heroesUrlにはどのような文字列値が必要ですか？
httpが正常に動作しているかどうかをテストするには、https://jsonplaceholder.typicode.com/ –
を使用してください。テストリンクをありがとう。私はdistに手を触れていないと思っていました。src appをコンパイルして翻訳した後の出力に過ぎません。バックエンドとフロントエンドの間の接続をテストするために、このpocの全体のポイントはバックエンドからデータを取得することなので、クライアントにjsonを置くことは正しくないようです。 – BeniaminoBaggins
distフォルダを作成した後は、画像のようにすべてのリンクを変更する必要があります。なぜなら私たちはdistコンテンツをサーバーにアップロードするときに、そこにローカルイメージを格納する必要があるからです。この問題に非常に多くの時間直面した。実際にあなたのjsonはサーバになければなりません。 –