Angular 18: ng build without browser folder

I am upgrading my Angular 17 application to Angular 18 and want to migrate to the new application builder.

I am using ng update @angular/core@18 @angular/cli@18 and opted in to the new application builder when I was asked. Next, I updated the angular.json file so that the browser build's location is using dist/project-x instead of dist/project-x/browser as suggested by the update process:

The output location of the browser build has been updated from dist/project-x to dist/project-x/browser. You might need to adjust your deployment pipeline or, as an alternative, set outputPath.browser to "" in order to maintain the previous functionality.

Here is an extract of my angular.json file:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project-x": {
      // ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": {
              "base": "dist/project-x",
              "browser": ""
            },
            // ...
          },
          // ...
          "configurations": {
            // ...
            "development": {
              // ...
              "outputPath": {
                "base": "dist/project-x",
                "browser": ""
              }
            }
            // ...

ng build, ng build --configuration development and ng build --configuration production works as expected.

However, when overriding the output path in the command line, then it does not work as expected.

The command below, will create a folder browser in /projects/project-x-backend/:

ng build --base-href=/x/ --output-path=/projects/project-x-backend/wwwroot \
    --watch --configuration development --verbose

How can I get rid of the browser folder when using ng build --watch with a custom output path? (I would like to avoid setting the output path for the development configuration to /projects/project-x-backend/wwwroot in angular.json itself.)

Solution

Note: This answer is tailored towards the question itself (see question's comments why).

Scroll down to "Let's answer the question..." for the answer, but let me first point out the the global solution if you don't need to change the configuration for an alternative workflow...

Global Solution

If you want a global solution, the question itself points to the global fix too, or refer to one of the other answers.

"configurations": {
    // ...
    "development": {
      // ...
      "outputPath": {
        "base": "dist/project-x",
        "browser": ""
      }
    }
}

Let's answer the question...

I found a solution that works for me by adding an additional configuration (without needing to modify the development configuration) in angular.json and use the configuration in the command line:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "project-x": {
      // ...
      "architect": {
        "build": {
          // ...
          "configurations": {
            // ...
            "development": {
              // ...
            },

            "dev-watch": {

              // ... duplicate other configuration from development
              // then specify another outputPath:

              "outputPath": {
                "base": "/projects/project-x-backend/wwwroot",
                "browser": ""
              }

            }
            // ...

And then I execute ng build with:

ng build --base-href=/x/ --watch --configuration dev-watch --verbose