I created a basic ASP.NET Core 3.1 Web app from Angular template in Visual Studio 2019 on a Windows 10 machine. The entire project source code is located here
git clone
https://erotavlas-1@bitbucket.org/dev-issues/webclient.git
EDIT: The primary goal is to build and run it as a containerized application on Kubernetes. So I have to create a Docker container for it first.
When I build and run it on Windows machine it works fine and launches correctly inside the Microsoft Edge browser.
However when I copied the project to my Macbook (OS Catalina) and was going to build it into a docker image, it fails to do so. These are the messages at the end of the build
> webclient@0.0.0 build /src/WebClient/ClientApp
> ng build "--prod"
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
Killed
npm ERR! code ELIFECYCLE
npm ERR! errno 137
npm ERR! webclient@0.0.0 build: `ng build "--prod"`
npm ERR! Exit status 137
npm ERR!
npm ERR! Failed at the webclient@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-06-12T13_22_34_364Z-debug.log
/src/WebClient/WebClient.csproj(40,5): error MSB3073: The command "npm run build -- --prod" exited with code 137.
The command '/bin/sh -c dotnet publish "WebClient.csproj" -c Release -o /app/publish' returned a non-zero code: 1
Then I thought maybe something was wrong with the project so I tried to open it in Visual Studio for Mac and it builds perfectly fine with no errors. But when I run it it generates the following output in the Visual Studio output
npm ERR! A complete log of this run can be found in:
)
---> System.InvalidOperationException: The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: sh: /Users/username/Documents/DEV/WebClient/WebClient/ClientApp/node_modules/.bin/ng: Permission
denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! webclient@0.0.0 start: `ng serve "--port" "59704"`
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the webclient@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
---> System.IO.EndOfStreamException: Attempted to read past the end of the stream.
at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.StartAngularCliServerAsync(String sourcePath, String npmScriptName, ILogger logger)
--- End of inner exception stack trace ---
at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.StartAngularCliServerAsync(String sourcePath, String npmScriptName, ILogger logger)
--- End of inner exception stack trace ---
at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
at System.Threading.Tasks.Task`1.get_Result()
at Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.<>c.<Attach>b__2_0(Task`1 task)
at System.Threading.Tasks.ContinuationResultTaskFromResultTask`2.InnerInvoke()
at System.Threading.Tasks.Task.<>c.<.cctor>b__274_0(Object obj)
at System.Threading.ExecutionContext.RunFromThreadPoolDispatchLoop(Thread threadPoolThread, ExecutionContext executionContext, ContextCallback callback, Object state)
--- End of stack trace from previous location where exception was thrown ---
at System.Threading.ExecutionContext.RunFromThreadPoolDispatchLoop(Thread threadPoolThread, ExecutionContext executionContext, ContextCallback callback, Object state)
at System.Threading.Tasks.Task.ExecuteWithThreadLocal(Task& currentTaskSlot, Thread threadPoolThread)
--- End of inner exception stack trace ---
at System.Threading.Tasks.Task`1.GetResultCore(Boolean waitCompletionNotification)
at System.Threading.Tasks.Task`1.get_Result()
at Microsoft.AspNetCore.SpaServices.Extensions.Util.TaskTimeoutExtensions.WithTimeout[T](Task`1 task, TimeSpan timeoutDelay, String message)
at Microsoft.AspNetCore.SpaServices.Extensions.Proxy.SpaProxy.PerformProxyRequest(HttpContext context, HttpClient httpClient, Task`1 baseUriTask, CancellationToken applicationStoppingToken, Boolean proxy404s)
at Microsoft.AspNetCore.Builder.SpaProxyingExtensions.<>c__DisplayClass2_0.<<UseProxyToSpaDevelopmentServer>b__0>d.MoveNext()
--- End of stack trace from previous location where exception was thrown ---
at Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context)
The Browser opens with the message
An unhandled exception occurred while processing the request.
AggregateException: One or more errors occurred. (One or more errors occurred. (The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: sh: /Users/username/Documents/DEV/WebClient/WebClient/ClientApp/node_modules/.bin/ng:
Permission denied
npm ERR! code ELIFECYCLE
npm ERR! errno 126
npm ERR! webclient@0.0.0 start: `ng serve "--port" "59704"`
npm ERR! Exit status 126
npm ERR!
npm ERR! Failed at the webclient@0.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
))
When I tried to build the docker image on Windows it also failed.
EDIT: From similar problems encountered creating a docker container from asp.net core angular application, I added this command to the Dockerfile
For example here is one such solution https://medium.com/swlh/create-an-asp-net-core-3-0-angular-spa-web-application-with-docker-support-86e8c15796aa
RUN apt-get update -yq \&& apt-get install curl gnupg -yq \&& curl -sL https://deb.nodesource.com/setup_10.x | bash \&& apt-get install nodejs -yq
But it did not work
Any guidance with this is appreciated.
[1]: https://erotavlas-1@bitbucket.org/dev-issues/webclient.git