Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

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

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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 };
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading