We've recently come into possession of a small .NET Core application that consists of an Angular 8 front end and a Web API back end. Initially, these were separate projects, but we are looking to merge them into a single Visual Studio solution to streamline our deployment process and maintain consistency with our other projects.
After importing the files into Visual Studio, I have been working tirelessly to ensure everything is functioning correctly. While debugging poses no issues and everything runs smoothly, encountering an error upon publishing the files has left me puzzled:
[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)
Upon inspecting the published files, the .NET Core and Web API components seem to be correct. However, discrepancies exist within the ClientApp folder in comparison to a similar Angular 8 and Web API project:
Firstly, the 'dist' folder seems to be missing entirely. This absence likely stems from the fact that the necessary dist files (e.g., index.html, runtime.xxx.js, main.xxx.js) are not being generated. In contrast, the non-functional project contains an 'out-tsc' folder which appears to house duplicates of TypeScript files compiled to JavaScript.
Secondly, the malfunctioning project's published ClientApp directory includes angular.json, tsconfig.json, and various other JSON files that are absent from the functional project's publication.
The issue appears to be connected to the publish process or the generation of TypeScript files, but I am uncertain about the resolution steps. Here are some additional insights that may offer valuable details:
A snippet from startup.cs:
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/dist";
});
// *snip*
app.UseSpaStaticFiles();
app.UseSpa(spa => {
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseAngularCliServer(npmScript: "start");
}
});
An excerpt from angular.json:
"outputPath": "dist"
The complete tsconfig.json file:
{
"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
}
}