AngularCliMiddleware is not working with the new Angular CLI's build system
- 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:
New build system:
So the regex pattern does not match any more.
This pattern has to be fitted!
Contributor guide
Assessment
This issue has not been assessed yet.