Angular application built with esbuild use browser directory as output

Question

I just upgraded an application to angular 17 where the angular.json configuration is the following:

"outputPath": "../SFPD.Workflows/wwwroot",

It's important that the compiled application goes into this directory, however, when using esbuild, it goes into "../SFPD.Workflows/wwwroot/browser" and I can't find the setting to ensure that the "browser" directory is not appended.

Answer 1

According to the mentioned Bug Ticket, a solution has now been implemented and is available in Angular>=17.1.x

            "outputPath": {
              "base": "dist/project-name",
              "browser": ""
            },

If you keep the browser property empty, the path will be compatible to the previous versions without the browser directory.

Answer 2

Angular team has updated the Angular CLI design to always output publicly accessible files in browser directory and the ssr files in server directory and other files such as statistics and licenses information in the root output path.

If you are using ASP.NET and Microsoft's SPA template and this update breaks the publish process, then the solution is very simple.

• Go to the <project_name>.client folder in your solution.
• Find <project_name>.client.esproj file and open it in a text editor.
• There should be a build output in the xml document, something resembling $(MSBuildProjectDirectory)\dist<project_name>.client\
• Update this to $(MSBuildProjectDirectory)\dist<project_name>.client\browser\

Now publish your application, it should create the release bundle without the browser folder in your wwwroot folder.