Visual Studio Angular template will not publish correctly

Question

When trying to publish an Angular project the wwwroot folder does not get created and published.

This happens with a completely new unmodified project using the template "Angular and ASP.NET core". I'm on Visual Studio 17.13.2.

I've tried publishing to Azure and just to a local folder, and in neither case do I get the wwwroot folder. I get a 404 after publish on Azure from this.

It appears the files don't seem to get copied to the \obj\Release\net8.0\PubTmp\Out\ folder from the dist folder.

I've got existing projects that work fine. I've created two new projects from the template and both have this issue. I've gone through and compared project files, angular.json, package.json etc etc and can't see anything that looks like it could cause this.

Tried different versions of node (20.12.2 and 22.14), no difference.

Thanks for any help.

Answer 1

Hi Gareth Walker,

Thank you for reaching out to Microsoft Q & A forum. 

Here are some steps to resolve the issue: 

1.Manually Build the Angular App 

Open a terminal in the ClientApp folder and run 

npm install  
npm run build  

 This should generate the dist folder inside ClientApp. 

2.Check angular.json Configuration 

Ensure the outputPath is set to ../wwwroot under the build options. 

3.Verify .csproj Settings 

Your project file should include a target to build and copy the Angular output to wwwroot during publish: 

<Target Name="PublishSpa" AfterTargets="Publish">
  <Exec WorkingDirectory="$(SpaRoot)" Command="npm install && npm run build" />
  <Copy SourceFiles="$(SpaRoot)dist\**" DestinationFolder="$(PublishDir)wwwroot" />
</Target>

4.Run Visual Studio as Administrator 

This can help resolve permission-related issues. 

5.Manually Copy the dist Folder (Temporary Solution) 

If the issue persists, try manually copying ClientApp/dist into wwwroot before publishing. 

Please feel free to contact us if you have any additional questions.     

If you have found the answer provided to be helpful, please click on the "Accept answer/Upvote" button so that it is useful for other members in the Microsoft Q&A community.  

Answer 2

Hi

So what has sort of worked is adding the following to csproj:

`<Target Name="PublishSpa" AfterTargets="Publish">`
	  <Copy SourceFiles="$(SpaRoot)\dist\projectname.client\browser\index.html" DestinationFolder="$(PublishDir)wwwroot" />
	</Target>

This copies the index.html file in to the right place.

Step 1 and 2 weren't required.

However when I try and use the wildcard (**) in the copy command, I get "Illegal characters in path."- I'm not that familiar with this so it might be obvious but there was nothing I could find.

I get the same issue trying to build on Azure Devops.

Also I can confirm that on my other working Angular projects, the above code isn't present in the csproj and they still work so it's very odd.

Just for info my work around has been manually copying the files to Azure via Kudu!