ASP.Net Core 8 / Angular 18 won't start after upgrading Angular from 17 to 18

[awdorrin]

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

Don't known / other

Is this a regression?

Yes

Description

Upgraded Angular/material from 17 to 18 with the standard ng update commands provided via https://angular.dev/update-guide?v=17.0-18.0&l=1
Attempting to start in Visual Studio get exceptions shown below

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

All of these lines were prefixed with: "Microsoft.AspNetCore.SpaServices: Error:" I removed that text for clarity.

 node:internal/errors:496
     ErrorCaptureStackTrace(err);
     ^
 Error: Cannot set headers after they are sent to the client
     at new NodeError (node:internal/errors:405:5)
     at ServerResponse.setHeader (node:_http_outgoing:648:11)
     at setResponseHeader (C:\work\_git\myapp\MyApp\ClientApp\node_modules\webpack-dev-middleware\dist\utils\compatibleAPI.js:120:14)
     at processRequest (C:\work\_git\myapp\MyApp\ClientApp\node_modules\webpack-dev-middleware\dist\middleware.js:599:7)
     at ready (C:\work\_git\myapp\MyApp\ClientApp\node_modules\webpack-dev-middleware\dist\utils\ready.js:16:5)
     at middleware (C:\work\_git\myapp\MyApp\ClientApp\node_modules\webpack-dev-middleware\dist\middleware.js:640:5)
     at Layer.handle [as handle_request] (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\layer.js:95:5)
     at trim_prefix (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:328:13)
     at C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:286:9
     at Function.process_params (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:346:12)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:280:10)
     at C:\work\_git\myapp\MyApp\ClientApp\node_modules\connect-history-api-fallback\lib\index.js:26:14
     at Layer.handle [as handle_request] (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\layer.js:95:5)
     at trim_prefix (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:328:13)
     at C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:286:9
     at Function.process_params (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:346:12)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:280:10)
     at goNext (C:\work\_git\myapp\MyApp\ClientApp\node_modules\webpack-dev-middleware\dist\middleware.js:133:16)
     at processRequest (C:\work\_git\myapp\MyApp\ClientApp\node_modules\webpack-dev-middleware\dist\middleware.js:605:15)
     at ready (C:\work\_git\myapp\MyApp\ClientApp\node_modules\webpack-dev-middleware\dist\utils\ready.js:16:5)
     at middleware (C:\work\_git\myapp\MyApp\ClientApp\node_modules\webpack-dev-middleware\dist\middleware.js:640:5)
     at Layer.handle [as handle_request] (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\layer.js:95:5)
     at trim_prefix (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:328:13)
     at C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:286:9
     at Function.process_params (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:346:12)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:280:10)
     at Server.setHeaders (C:\work\_git\myapp\MyApp\ClientApp\node_modules\webpack-dev-server\lib\Server.js:2829:5)
     at Layer.handle [as handle_request] (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\layer.js:95:5)
     at trim_prefix (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:328:13)
     at C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:286:9
     at param (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:365:14)
     at param (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:376:14)
     at Function.process_params (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:421:3)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\index.js:280:10)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:141:14)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7)
     at next (C:\work\_git\myapp\MyApp\ClientApp\node_modules\express\lib\router\route.js:145:7) {
   code: 'ERR_HTTP_HEADERS_SENT'
 }
 Node.js v18.20.3

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

Angular CLI: 18.2.1
Node: 18.20.3
Package Manager: npm 10.7.0
OS: win32 x64

Angular: 18.2.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1802.1
@angular-devkit/build-angular   18.2.1
@angular-devkit/core            18.2.1
@angular-devkit/schematics      18.2.1
@angular/cli                    18.2.1
@schematics/angular             18.2.1
rxjs                            7.8.1
typescript                      5.4.5
zone.js                         0.14.10

Anything else?

Angular 17 worked, ran the following commands:

• ng update @angular/core@18 @angular/cli@18
• ng update @angular/material@18
• ng build

[JoostK]

I suspect this is being served from a Node server that is driven by Microsoft.AspNetCore.SpaServices, which judging by dotnet/aspnetcore#12890 has been obsolete for five years. If this can be reproduced using vanilla Angular then we can have a look, but without a reproduction this won't be actionable.

[awdorrin]

Interesting, I will look into that.
I won't rule it out, but I find it strange that it worked with Angular 17 and broke with 18, when both 18 and 18 were being build with the same installed node.js.

[JoostK]

The stacktrace contains fragments of webpack-dev-middleware, which may have been updated in Angular 18 so that may result in incompatibilities.

[awdorrin]

Found these comments on github that give steps for migrating to SpaProxy, but they don't seem to be completely accurate.
And while the commit claims documentation is updated, I can't find it anywhere so far...

dotnet/aspnetcore#44600

[awdorrin]

I have reached the point where my Angular app starts, but I'm running into CORS errors with requests from Angular to my .Net Core backend.

(redirected from 'https://localhost:4200/api/Users/GetCurrent') from origin 'https://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

https://localhost:4200 should be the angular app, but the .Net backend should be listening on another port.
So not sure the proxy part is configured correctly at this point.

[awdorrin]

After trying to configure the SpaProxy, I have the following issue:
Angular is starting up on 4200, Backend is starting up on 44364
API requests for the backend are being sent to: localhost:4200/api/MyController/GetValue
rather than localhost:44364/api/MyController/GetValue

The first back-end query triggers authentication against our corporate OAuth server,
request comes from locahost:44364 showing origin of localhost:4200,
because of the different port numbers, they are triggering cross-domain origin and server is blocking with a CORS error.

Have been playing with configuration in proxy.conf.js, but currently getting invalid redirect errors

const PROXY_CONFIG = [
  {
    context: [
      "/api/**",
    ],
    target: 'https://localhost:44364',
    followRedirects: true,
    secure: false,
    //changeOrigin: true,
    logLevel: "debug",
    headers: {
      Connection: 'Keep-Alive'
    }
  }
]
console.log("PROXY_CONFIG: ", PROXY_CONFIG);
module.exports = PROXY_CONFIG;

[awdorrin]

Proxying on the client side with the SpaProxy/proxy.conf.js/json is an issue when the back-end ASP.Net Core is using OIDC Authentication.
The problem is, with the webpack proxying, it tries to the CORS origin is something like: https://localhost:4200 which then gets proxied to the ASP.Net backend (https://localhost:44364) which is a different CORS origin. When the OIDC responds with https://localhost:44364/signin-oidc - the browser drops it with a CORS error because the port numbers indicate a different origin.
I have not found any way for the proxy code to inject headers, to allow for AnyOrigin in development, for instance (or even specify a set of valid origins)

I have gone back to trying to determine where this error is introduced with the legacy Microsoft.AspNetCore.SpaServices code, which worked in Angular 17 and breaks with Angular 18.

I did find this: webpack/webpack#18606 which does appear to be the cause.
Downgrading webpack-dev-middleware back to 7.0.0 does appear to fix the issue.

[awdorrin]

It appears upgrading webpack-dev-middleware to 7.4.2 also fixes the issue.

Hopefully a dependency update can be made to fix this for Angular 18?