ASP.NET Core with Angular 5 -- When to use the assets folder vs. the wwwroot folder?

Question

When using Angular 5 with ASP.NET Core, a new Visual Studio project contains both a wwwroot folder and an assets folder:

The question is: In which folder should static content (images, css, etc.) be placed, and when would you use one vs. the other?

According to answers online, the wwwroot folder is where static content should go:

The wwwroot folder is new in ASP.NET 5.0. All of the static files in your project go into this folder. These are assets that the app will serve directly to clients, including HTML files, CSS files, image files, and JavaScript files.

However, according to Angular's documentation, static content can also go into the assets folder:

You use the assets array in .angular-cli.json to list files or folders you want to copy as-is when building your project.

Answer 1

Just some additional information on this. I run into a similar situation today while taking a look at an app that my company is about to redesign, I found static files in both wwwroot and assets folders.

Based on the screenshot in the question the project has been created with the Net Core Angular Template that comes with Visual Studio: https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/angular?view=aspnetcore-3.1&tabs=visual-studio (the same template used on the project I was looking at today). By default, you will get a folder structure like this one (screenshot of fresh project attached):

where the favicon.ico is in the wwwroot folder, so you could continue adding images and other static files in the wwwroot folder and the app will work fine. The template is configured to use the folder "ClientApp/dist" in production (Image attached from a fresh project created using the Angular template for .NET Core 3.1) assuming you will serve all as one service.

So, both approaches will work but the assets folder seems to be a better place. That was the place I was expecting to find static files for the Angular app as a developer.

The practical advantage I see from keeping the static files in the Angular project (folder ClientApp/src/assets) is that if you decide along the way to deploy and serve the client app separately you can just grab the angular build which includes the assets folder and move them to the server without additional work.

Answer 2

All static stuff used and referenced in Angular should go to assets. All static stuff, used in MVC Views, in ASP.NET Core directly should go to wwwroot.

During build/deployment/publish, the built Angular app, will be copied to wwwroot automatically, because this is the root folder for static contents for ASP.NET Core apps. (So the Angular artifacts becomes static contents from the ASP.NET Core view. But you shouldn't need to do this manually.)