Error 500 : ASP.NET core and angular do not find css file

1
votes

I have a problem. I created an ASP.NET Core web application with Angular. Everything works but when I launch my projet I do not have CSS. In the console I have this error :

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

So I searched in the server and I found :

Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[0] An unhandled exception has occurred while executing the request System.Net.Http.HttpRequestException: An error occurred while sending the request. ---> System.Net.Http.WinHttpException: Impossible d'établir une connexion avec le serveur at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Threading.Tasks.RendezvousAwaitable1.GetResult() at System.Net.Http.WinHttpHandler.d__105.MoveNext() --- End of inner exception stack trace --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.ConfiguredTaskAwaitable 1.ConfiguredTaskAwaiter.GetResult() at System.Net.Http.DiagnosticsHandler.d__2.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.ConfiguredTaskAwaitable`1.ConfiguredTaskAwaiter.

GetResult() at System.Net.Http.HttpClient.d__59.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at

System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter`1.GetResult() at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.d__7.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at System.Runtime.CompilerServices.TaskAwaiter 1.GetResult() at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.d__6.MoveNext() --- End of stack trace from previous location where exception was thrown --- at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw() at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task) at Microsoft.AspNetCore.SpaServices.Webpack.ConditionalProxyMiddleware.

I do not know if the problem comes from this error The declaration of the css, is done in the layout : 

<link rel="stylesheet" href="~/dist/vendor.css" asp-append-version="true" />

I generated the project, I do not change something, all the file css are present. So I do not understand how can I change this.

2
asp.netangular

2 Answers

1
votes

Pierre, your issues is related to the fact that every time you compile your angular app, ''/dist/ folder gets recreated. So, if you added manually 'vendors.css' file to that folder, VS would remember it, but angular compiler would delete it. If you use Angular-CLI, then the best way to handle all resources is to reference it in .angular-cli.json file:

"styles": [
    "vendors.css",
    "../Content/Layout.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],

and you need to remove the reference from VS.

0
votes

I had the same problem before, I found that the only way to solve it is to create a directory in wwwroot/dist/ and named it as externalRes and added the css file in it. then i call the file from shared/_Layout.cshtml like this;

this was the only solution i did find.

Code to happy