I'll appreciate some assistance debugging my code to know what I am missing or doing wrong.

Please feel free to review related code at my git repository at this link . The backend application in the repo uses .NET 8, I just updated my local version to .NET 9 and Angular version is 19. I have started the consolidation process, so might find a copy of the Angular project in the API project.

Overview

I have initially created an Angular frontend app and a backend API, both applications work as expected when you spin them up independently.

Task

Merge both projects into one, such that when I invoke the dotnet run command, both applications are started on the same port and at the same time.

Current State

To achieve the task above I am using the SpaApplicationBuilderExtension and calling the UseSpa method to invoke the npm start command in the package.json file in my UI application (image below).

Issues

1. I run into https validation issue since Angular runs on http in development
2. I get the error message in the image below when I attempt to navigate to the UI.

Workarounds

To navigate the http issue, I have commented out the UseHttpsRedirection middleware, which seem to work. Also I have reviewed and attempted solutions that I could lay my hands on, but non seem to work to fix either of the issues.

Questions

1. How do I configure my application to run without commenting out the UseHttpsRedirect middleware?
2. How do I fix the issue #2 mentioned above
3. I am opened to feedback and would appreciate comments and opinions from experienced folks out there regarding my coding pattern and anything you think would be beneficial at making me a better .NET developer.

Thank you in advance.

I'll appreciate some assistance debugging my code to know what I am missing or doing wrong.

Please feel free to review related code at my git repository at this link https://github/slim1477/slim-financial. The backend application in the repo uses .NET 8, I just updated my local version to .NET 9 and Angular version is 19. I have started the consolidation process, so might find a copy of the Angular project in the API project.

Overview

I have initially created an Angular frontend app and a backend API, both applications work as expected when you spin them up independently.

Task

Merge both projects into one, such that when I invoke the dotnet run command, both applications are started on the same port and at the same time.

Current State

To achieve the task above I am using the SpaApplicationBuilderExtension and calling the UseSpa method to invoke the npm start command in the package.json file in my UI application (image below).

Issues

1. I run into https validation issue since Angular runs on http in development
2. I get the error message in the image below when I attempt to navigate to the UI.

Workarounds

To navigate the http issue, I have commented out the UseHttpsRedirection middleware, which seem to work. Also I have reviewed and attempted solutions that I could lay my hands on, but non seem to work to fix either of the issues.

Questions

1. How do I configure my application to run without commenting out the UseHttpsRedirect middleware?
2. How do I fix the issue #2 mentioned above
3. I am opened to feedback and would appreciate comments and opinions from experienced folks out there regarding my coding pattern and anything you think would be beneficial at making me a better .NET developer.

Thank you in advance.

• c#
• angularjs
• asp-core-webapi
• asp-core-8

• Merge both projects into one and then both applications are started on the same port sound kind of like a contradiction. You want a single app or two apps? If you want the the former, a single app, then you want your angular frontend served from within the app. You don't need the app to invoke the npm start that effectively calls ng serve which effectively starts a webpack dev server. – Wiktor Zychla Commented Feb 14 at 18:30

1 Answer 1

The easiest solution here is to create wwwroot folder and move all build file into this folder and will automatically start serving those files.

you need to do 2 adjustments into your program file

1. Include this code to server angular when URL does not start with api

    app.Use(async (context, next) =>
    {
       string path = context.Request.Path.Value;
       await next();
       if (context.Response.StatusCode == 404 && 
          !Path.HasExtension(context.Request.Path.Value))
       {
          context.Request.Path = "/";
          await next();
       }
    });
   

2. Add UseStaticFile() which is already added.

that's how we setup 2 project into one host too.