0

I am new to angular and I was referring standard angular material present on angular site for the tutorial and I come upon part "Get Data from server". In this, I have created my in-memory dataservice like this.

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 data = [
      { id: 11, name: 'Dr Nice' },
      { id: 12, name: 'Narco' },
      { 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 {data};
  }
}

And call it in my service class

import { Injectable } from '@angular/core';
import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import { Observable, of } from 'rxjs';
import {MessageService} from './message.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';
        
@Injectable({
  providedIn: 'root'
})
export class HeroService {
  constructor( 
    private http: HttpClient,
    private messageService: MessageService
  ) { }
        
  private heroesUrl = 'api/data'; 
  httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
  };
       
  getHeroes(): Observable<Hero[]> {
    return this.http.get<Hero[]>(this.heroesUrl)
      .pipe(
        tap(_ => this.log('fetched Heroes')),
        catchError(this.handleError<Hero[]>('getHeroes', []))
    );
  }
}

so my question is can we change the base of web URI from api/data to test/data or demo/data something like that?

3
  • You want to return data from InMemoryDataService instead of http request, but you need to do it like fetching it from web api right ? Commented Jun 24, 2020 at 13:22
  • Can you clarify what you are trying to achieve? Technically the in-memory-api intercepts effectively all requests in the following url segment pattern :base/:collectionName/:id?. :base can really be anything and you can configure it be anything. That being said, is the issue URL configuration across different environments, dev api url vs production url? Commented Jun 24, 2020 at 13:39
  • yes. I got you that URI pattern would be like this :base/:collectionName/:id? so my question is can we change : base from api to any random name like test or demo or anything like that. for in-memory-api or it will take api as base name by default? Commented Jun 25, 2020 at 7:24

1 Answer 1

3

Yes, you can. There is a apiBase property you can configure. In my test app I wanted to send requests to /fake-api instead of just api and this code helped:

HttpClientInMemoryWebApiModule.forRoot(
  InMemoryDataService, { dataEncapsulation: false, apiBase: 'fake-api/' }
)
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.