How to publish asp.net with angular application?

Question

I was following this tutorial: https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-angular?view=vs-2022

But when I publish my app, either to a remote IIS server or locally into a folder, the angular project is not published, only ASP.NET.

During the publish project, the angular app is definitely built.

I have followed all the steps, is there some steps that that have not been mentioned in the tutorial?

Answer 1

Hi @Vladimir Mihajlovski ,

The angular app will be built and move to wwwroot folder as static files. You can check the process of angular app like below.

Build started...
1>------ Build started: Project: angularapp, Configuration: Release Any CPU ------
2>------ Build started: Project: webapi, Configuration: Release Any CPU ------
2>webapi -> C:\Users\Administrator\source\repos\Solution3\webapi\bin\Release\net7.0\webapi.dll
3>------ Publish started: Project: webapi, Configuration: Release Any CPU ------
Connecting to C:\Users\Administrator\source\repos\Solution3\webapi\bin\Release\net7.0\publish\...
webapi -> C:\Users\Administrator\source\repos\Solution3\webapi\bin\Release\net7.0\webapi.dll
npm run build
> angularapp@0.0.0 build
> ng build
- Generating browser application bundles (phase: setup)...
√ Browser application bundle generation complete.
√ Browser application bundle generation complete.
- Copying assets...
√ Copying assets complete.
- Generating index html...
√ Index html generation complete.
Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.c7614523715806ce.js      | main          | 119.61 kB |                34.51 kB
polyfills.89ae3309894ba767.js | polyfills     |  33.09 kB |                10.70 kB
runtime.2d99e508040b4ce1.js   | runtime       | 898 bytes |               518 bytes
styles.ef46db3751d8e999.css   | styles        |   0 bytes |                       -
| Initial Total | 153.58 kB |                45.71 kB
Build at: 2023-03-14T09:29:59.081Z - Hash: 3a56af806fc4ab56 - Time: 19036ms
webapi -> C:\Users\Administrator\source\repos\Solution3\webapi\obj\Release\net7.0\PubTmp\Out\
Web App was published successfully file:///C:/Users/Administrator/source/repos/Solution3/webapi/bin/Release/net7.0/publish/
========== Build: 2 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
========== Build started at 5:29 PM and took 44.828 seconds ==========
========== Publish: 1 succeeded, 0 failed, 0 skipped ==========
========== Publish started at 5:29 PM and took 44.828 seconds ==========

You can find the publish file like below.

I don't know your Visual Studio version and other setting. And I know if you has some issues, we need to check the .csproj file. Here is my .csproj file.

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

  <PropertyGroup>
    <TargetFramework>net7.0</TargetFramework>
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.OpenApi" Version="7.0.3" />
    <PackageReference Include="Swashbuckle.AspNetCore" Version="6.4.0" />
  </ItemGroup>

  <ItemGroup>
    <!--<ProjectReference Include="..\angularapp\angularapp.esproj" />-->
    <ProjectReference Include="..\angularapp\angularapp.esproj">
        <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
    </ProjectReference>
  </ItemGroup>

</Project>

Summary

According to the configuration

<BuildOutputFolder>$(MSBuildProjectDirectory)\dist\angularapp</BuildOutputFolder>

in .esproj, the angular project will be compiled into static files and then copied to the wwwroot folder.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,

Jason Pan