How to publish external Angular folder with my asp.net core project?

Question

I have created an Asp net core api with an external angular project, the app works well in debug mode and I want to publish the two apps in same folder, but the angular project seems to be copied in wrong folder.I got inspired from Asp Angular template csproj.

My csproj :

<Project Sdk="Microsoft.NET.Sdk.Web">

<PropertyGroup>

<TargetFramework>net5.0</TargetFramework>

<RootNamespace>rct_api</RootNamespace>

<SpaRoot>..\rct-angular\</SpaRoot>

<!-- Set this to true if you enable server-side prerendering -->

<BuildServerSideRenderer>false</BuildServerSideRenderer>

</PropertyGroup>



<ItemGroup>

<PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="5.0.2" />

<PackageReference Include="Swashbuckle.AspNetCore" Version="5.6.3" />

</ItemGroup>



<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">

<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->

<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />

<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />

<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />



<!-- Include the newly-built files in the publish output -->

<ItemGroup>

<DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />

<DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />

<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">

<RelativePath>%(DistFiles.Identity)</RelativePath>

<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>

<ExcludeFromSingleFile>true</ExcludeFromSingleFile>

</ResolvedFileToPublish>

</ItemGroup>

</Target>



</Project>

The result :

_UnfilteredPriorPublishFileWrites=

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\rct-api.exe

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\appsettings.Development.json

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\appsettings.json

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\package-lock.json

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\rct-api.dll

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\rct-api.deps.json

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\rct-api.runtimeconfig.json

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\rct-api.pdb

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\Microsoft.AspNetCore.SpaServices.Extensions.dll

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\Microsoft.OpenApi.dll

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\Swashbuckle.AspNetCore.Swagger.dll

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\Swashbuckle.AspNetCore.SwaggerGen.dll

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out\Swashbuckle.AspNetCore.SwaggerUI.dll

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out..\rct-angular\dist

Exécution de la tâche "ReadLinesFromFile" terminée.

Tâche "ConvertToAbsolutePath"

Paramètre de tâche :

the pub temp folder seems to be wrong how correct that ?

C:\Users\Eddy\Source\Repos\rct-solution\rct-api\obj\Release\net5.0\PubTmp\Out..\rct-angular\dist\3rdpartylicenses.txt

CopyToPublishDirectory=PreserveNewest

ExcludeFromSingleFile=true

RelativePath=..\rct-angular\dist\3rdpartylicenses.txt

Answer 1

Finally I found a solution, I modify angular Json for build in wwwroot folder of asp project :

  "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "../rct-api/wwwroot",
        "index": "src/index.html",

I update my csproj too :

  <ItemGroup>
  
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

  <ItemGroup>
    <None Include="Pages\Error.cshtml" />
    <None Include="Pages\_ViewImports.cshtml" />
    <None Include="wwwroot" Exclude="wwwroot\**" />
  </ItemGroup>

  <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">   
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="wwwroot\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>%(DistFiles.Identity)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>