我正在做一个POC来证明我在Angular Universal的后端和前端之间有通信.我在后端有一个名为heroes.json的
JSON文件,我想从model.service.ts中的前端服务ModelService中检索.
我有这个文件夹结构:
在model.service.ts(前端)中,我想创建一个http请求,以获取一个名为getStuff()的方法中的一些数据.
我在model.service.ts中有这个:
// 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,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); }
从前端组件我调用ModelService.getHeroes:
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; }); }
我收到这个错误:
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私人heroesUrl =“http:// localhost:4000 / src / backend / heroes.json”; //服务中JSON文件的URL错误.鉴于文件夹结构,网址是什么?因为实际运行的项目,输出,是在dist:
所以我不确定将什么放入ModelService.heroesUrl. ModelService.heroesUrl应该有什么字符串值?