ASP.NET Razor Pages - dist folder getting removed during build

I'm currently encounterring issues when trying to integrate an angular app to the ASP.NET Razor Pages template

when I build the Project, it creates the dist folder using the npm command that I attached to .csproj file along with the compiles angular scripts but suddenly getting removed.

and then, when I checked the bin folder, the files from dist folder aren't there

I am only seeing the package.json and alike

Does somebody encountered the same and find a solution?

here is the npm command that I attached to .csproj

.csproj

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>disable</ImplicitUsings>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>   
  </PropertyGroup>

    
  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="6.0.8" />
  </ItemGroup>
  <PropertyGroup>
    <NpmBuildCommand Condition="'$(Configuration)' == 'Release'">ngbuildprod</NpmBuildCommand>
    <NpmBuildCommand Condition="'$(Configuration)' == 'Debug'">ngbuildprod</NpmBuildCommand>
    <NpmBuildCommand Condition="'$(Configuration)' == 'DEV'">ngbuilddev</NpmBuildCommand>
    <NpmBuildCommand Condition="'$(Configuration)' == 'TEST'">ngbuildtest</NpmBuildCommand>
    <NpmBuildCommand Condition="'$(Configuration)' == 'PERF'">ngbuildperf</NpmBuildCommand>
    <NpmBuildCommand Condition="'$(Configuration)' == 'STG'">ngbuildstg</NpmBuildCommand>
    <NpmBuildCommand Condition="'$(Configuration)' == 'PROD'">ngbuildprod</NpmBuildCommand>
  </PropertyGroup>
    
  <PropertyGroup>
    <CompileDependsOn>
      $(CompileDependsOn);
      WebpackBuild;
    </CompileDependsOn>
    <CopyAllFilesToSingleFolderForPackageDependsOn>
        $(CopyAllFilesToSingleFolderForPackageDependsOn);
        CollectWebPackOutput;
        AfterBuild;
    </CopyAllFilesToSingleFolderForPackageDependsOn>
    <CopyAllFilesToSingleFolderForMsdeployDependsOn>
        $(CopyAllFilesToSingleFolderForMsdeployDependsOn);
        CollectWebpackOutput;
        AfterBuild;
    </CopyAllFilesToSingleFolderForMsdeployDependsOn>
  </PropertyGroup>  

  <Target Name="WebpackBuild" BeforeTargets="Compile">
    <ItemGroup>
      <FilesToClean Include="$(SpaRoot)..\app\**" />
    </ItemGroup>
    <RemoveDir Directories="$(SpaRoot)..\app" />
    <Delete Files="@(FilesToClean)" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run $(NpmBuildCommand)" />
  </Target>
    
  <Target Name="CollectWebpackOutput">
    <ItemGroup>
      <_CustomFiles Include="$(SpaRoot)..\app\**" />
      <FilesForPackagingFromProject Include="%(_CustomFiles.Identity)">
        <DestinationRelativePath>$(SpaRoot)..\app\%(RecursiveDir)%(Filename)%(Extension)</DestinationRelativePath>
      </FilesForPackagingFromProject>
    </ItemGroup>
    <Message Text="CollectWebpackOutput list: %(_CustomFiles.Identity)" />
  </Target>

package.json

{
  "name": "my-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "ngbuildprod": "ng build --configuration=prod --output-path ../app/ --base-href app/",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/google-maps": "^11.2.13",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@kolkov/angular-editor": "^2.1.0",
    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
    "@popperjs/core": "^2.11.5",
    "@sweetalert2/ngx-sweetalert2": "^11.0.0",
    "@swimlane/ngx-datatable": "^20.0.0",
    "@types/feather-icons": "^4.7.0",
    "angular2-multiselect-dropdown": "^5.0.4",
    "bootstrap": "^5.1.3",
    "feather-icons": "^4.29.0",
    "file-saver": "^2.0.5",
    "font-awesome": "^4.7.0",
    "jquery": "^3.6.0",
    "moment": "^2.29.3",
    "ng2-file-upload": "^1.4.0",
    "ngx-bootstrap": "^8.0.0",
    "ngx-infinite-scroll": "^13.0.2",
    "ngx-perfect-scrollbar": "^10.1.1",
    "ngx-ui-switch": "^13.0.2",
    "rxjs": "~7.5.0",
    "sweetalert2": "^11.4.19",
    "tslib": "^2.3.0",
    "typescript-string-operations": "^1.4.1",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.0.4",
    "@angular/cli": "~14.0.4",
    "@angular/compiler-cli": "^14.0.0",
    "@angular/localize": "^14.0.4",
    "@types/googlemaps": "^3.39.14",
    "@types/jasmine": "~4.0.0",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.7.2"
  }
}

bin folder

ClientApp

app