headers for dev-server not working anymore after upgrade from angular 16 to 17

[piu130]

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

Don't known / other

Is this a regression?

Yes

Description

I've created a new angular 17 app with ng new angular-tour-of-heroes.
After adding custom headers in angular.json:

"serve" {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "headers": {
      "Cross-Origin-Opener-Policy": "same-origin",
      "Cross-Origin-Embedder-Policy": "require-corp"
    }
  }
}

they are not present in the initial localhost (index.html) request. All subsequent requests contains the headers.
When creating a new angular 16 app and adding the same config it works for the initial request as well.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

In the real code we see the error `Uncaught ReferenceError: SharedArrayBuffer is not defined` due to the missing headers.

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

Angular CLI: 17.3.4
Node: 20.12.1
Package Manager: npm 10.5.0
OS: win32 x64

Angular: 17.3.4
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.4
@angular-devkit/build-angular   17.3.4
@angular-devkit/core            17.3.4
@angular-devkit/schematics      17.3.4
@schematics/angular             17.3.4
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.4

Anything else?

No response

[NetWin]

I just noticed the same / a similar issue. These headers are also not available for /media files (i.e. files embedded / referenced from css files)

Using the "old" browser builder with a random custom header for demo purposes,

results in these response headers (i simply @import'ed the primeicons css file in my styles.scss):

But after updating (and switching to the application builder) the custom header is gone.

---

Additionally there is no Access-Control-Allow-Origin header anymore which is another problem for me. But that's not part of this Github issue

[PJozeph]

same issue here

[PJozeph]

so this is fixed ? if yes in which version ?

[alan-agius4]

Yes, it be released on NPM later on today.

[PJozeph]

@alan-agius4
For mw it work only locally, but not on PROD !
Is this the correct way of config ?

[alan-agius4]

@PJozeph, for the production server you need to configure your production server which settings will vary based on which server you are using.

The settings in angular.json are only apply to the development server.

[alan-agius4]

@PJozeph, the production section solely effects the development server when executed with the production configuration ie: ng serve --configuration=production. In this scenario, the headers configuration is redundant, as it duplicates the one configured in the base options.

These settings do not affect your production server, as the configuration of the production server is outside the Angular CLI's.

[PJozeph]

@alan-agius4 I am really appreciate your help, thank you !

This is how I fixed the issue on PROD !

[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.}