How to publish asp.net with angular application?

Vladimir Mihajlovski 5 Reputation points
2023-03-12T08:26:08.01+00:00

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?

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,148 questions
Visual Studio
Visual Studio
A family of Microsoft suites of integrated development tools for building applications for Windows, the web and mobile devices.
4,590 questions
0 comments No comments
{count} vote

3 answers

Sort by: Most helpful
  1. JasonPan - MSFT 4,201 Reputation points Microsoft Vendor
    2023-03-13T15:20:11.7866667+00:00

    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.

    enter image description here

    enter image description here

    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

    1 person found this answer helpful.

  2. Guertin, Frédéric 5 Reputation points
    2023-04-27T02:05:55.7733333+00:00

    Make sure this parameter

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

    Actually fits what you put in angular.json, at least that was my problem.

    User's image

    1 person found this answer helpful.
    0 comments No comments

  3. Guertin, Frédéric 5 Reputation points
    2023-04-27T01:38:14.0733333+00:00

    I have a similar/same issue.

    When publishing I can see the angular files being update to the /dist folder but they don't get copied to the publish folder under /wwwroot (actually the wwwroot is not being created).

    • note that I created a new solution and a new .esproj. I'm trying to migrated an existing application to the new template.

    The sample project seem to create the wwwroot folder just fine.

    0 comments No comments