Romaji to Kana Converter: Angular & Express — Chapter 7, Exercise 3
=====================================================================

TASK
Wire ConvertService to environment.apiBaseUrl exactly as this chapter
describes, build the frontend, and serve it from Express at the
correct path. Confirm the app works correctly when visited at
http://localhost:4000 (a real production-shaped build, apiBaseUrl
empty, requests resolving as relative paths) and still works
correctly under ng serve at http://localhost:4200 (apiBaseUrl pointing
at localhost:4000 explicitly).

SOLUTION

// src/app/convert.service.ts — the one real code change

  import { environment } from '../environments/environment';
  // ...

  switchMap((romaji) =>
    this.http.post<ConvertResponse>(`${environment.apiBaseUrl}/api/convert`, { romaji }).pipe(
      catchError((err: HttpErrorResponse) => { /* unchanged from Chapter 6 */ })
    )
  )

Production path:

  $ cd romaji-converter && ng build && cd ..
  $ cd romaji-converter-api && node server.js

  Visiting http://localhost:4000 loads the real converter. Typing
  "sushi" shows すし/スシ correctly. Checking the DevTools Network tab
  confirms the real request URL is the RELATIVE path
  /api/convert -- exactly what environment.ts's own empty apiBaseUrl
  produces once combined with the template literal -- resolving
  correctly against http://localhost:4000, the origin the page itself
  was actually loaded from.

Development path:

  $ cd romaji-converter && ng serve

  Visiting http://localhost:4200 loads the same app through the dev
  server. Typing "sushi" still shows すし/スシ correctly. Checking the
  DevTools Network tab this time shows the real request URL is the
  ABSOLUTE http://localhost:4000/api/convert -- exactly
  environment.development.ts's own explicit apiBaseUrl, automatically
  swapped in because `ng serve` runs under the development
  configuration by default.

Both origins convert correctly with zero manual configuration
switching -- the correct URL is chosen automatically depending on
which command actually built or served the app.

WHY THIS WORKS AS AN ANSWER
----------------------------
It confirms the whole point of the environment-file system working
correctly in both real, opposite directions at once: the identical
source code produces a relative-path request under a real production
build (because environment.ts's own apiBaseUrl is empty) and an
absolute localhost:4000 request under ng serve (because
fileReplacements swaps in environment.development.ts automatically) --
with the actual choice made entirely by Angular's own build tooling,
never by a manually-edited string anywhere in the source.