Application Builder fileReplacements for .json

[jlssmt]

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

Hello,
I migrated my application (Angular 18) to the new build system (application builder).
After that the file replacement for .json files is no longer working.
Is this a bug or is there an new alternative? (I already tried a lot of stuff including conditional imports, changing from .json to .ts, ...)
I would prefer not to copy the json into the frontend folder or similar. I also don't want to copy it into assets and then access it via httpClient, because the config then becomes an observable.

📦 project-root
├── 📂 frontend
│   ├── angular.json
├── 📂 backend
└── 📂 shared
    ├── 📂 config
    │   ├── app.config.prod.json
    │   ├── app.config.dev.json
    │   ├── app.config.stage.json
    │   ├── app.config.test.json
    │   └── app.config.json

{
  "projects": {
    "frontend": {
      "architect": {
        "build": {
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                },
                {
                  "replace": "../shared/config/app.config.json",
                  "with": "../shared/config/app.config.prod.json"
                }
              ]
            }
          }
        }
      }
    }
  }
}

The config json is shared between frontend and backend (typescript express).
Has anybody a clue whats wrong?

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

I see zero errors.
No build errors, no browser console errors.
Thats also confusing for me.
I just see that the config is not replaced (verified with dist folder and in deployed app).

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 18.2.14
Node: 22.12.0
Package Manager: pnpm 7.33.5
OS: win32 x64

Angular: 18.2.13
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1802.14
@angular-devkit/core         18.2.14
@angular-devkit/schematics   18.2.14
@angular/build               18.2.14
@angular/cli                 18.2.14
@schematics/angular          18.2.14
rxjs                         7.8.1
typescript                   5.4.5
zone.js                      0.14.10

Anything else?

No response

[alan-agius4]

This behavior is expected since fileReplacements only applies to files within the TypeScript program.

To resolve JSON files, you need to enable resolveJsonModule in your TypeScript configuration: https://www.typescriptlang.org/tsconfig/#resolveJsonModule

[jlssmt]

@alan-agius4 thanks for your reply.
resolveJsonModule is already activated.
Importing .json generally works as expected, but I need to replace the config.json depending on the environment.
The challenge is to get it work in angular development environment and after building with application builder.

Before switching to the application builder, the fileReplacement was working perfectly with .json files.