dotnet / dotnet/aspnetcore

AngularCliMiddleware is not working with the new Angular CLI's build system

Open
#53,307 16 comments 18 reactions 0 assignees View on GitHub
area-mvc
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 5h
Merged PRs (30d)
276

Description

### Is there an existing issue for this?

- [X] I have searched the existing issues

### Describe the bug

Serving an Angular 17 SPA build with the new Angular CLI's build system.
[Angular.io guide for esbuild](https://angular.io/guide/esbuild)

UseAngularCliServer(npmScript: start) is running into a timeout.

For example, consider the following code in Startup.cs:

```
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
app.UseSpa(
spa =>
{
spa.Options.SourcePath = "ClientApp";app.UseSpa(
spa =>
{
spa.Options.SourcePath = "ClientApp";
spa.UseAngularCliServer("start");
});
spa.UseAngularCliServer("start");
});
}
```

After a timeout the following error is thrown: "The Angular CLI process did not start listening for requests within the timeout period of 120 seconds. Check the log output for error information."

So it does not support the new Angular build system.

### Expected Behavior

The ASP .NET core Backend and the Angular SPI is served.

### Steps To Reproduce

Create a new "Angular and ASP.NET Core" project from Visual Studio 2022 project templates.
Change the angular.json of the newly created project as following:
[Using the browser-esbuild builder](https://angular.io/guide/esbuild#using-the-browser-esbuild-builder)

The following is what you would typically find in angular.json for an application:

```
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
```
Changing the builder field is the only change you will need to make.

```
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser-esbuild",
```

### Exceptions (if any)

TimeoutException: The Angular CLI process did not start listening for requests within the timeout period of 120 seconds. Check the log output for error information.
Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.WithTimeout(Task task, TimeSpan timeoutDelay, string message)
Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task baseUriTask, CancellationToken applicationStoppingToken, bool proxy404s)
Microsoft.AspNetCore.Builder.SpaProxyingExtensions+<>c__DisplayClass2_0+<b__0>d.MoveNext()
Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddlewareImpl.Invoke(HttpContext context)

### .NET Version

8.0.101

### Anything else?

In Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.cs is a condition for waiting until the output of the ng serve command is matching a specific regex pattern:

[source code](https://github.com/dotnet/aspnetcore/blob/main/src/Middleware/Spa/SpaServices.Extensions/src/AngularCli/AngularCliMiddleware.cs)
```
openBrowserLine = await scriptRunner.StdOut.WaitForMatch(
new Regex("open your browser on (http\\S+)", RegexOptions.None, RegexMatchTimeout));
```

But the output has changed due to the new Angular build system.

Old build system:
2024-01-11_16h23_02

New build system:
2024-01-11_16h23_28

So the regex pattern does not match any more.
This pattern has to be fitted!

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.