How to launch a published ASP.NET Angular application-CodePudding

I have an Angular application that's managed by an ASP.NET application like in the tutorial. In the development environment I can do dotnet run from within the ASP.NET's project directory. This then builds both projects and outputs

info: Microsoft.Hosting.Lifetime[14]
      Now listening on: https://localhost:5273
info: Microsoft.Hosting.Lifetime[0]
      Application started. Press Ctrl C to shut down.
info: Microsoft.Hosting.Lifetime[0]
      Hosting environment: production
info: Microsoft.Hosting.Lifetime[0]
      Content root path: C:\Dev\MyApp\src\MyApp.Client\
info: Microsoft.AspNetCore.SpaProxy.SpaProxyLaunchManager[0]
      No SPA development server running at https://localhost:44459 found.
info: Microsoft.AspNetCore.SpaProxy.SpaProxyLaunchManager[0]
      SPA development server running at 'https://localhost:44459'
info: Microsoft.AspNetCore.SpaProxy.SpaProxyMiddleware[0]
      SPA proxy is ready. Redirecting to https://localhost:44459

A development script is ran and either port 5273 or port 44459 will redirect to the actual Angular application.

But when I run dotnet publish --configuration test and then run dotnet bin/test/net6.0/MyApp.Client.dll the ASP.NET application is served, but navigating to the port just returns a 404. How do I actually run the application in a way that serves the Angular application on a given port exactly like in development? Do I need to run the ASP.NET application and then manually serve the Angular application's built files?

My csproj is below

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

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
    <Nullable>enable</Nullable>
    <IsPackable>false</IsPackable>
    <SpaRoot>ClientApp\</SpaRoot>
    <SpaProxyServerUrl>https://localhost:44459</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="6.0.8" />
  </ItemGroup>

  <ItemGroup>
    <!-- Don't publish the SPA source files, but do show them in the project files list -->
    <Content Remove="$(SpaRoot)**" />
    <None Remove="$(SpaRoot)**" />
    <None Include="$(SpaRoot)**" Exclude="$(SpaRoot)node_modules\**" />
  </ItemGroup>

    <Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
    <!-- Ensure Node.js is installed -->
    <Exec Command="node --version" ContinueOnError="true">
      <Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
    </Exec>
    <Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
    <Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
  </Target>
  
  <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 -- --configuration production" />

    <!-- Include the newly-built files in the publish output -->
    <ItemGroup>
      <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
      <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
        <RelativePath>wwwroot\%(RecursiveDir)%(FileName)%(Extension)</RelativePath>
        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>
</Project>

CodePudding user response：

While ASP.NET manages the development for Angular there's no sort of management for the published application.

In order to deploy the application you have to run dotnet publish and then run the actual dll for the ASP.NET application with dotnet <your dll e.g. bin/test/net6.0/publish/myapp.dll>. Then serve the published Angular files through something like Nginx or Live Server for VSCode.

The published files will be in the wwwroot folder in your publish directory like above. That or you can run ng build in the application directory and it'll place it into a folder named dist, then deploy them exactly as specified in the Angular docs.

So just to summarize ASP.NET does nothing to manage the deployed Angular app like it does in development.