我正在做一个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应该有什么字符串值？
