ASP.NET Core 6 Angular Template Static Files 404

Question

I create a clean project with the "ASP.NET Core with Angular" template in Visual Studio 2022 (v17.1.0). I add a folder called "images" to the "wwwroot" folder. I add an image called "logo.png" to the "images" directory. I add an image tag to the index.html file referencing the logo.png file. When I run the project the reference to the image returns a 404 error. I've tried referencing the file by "~/images/logo.png", "/images/logo.png", and "images/logo.png". I also ensured that "app.UseStaticFiles()" in included in my "Program.cs" file. I've read this MS article and everything I'm doing seems in line with what they're doing. Others online seem to be having a similar issue, but not until they actually deploy the application. I can't get the image to show in debug mode from Visual Studio. I'm sure I missed something simple but usually the Visual Studio templates run great out of the box. Any assistance is greatly appreciated.

Angular version is 13.0.1.

user_2097376 · Answer

In proxy.conf.js you add your folders to "context" like so:

   [...code added by VS...]
 
   const PROXY_CONFIG = [
       {
          context: [
             "/images",
             "/scripts",
             "/styles"
          ],
          target: target,
          secure: false,
          headers: {
             Connection: "Keep-Alive"
          }
       }
    ]

    module.exports = PROXY_CONFIG

Any folder you want to the app to "see" should be added to the "context" property.

ASP.NET Core 6 Angular Template Static Files 404

1 Answers