angularangular-in-memory-web-api

Angular with in memory data service: api/"something" not found


I am trying to use InMemoryDbService as data source in Angular 14.0.2 (/Node 16.15.1) project. I'm getting "api/[something]" not found in the browser log, no other apparent error. I can't share the whole code but I'll try to replicate the relevant parts here.

app.module.ts

    (...)
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';

    (...)
  imports: [
    (...)
      HttpClientModule,
      HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, {dataEncapsulation:false}),
    ThingsModule,
    AppRoutingModule
    (...)

in-memory-data.service.ts

import { Injectable } from '@angular/core';
import { InMemoryDbService } from 'angular-in-memory-web-api';
import { MockThings } from './thing/mock-thing-list';
import { Thing} from './thing/thing';

@Injectable({
  providedIn: 'root'
})
export class InMemoryDataService implements InMemoryDbService {

    createDb() {
        const Things: Thing[] = MockThings;
        return { Things};
    }

}

thing.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { catchError, Observable, of, tap } from 'rxjs';
import { Things} from './thing';

@Injectable()
export class ThingService {

    constructor(private http: HttpClient) { }

    getThingsList(): Observable<Thing[]> {
        return this.http.get<Thing[]>('api/things').pipe(
            tap((response) => this.log(response)),
            catchError((error) => this.handleError(error, []))
        );
    }

private log(response: Thing[] | Thing| undefined) {
    console.table(response);
}

private handleError(error: Error, errorValue: any) {
    console.error(error);
    return of(errorValue);
}


(...)
}

thing-list.component.ts

(...)

@Component({
  selector: 'app-thing-list',
  templateUrl: './thing-list.component.html',
})

export class ThingListComponent implements OnInit {
    Things: Thing[];
    selectedThing: Thing|undefined;

    constructor(private router: Router, private thingService: ThingService ) {

    }
    ngOnInit(): void {
        this.ThingService .getThingList().subscribe(thingList => this.Things);
    }

    (...)
}

Solution

  • Shouldn't it be in camelCase? Things -> things

     const things: Thing[] = MockThings;
     return { things };