[es-build] Browser directory created in outputPath

[ssougnez]

Command

build

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 have an Angular application configure as below:

"outputPath": "../MyNetApplication/wwwroot",

When using webpack build, the compiled files of the Angular application went directly in wwwroot so I could publish my .NET application and it worked directly.

I tried to switch to es-build, however, after the build, the compiled files of the Angular application end up into "../MyNetApplication/wwwroot/browser" which prevents me from publishing the .NET application as this would not work.

It seems weird to me that the outputPath settings of angular.json is only partially honored.
According to me, this settings should be used and not altered during the compilation.

Minimal Reproduction

Just create a new Angular application using angular/cli 17 and run ng build.
The files will be located under dist/ng17/browser.

Exception or Error

No response

Your Environment

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.0
@angular-devkit/build-angular   17.0.0
@angular-devkit/core            17.0.0
@angular-devkit/schematics      17.0.0
@angular/cli                    17.0.0
@schematics/angular             17.0.0
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else relevant?

No response

[alan-agius4]

This is by design.

The application builder will output publicly accessible files in the browser directory, ssr files in the server directory and other files such as statistics and licenses information in the root outputPath.

In .NET Core you can configure and change the wwwroot by using .UseWebRoot.

Edit: If this change in outputPath semantics is a major obstacle, consider using browser-esbuild which leverages esbuild/Vite to provide the same build-time improvements as application builder but with identical options to the existing browser builder, meaning outputPath is unchanged.

[ssougnez]

Thanks for the tip.

However, I still find it a bit weird (but maybe I'm alone). If I configure an output path, I expect angular to scrupulously respect it. Especially if I don't use SSR.

What would make more sense to me would be to have a SSR section in the angular.json where I could override the default output path.

This way, people could use the regular outputPath setting to have the same behaviour than with webpack and use a combination of the two if they want to use SSR.

With this approach, everyone would be able to configure his application the way he wants.

Just a suggestion...

[alan-agius4]

The main reasons behind this change of having a standardise output are;

• By having always /browser and /server users don’t need to modify their setup when they opt-in or out of SSR.
• Simplifies integration for hosting and cloud providers as it’s easier to determine which files are/should be accessible in the browser and those that are server only/private.
• Simpler to explain, as there the outputs are consistent, irrespective of the type of rendering the chosen (CSR, SSG, SSG or hybrid).

Whilst this change does remove some flexibility, we believe that the pros outweigh the cons in the long run.

[olostan]

I run in same issue. I am using Firebase for hosting and after moving to application builder when I deploy to hosting, I see that both browser and server folders are deployed, so when I navigate to hosted website I have "not found" as index.html is in browser/index.html

I prefer to use SSR.

It is application builder issue or angularfire? Should I reconfigure Angularfire to deploy only browser folder or server folder or application builder can build into single folder that could be deployed to firebase hosting?

Thnx

[alan-agius4]

@olostan, if you are using AngulsrFire ng deploy functionality it should determine the right thing out of the box.

Although it does look like they are still working on supporting the new builder firebase/firebase-tools#6480

[olostan]

@alan-agius4 Thnx! Looks like it is exactly what I am missing.

[blogcraft]

Trying to use esbuild has being absolute hell. I don't use ssr (can't even install node in server) but having this browser directory has introduced so many unnecessary problems.

[sangphu]

I am having problem with the browser folder too. I build and output to ../webapp folder in spring boot application. The 'browser' inside ../webapp ruin everything. Developers use Angular to build for many types of applications, not necessarily must use /browser or /server. 'browser' should not be here or at least should have the option not to have it.

[pavelpie]

Big problem for me too. :( Please consider adding an option as a parameter in angular.json. If the parameter is set to an empty string, the output should be directed to just /dist. If the parameter is set to 'browser', then the output should go to the /dist/browser subfolder.

[emeryao]

+1

maybe it's more friendly and a better experience for the developers to make it configurable in addition to the default behavior

[Crefelder]

As a current hack I currently use this. It is strange but works:

Change angular.json:
"options": { "outputPath": "dist",
Add in angular.json:
"architect": { "build": { "configurations": { "production": { "deleteOutputPath": true,

Add in package.json - scripts
"postbuild": "node .\\post-build.js",

Add post-build.js file in root:
const fs = require('fs-extra');
fs.move('dist/browser', 'dist', (err) => { if(err) { return console.error(err); } });

[ChrisCopelandSF]

+1

Problem here too, I also deploy Angular with a Spring Boot application and all of our pipelines are setup so that Angular builds as part of CI/CD and the output path is set to ../application/src/main/resources/public so that Spring may automatically resolve the view. This change has broken that so we cannot upgrade to Angular 17 without recalibrating all our CI/CD pipelines.

I don't think I even saw this change mentioned in any of the notes, but I may have missed it. If the behaviour isn't going to be looked at/changed/made configurable then maybe it's worth mentioning this more clearly so people upgrading don't blindly cause headaches for themselves.

I agree that there should perhaps be an option for client-side rendering to output in the previous directory structure.

[iqmeta]

I am having problem with the browser folder too. I build and output to ../webapp folder in spring boot application. The 'browser' inside ../webapp ruin everything. Developers use Angular to build for many types of applications, not necessarily must use /browser or /server. 'browser' should not be here or at least should have the option not to have it.

Same here, everything in pipeline is breaking because of forced "BROWSER" folder which does kill of all middleware proxy and base-href stuff set up (eg. relative to ./api json fetch logic) . Please give an option like before to be able to customize the real dist outputPath without forcing devs.
Fine with me to have "browser" as default, but give some extra parameter for real outPath of the browser dist... now we need to hack around like @Crefelder

why not in angular.json:

 "outputPath": {
     browser: "../backend/wwwroot/admin",
     ssr: "../backend/not-public-server-side-rendering",
     whatever: "\\server\share\whatever"
}

it's not so easy if you pipe in 5 SPA apps/uis into one wwwroot with the .UseWebRoot .NET change - which also
kills of default in C# backend mapping.