Publishing .netcore angular project gives “The SPA default page middleware could not return index.html”, works in debug

问题

We've inherited a small .net core application that has an angular 8 front end and a web api back end. When i received the files they were two separate projects, but to keep them similar to the rest of our projects, and make our deployments easier, we would like to combine them into one visual studio solution / project.

I've brought the files into visual studio and done various things to try get the project working. I've been on this about a day now, so i couldn't completely tell you exactly what i've tried. Currently, it all works when I debug it, no issues at all, all working fine. However, if i publish the files I end up with an issue where loading the website gives the following error:

 [Error] An unhandled exception has occurred while executing the request.
System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.
Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.

   at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.<Attach>b__1(HttpContext context, Func`1 next)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Swashbuckle.AspNetCore.SwaggerUI.SwaggerUIMiddleware.Invoke(HttpContext httpContext)
   at Swashbuckle.AspNetCore.Swagger.SwaggerMiddleware.Invoke(HttpContext httpContext, ISwaggerProvider swaggerProvider)
   at Microsoft.AspNetCore.Builder.RouterMiddleware.Invoke(HttpContext httpContext)
   at Microsoft.AspNetCore.Cors.Infrastructure.CorsMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
   at Microsoft.AspNetCore.Diagnostics.ExceptionHandlerMiddleware.Invoke(HttpContext context)

Looking at the published files, the .net core & web API files appear to be correct. However, inside the ClientApp folder the files do not look correct (when compared to another project that is Angular 8 and WebAPI).

Firstly, i'm completely missing the dist folder. I believe the reason for this is that the dist files are not being generated, because if i compare the two visual studio solutions (and their project paths - not the publish path); the working project has files such as index.html, runtime.xxx.js and main.xxx.js. The non-working project doesn't have these files, instead it just has an out-tsc folder which contains what looks a copy of the typescript files compiled to javascript.

Secondly, the non-working project's published ClientApp folder contains angular.json, tsconfig.json and a couple other JSON files, that arent present on the working projects published files.

It seems to be specifically related to the publish or the generation of the typescript files but i'm not sure how to resolve it.

A few things which might add valuable details:

part of startup.cs has the following:

services.AddSpaStaticFiles(configuration =>
{
   configuration.RootPath = "ClientApp/dist";
});

// *snip* 

app.UseSpaStaticFiles();

app.UseSpa(spa => {
    spa.Options.SourcePath = "ClientApp";
    if (env.IsDevelopment())
    {
        spa.UseAngularCliServer(npmScript: "start");
    }
});

part of angular.json:

  "outputPath": "dist"

full tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

回答1:

So after comparing my csproj files line by line I eventually added the following to the non-working csproj. This then complained with another minor error (which was an actually code error) and then everything started working correctly.

  <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>
      </ResolvedFileToPublish>
    </ItemGroup>
  </Target>

来源：https://stackoverflow.com/questions/58746054/publishing-netcore-angular-project-gives-the-spa-default-page-middleware-could