locked
ASP.NET Core 3.1 Angular Web App builds and runs on Windows but fails on Mac OSX and in Docker RRS feed

  • Question

  • User-2031132340 posted

    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

    Monday, June 22, 2020 3:01 PM

All replies

  • User-474980206 posted

    none of you messages have anything to with docker.

    on the mac the npm build is failing. check which version of node is installed (current version is 12.18.1).  also did you run npm install?


    try:

    cd ClientApp
    rm -R node_modules
    npm install
    npm build --prod

    Monday, June 22, 2020 3:40 PM
  • User-2031132340 posted

    bruce (sqlwork.com)

    none of you messages have anything to with docker.

    on the mac the npm build is failing. check which version of node is installed (current version is 12.18.1).  also did you run npm install?


    try:

    cd ClientApp
    rm -R node_modules
    npm install
    npm build --prod

    Ok thanks, those steps resolved the issue on Mac and I was able to run and test the app.

    Yes I understand its not directly related to Docker  - however I was trying to get it working on 'linux' type OS with the ultimate goal of running it in as a Docker container (edited my post to clarify this)  I'm not sure how these steps can be translated to the Dockerfile

    I tried adding this command

    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


    based on other posts having the same problem but it did not work
    </div> </div>

    Monday, June 22, 2020 4:05 PM
  • User-474980206 posted

    you are trying to use a linux installer on a mac, this won't work. linux is based on unix system 5, while a mac is a mach kernel and the berkley unix utilities. 

    To install node on a mac, you download the installer and run it.

     https://nodejs.org/en/

    just click on the LTS button. 

    also if you want to run docker on mac, you install from the docker site:

      https://www.docker.com/get-started

    install docker desktop.

    note: generally there are installers for mac osx. but the common replacement for apt-get is homebrew which is ruby based. also the included ruby and python on a mac are older, should be updated. 

    Monday, June 22, 2020 5:41 PM
  • User-2031132340 posted

    I'm not sure I understand what you mean when you say "you are trying to use a linux installer on a mac"

    Yes I'm aware that the installers for Mac are different than those for Linux.

    However I do have Docker for Desktop installed on both my Windows and Mac machines.  I'm unable to get the ASP.NET Core angular app to build/run as a docker container on either machines.  (Should be the same regardless where you run it and it uses Linux installers and commands because docker containers (linux containers) run on a Linux VM )

    Monday, June 22, 2020 6:04 PM
  • User-474980206 posted

    It appears you are trying build in a docker container. Pull the asp.net core container as per instructions and add node per this thread

       https://stackoverflow.com/questions/36399848/install-node-in-dockerfile

    or you can just use the Microsoft build image which already has both

       https://hub.docker.com/r/microsoft/aspnetcore-build/

    if you want to deploy built code, you just need the dotnet hosting container, node is not required.

    Tuesday, June 23, 2020 2:48 PM