我遵循了angular toh教程(字面意思是复制粘贴(，现在我开始学习第6部分的步骤：
刷新浏览器。英雄数据应该成功地从模拟服务器加载。
然而，它不会加载，并且当我运行"；ng发球"；
但在浏览器上的检查工具中，我得到了错误："<!DOCTYPE html>n<html lang="en">n<head>n<meta charset="utf-8">n<title>Error</title>n</head>n<body>n<pre>Cannot GET /api/heroes</pre>n</body>n</html>n"
，并显示消息：
"的Http失败响应http://localhost:4200/api/heroes:404未找到">
我在vscode devcontainer中运行我的代码，但我觉得这可能不是问题，因为container的端口4200绑定到我计算机的端口4200，并且每个未链接到数据库的内容都显示在屏幕上
我的一些代码
app.module
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HeroesComponent } from './heroes/heroes.component';
import { HeroDetailComponent } from './hero-detail/hero-detail.component';
import { MessagesComponent } from './messages/messages.component';
import { DashboardComponent } from './dashboard/dashboard.component';
@NgModule({
declarations: [
AppComponent,
HeroesComponent,
HeroDetailComponent,
MessagesComponent,
DashboardComponent
],
imports: [
BrowserModule,
FormsModule,
AppRoutingModule,
HttpClientModule,
// The HttpClientInMemoryWebApiModule module intercepts HTTP requests
// and returns simulated server responses.
// Remove it when a real server is ready to receive requests.
HttpClientInMemoryWebApiModule.forRoot(
InMemoryDataService, { dataEncapsulation: false }
)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
内存中数据服务.ts
import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { Hero } from './hero';
@Injectable({
providedIn: 'root',
})
export class InMemoryDataService implements InMemoryDbService {
createDb() {
const heroes = [
{ id: 12, name: 'Dr. Nice' },
{ id: 13, name: 'Bombasto' },
{ id: 14, name: 'Celeritas' },
{ id: 15, name: 'Magneta' },
{ id: 16, name: 'RubberMan' },
{ id: 17, name: 'Dynama' },
{ id: 18, name: 'Dr. IQ' },
{ id: 19, name: 'Magma' },
{ id: 20, name: 'Tornado' }
];
return {heroes};
}
// Overrides the genId method to ensure that a hero always has an id.
// If the heroes array is empty,
// the method below returns the initial number (11).
// if the heroes array is not empty, the method below returns the highest
// hero id + 1.
genId(heroes: Hero[]): number {
return heroes.length > 0 ? Math.max(...heroes.map(hero => hero.id)) + 1 : 11;
}
}
hero.service.ts
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
import { Hero } from './hero';
import { HEROES } from './mock-heroes';
import {MessageService} from './message.service';
@Injectable({
providedIn: 'root'
})
export class HeroService {
private heroesUrl = 'api/heroes'; // URL to web api
constructor(
private http: HttpClient,
private messageService: MessageService) { }
/** GET heroes from the server */
getHeroes(): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
}
getHero(id: number): Observable<Hero> {
// For now, assume that a hero with the specified `id` always exists.
// Error handling will be added in the next step of the tutorial.
const hero = HEROES.find(h => h.id === id)!;
this.messageService.add(`HeroService: fetched hero id=${id}`);
return of(hero);
}
/** Log a HeroService message with the MessageService */
private log(message: string) {
this.messageService.add(`HeroService: ${message}`);
}
}
我在www.github.com/angular/angular-in-memory-web-api上看到，他们的版本已经不起作用了，但我使用的npm上的软件包已经有2个月的历史了，来自www.github.com/sangular
我迷路了，向你寻求线索
我刚刚学会了Nodejs和Angular，也遇到了类似的问题。我用这种方法解决了这个问题。我刚刚意识到，我已经在我的项目文件夹外安装了angular-in-memory-web-api。然后我试着用--force选项将它安装在我的项目文件夹中(它成功了，但有一些警告(，然后它就可以正常工作了。