Publishing an Angular 6 app with Asp.Net Core 2.1.1 on IIS

2
votes

Using Visual Studio 2017 (15.7.5) the application performs normally. However, when publishing to IIS 7.5 I get the following error when I try to access the browser:

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: npm ERR! path C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json

npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall open npm ERR! enoent ENOENT: no such file or directory, open 'C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Windows\system32\config\systemprofile\AppData\Roaming\npm-cache_logs\2018-08-01T14_50_15_092Z-debug.log )) System.Threading.Tasks.Task.GetResultCore(bool waitCompletionNotification) InvalidOperationException: The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: npm ERR! path C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall open npm ERR! enoent ENOENT: no such file or directory, open 'C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Windows\system32\config\systemprofile\AppData\Roaming\npm-cache_logs\2018-08-01T14_50_15_092Z-debug.log Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.StartAngularCliServerAsync(string sourcePath, string npmScriptName, ILogger logger) Stack Query Cookies Headers 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: npm ERR! path C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall open npm ERR! enoent ENOENT: no such file or directory, open 'C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Windows\system32\config\systemprofile\AppData\Roaming\npm-cache_logs\2018-08-01T14_50_15_092Z-debug.log )) System.Threading.Tasks.Task.GetResultCore(bool waitCompletionNotification) 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.Builder.RouterMiddleware.Invoke(HttpContext httpContext) Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context) Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware.Invoke(HttpContext context) Show raw exception details InvalidOperationException: The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: npm ERR! path C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall open npm ERR! enoent ENOENT: no such file or directory, open 'C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Windows\system32\config\systemprofile\AppData\Roaming\npm-cache_logs\2018-08-01T14_50_15_092Z-debug.log Microsoft.AspNetCore.SpaServices.AngularCli.AngularCliMiddleware.StartAngularCliServerAsync(string sourcePath, string npmScriptName, ILogger logger) Show raw exception details System.InvalidOperationException: The NPM script 'start' exited without indicating that the Angular CLI was listening for requests. The error output was: npm ERR! path C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall open npm ERR! enoent ENOENT: no such file or directory, open 'C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json' npm ERR! enoent This is related to npm not being able to find a file. npm ERR! enoent npm ERR! A complete log of this run can be found in: npm ERR! C:\Windows\system32\config\systemprofile\AppData\Roaming\npm-cache_logs\2018-08-01T14_50_15_092Z-debug.log ---> 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)

The log generated is as follows:

info it worked if it ends with ok

verbose cli [ 'D:\Programas\nodejs\node.exe', verbose cli 'D:\Programas\nodejs\node_modules\npm\bin\npm-cli.js', verbose cli 'run', verbose cli 'start', verbose cli '--', verbose cli '--port', verbose cli '52476' ] info using [email protected] info using [email protected] verbose stack Error: ENOENT: no such file or directory, open 'C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json' verbose cwd C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp verbose Windows_NT 6.1.7601 verbose argv "D:\Programas\nodejs\node.exe" "D:\Programas\nodejs\node_modules\npm\bin\npm-cli.js" "run" "start" "--" "--port" "52476" verbose node v8.11.3 verbose npm v5.6.0 error path C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json error code ENOENT error errno -4058 error syscall open error enoent ENOENT: no such file or directory, open 'C:\Sites\NewPro\Microsum.NewPro.ERP\ERPApp\package.json' error enoent This is related to npm not being able to find a file. verbose exit [ -4058, true ]

Any suggestions are very welcome.

3
asp.net-coreiis-7.5angular6
@Yannis, thanks for the suggested formatting. I'm new here. I tried to highlight the text of the error messages and I could not. – Silvair L. Soares
Ensure that your IIS website is mapped to the published directory containing wwwroot and ClientApp directories along with your .NET Core app dll – Mohsin Mehmood
@MohsinMehmood When I do a publish in Visual Studio 2017, it generates the .Net Core dll set and next to these dlls, it also generates a directory with the angle app and another directory called "wwwroot", which in turn contains all the files (.ico, .js, .html, .css, etc) compiled from angular. I'm registering my IIS application in the root of this directory created by Visual Studio. Was this my mistake? – Silvair L. Soares
Is your issue resolved? You need to map IIS website to the published folder containing dlls, wwwroot and ClientApp folder – Mohsin Mehmood
Same here, but my case I am trying to run the application calling the command Dotnet myapp.dll from the publish folder. moreover, I check the publish folder, Indeed there is no package.json file – XtianGIS

3 Answers

2
votes

I was able to resolve by ignoring the standard visual template of visual studio and creating an AspNet Web Application project and later creating the angular application.

I put the project code in github to be used by those who have the same problems.

I generated a detailed step-by-step with prints for anyone who wants to build the project manually:

2
votes

Late response, but if anyone is still running into a similar issue with later versions of .NET Core/Angular SPA;

I have generated blank templates with .NET Core 3.1 and it's Angular SPA template which would always run successfully in development mode but upon publishing would fail with the same error as above. That always seemed odd to me, as it shouldn't even be looking for package.json if you've published the app - it should be loading the static files.

The issue was with the development environment that it was building with - by default my ASPNETCORE_ENVIRONMENT variable was set to Development meaning the Startup.cs logic was reading all of the if(env.IsDevelopment()) checks as true, even after publish. The simplest fix is to either create a new Publishing Profile in the VS project under Properties > Publish Profiles. Call it Production.pubxml or something and add the following element to it: <EnvironmentName>Production</EnvironmentName>. Then when you publish from the Build > Publish menu, select the File from the dropdown. This will add the Environment Variable specific to this Application to the web.config file, allowing the SpaServices middleware to actually do its job and not attempt to start a node server.

Alternatively, you could just add 

<environmentVariables>
   <environmentVariable name="ASPNETCORE_ENVIRONMENT" value="Production" />
</environmentVariables>

to the already published web.config file, inside of the <aspNetCore element which is self-closing by default. The downside here is you'll need to re-add it every time you publish the app, until you create the publish profile.

1
votes

In Visual Studio, on the solution explorer, select the file package.json inside the folder ClientApp then change the property Copy to Output Directory to Copy always .