Multiple configurations assets issue with ng serve

[OmerSec]

Command

serve

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

I develop a white label app that should be used by multiple clients. As each client might have multiple environment I set each client assets in a common build configurations as it's persistent across environments and use multiple configuration for ng serve. For example

"clientA": {
    "assets": [
        "src/favicon.ico",
        {
            "glob": "**/*",
            "input": "src/environments/clientA/assets/",
            "output": "/assets/"
        },
        {
            "glob": "**/*",
            "input": "src/assets/",
            "output": "/assets/"
        }
    ]
},
"clientA-staging": {
    "fileReplacements": [
        {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/clientA/environment.staging.ts"
        }
    ]
},

Serving clientA is used with ng serve configuration clientA,clientA-staging. For some reason seems like the assets from src/environments/clientA/assets/ are not included and I see that the browser get 404 error when trying to download an asset from there.
What makes me think it is a bug with ng serve is that when building the app using ng build configuration clientA,clientA-staging I see the assets from src/environments/clientA/assets/ are included in the build under the assets folder and that everything working as expected when serving the produced build in a docker.
Also note that when changing the order and running ng serve configuration clientA-staging,clientA everything working as expected.
When used ng serve configuration clientA,clientA-staging --verbose to try see some logs I see the log GET /assets/images/brand-logo-light.svg because the client does not accept HTML. ( brand-logo-light.svg is originated from src/environments/clientA/assets/) but I really cant tell if it's related.

Minimal Reproduction

Create similar build configuration hierarchy as described.
Try serving the app using ng serve with multiple configurations.
See if the assets are shown correctly.

Simple Github repository that reproduce the issue can be found here:
https://github.com/OmerSec/repro-assets-issue-app

Exception or Error

Your Environment

Angular CLI: 18.2.5
Node: 18.19.1
Package Manager: npm 10.2.4
OS: darwin arm64

Angular: 18.2.5
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, localize, material, platform-browser
... platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.5
@angular-devkit/build-angular   18.2.5
@angular-devkit/core            18.2.5
@angular-devkit/schematics      18.2.5
@schematics/angular             18.2.5
rxjs                            7.8.1
typescript                      5.5.4
zone.js                         0.14.10

Anything else relevant?

No response

[alan-agius4]

This seems like a bug but we'll need to look at a reproduction to find and fix the problem. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

This might be related to your directory structure so its really important to get an accurate repro to diagnose this.

[OmerSec]

@alan-agius4 Simple Github repository that reproduce the issue can be found here:
https://github.com/OmerSec/repro-assets-issue-app

[alan-agius4]

This is working as intended.

When you run the command ng serve --configuration clientA,clientA-staging, the buildTarget configuration is overridden sequentially from left to right. As a result, the effective target becomes repro-assets-issue-app:build:clientA-staging.

For more details, refer to the https://angular.dev/reference/configs/workspace-config#alternate-build-configurations.

To address this, you can update your configuration to something like this:

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "buildTarget": "repro-assets-issue-app:build"
  },
  "configurations": {
    "production": {
      "buildTarget": "repro-assets-issue-app:build:production"
    },
    "development": {
      "buildTarget": "repro-assets-issue-app:build:development"
    },
    "clientA": {
      "buildTarget": "repro-assets-issue-app:build:clientA"
    },
    "clientA-staging": {
      "buildTarget": "repro-assets-issue-app:build:clientA,clientA-staging"
    }
  },
  "defaultConfiguration": "development"
}

Then, invoke the command:

ng serve --configuration clientA-staging

Alternatively, you can specify the buildTarget directly in the command line:

ng serve --build-target repro-assets-issue-app:build:clientA,clientA-staging

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}