Romaji to Kana Converter: Angular & Express — Chapter 8, Exercise 1
=====================================================================

TASK
Create environment.mounted.ts and the "mounted" configuration exactly
as this chapter describes, then run
ng build --configuration production,mounted --base-href /romaji/.
Inspect the real built index.html and confirm its asset references
include the /romaji prefix, and inspect the built JavaScript bundle
to confirm the string '/romaji' appears in place of Chapter 7's empty
apiBaseUrl.

SOLUTION

// src/environments/environment.mounted.ts

  export const environment = {
    apiBaseUrl: '/romaji',
  };

// angular.json — new "mounted" configuration added alongside the
// existing "production" and "development" ones

  "configurations": {
    "production": { ... },
    "development": { ... },
    "mounted": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.mounted.ts"
        }
      ]
    }
  }

Building:

  $ ng build --configuration production,mounted --base-href /romaji/
  Application bundle generation complete.
  Output location: dist/romaji-converter

Inspecting the real built index.html:

  $ grep -o 'href="[^"]*"\|src="[^"]*"' dist/romaji-converter/browser/index.html

  href="/romaji/"                          <- the injected <base> tag
  href="/romaji/styles-XXXXXXXX.css"
  src="/romaji/main-XXXXXXXX.js"
  src="/romaji/polyfills-XXXXXXXX.js"

Every reference correctly carries the /romaji prefix -- confirming
--base-href did its real job.

Inspecting the built JS bundle for the compiled-in API base URL:

  $ grep -o '"/romaji"' dist/romaji-converter/browser/main-XXXXXXXX.js
  "/romaji"

The literal string '/romaji' is present in the compiled output,
confirming fileReplacements genuinely swapped environment.ts for
environment.mounted.ts at build time -- not left as Chapter 7's own
empty string.

WHY THIS WORKS AS AN ANSWER
----------------------------
It confirms both real, separate mechanisms worked correctly and
independently in the same build: --base-href rewrote every asset
reference in index.html to include the /romaji prefix, and the
"mounted" configuration's own fileReplacements swapped in the real
apiBaseUrl value that ends up baked directly into the compiled
JavaScript bundle -- exactly the two fixes this chapter's own
warn-box says are genuinely separate, both verified present in the
one real build produced by combining them.