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

From the above configuration, you are setting the SPA root path as rct-angular. As far as I know, by default, the angular application is in the ClientApp folder, like this, if you want to use this folder, try to refer this link to change the configuration. — Zhi Lv
– Zhi Lv, Commented Feb 12, 2021 at 5:40
@ZhiLv Like I say I put my angular Project in external folder, I don't use angular template from visual studio, my solution : imgur.com/c8bk8UU — youtpout
– youtpout, Commented Feb 12, 2021 at 8:36

TheDude · Accepted Answer · 2022-05-07 20:35:24Z

2

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>

edited May 7, 2022 at 20:35

TheDude

3,1254 gold badges49 silver badges100 bronze badges

answered Feb 13, 2021 at 19:50

youtpout

1451 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ricardo D. Ferrancullo III Over a year ago

Still works in 2024. Using Net 8.0 and Angular 16.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related