API how to hide response when you put in production (Angular V16)

Issue

Here is an example of one call to API:

public getQuery(query: string) {
   const commonUrl: string = `https://api.tvmaze.com/${query}`;
   return this.http.get(commonUrl)   
}
        
public getShowsList() {
   const url: string = `shows`;
   return this.getQuery(url).pipe(
        tap((response) => console.debug(response)),
        catchError((error) => {
              console.debug(error);
              return of({});
        })
    )   
}

I wouldn't see the response on my console (only in production) with Angular V16 PS: I'm a newbie in Angular, so please give me some details

Solution

In some projects I used custom logging service for that purpose. But we hid all logs outside of debug version:

custom-logging.service.ts

@Injectable({
  providedIn: 'root'
})
export class CustomLoggingService {

  constructor() { }

  log(message?: any) {
    if (environment.isDebug) {
      console.log(message);
    }
  }
}

then in your environment file we had something similar to this:

environment.ts - for debug and other

export const environment = {
  ...defaults,
  isDebug: true,
  remouteApi: 'url for debug'
}

environment.prod.ts - for prod

export const environment = {
  ...defaults,
  isDebug: false,
  remouteApi: 'url for prod'
}

example of usage:

...your component
constructor(
  private myLogger: CustomLoggingService) {
  this.myLogger.log('visible only in debug');
}

Answered By - Jivopis