How to connect a framwork with Net 6

Question

Im getting really confused with the latest update.
I am trying to connect Angular or React to asp net core
I know there is a Angular template but I want know how this works

so there is not much info in the program aside from Addcontrollers and the appControlerRoute
I copied everything from the Program.cs in Angular template to my empty Api template.

I also noticed that the spaService is now in the LaunchSettings.json
Profiles & IIT Express:
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development",
"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"
}

I have done the exact same thing, i have installed Angular And Called the map "ClientApp"
everything seems to be the same.
after i Run it it just show a error page and it sends me to "https://localhost:7130
wich is probably from "applicationUrl": "https://localhost:7130;http://localhost:5130", in the launchSettings.json

I tried to look up the asp net core document but could not find anything about Connection framworks like Angular
its very confussing I miss the old asp net core in my opion it was much better. but since its no longer supported i have no other choice

Can someone help figuring this out

Answer 1

That is exaclty what I did, I have copied the"ASP.NET Core with Angular" template with my standart "Asp.net Core Web Api" with the "Standalone TypeScript Angular"(+Added intergration for Asp.net web api) combined. then I checked for all the Extra Intergrated Files in Angelar to see if the matched the "Asp net core Angular template"
I ren into multiple Errors in Angular it took me several hours to Trying to fix that and eventuality it did not even work.

Eventuality I used the Asp net core Angular template And updated the Old Angular version to 13.0.2
So i did manage to use it as 1 project. but that im not able to Use my own Angular map created outside of the Visual studio template
that is not good at all. I dont understand why you want to get rid of system that worked fine using in asp net core 5 and replace that
with something that is so bad.

Im sorry to say but this new update is a disaster it took me several days trying to get this to work putting all my projects on a hold
And the thing that annoys me the most it that there are no good and clear Document to support this.

It also takes Ages to start a project once i press start to see the project i have to wait several minutes.
I hope they change something about this as soon as possible
or allow users to keep using the old Spa system it was much faster when starting up and 100 times more easier to setup

Answer 2

its really pretty simple. instead of your asp.net core application being a proxy to the node dev server (like .net 3.1 -> 5), now the node dev server proxies to asp.net core application. also the startup is done by msbuild/dotnet.exe injecting the code into your application. this means the startup setting are in the launch file, rather than app settings file.

this all follows the instructions you will see at the react, angular or vue site for the server hosting the api. typically you would start the asp.net core app, then run npm start (after configuring proxy support).

the new launch setting support in msbuild/dotnet.exe allow this to be done for you. the main SPA settings are in project file:

<ItemGroup>
    <SpaRoot>ClientApp\</SpaRoot>
    <DefaultItemExcludes>$(DefaultItemExcludes);$(SpaRoot)node_modules\**</DefaultItemExcludes>
    <SpaProxyServerUrl>https://localhost:44473</SpaProxyServerUrl>
    <SpaProxyLaunchCommand>npm start</SpaProxyLaunchCommand>
</ItemGroup>

at the node project root source (at least for react which uses express): ClientApp/src/setupProxy.js is a standard express.js proxy middleware. this file has the default ports for the asp.net core app, but will use env variables set by running the app. you will need to update the routes in here as you add more api routes

so when you run the debug core app, the launch settings are used to get the asp.net core server urls (the proxy ports are from the project file) .

1) msbuild/dotnet.exe injects the spa services dll and starts the app.
2) the app starts the node dev server (npm start) in the ClientApp folder and passes its port numbers and the port number the proxy should use,

there is a little trickery with the browser. first the browser is opened from the asp.net core site with the redirect message.
when the node dev server starts up it replaces the page with its startup page.

note: I only use react and it all works. I've upgrade .net 5 sites to .net 6 with no issues.

Answer 3

Sorry, I did not realize you were creating two separate projects instead of a combined spa project. this is much simpler.

first setup.

• install node
• install ng (npm install -g @angular/cli)
• install node support for visual studio (if you have the template this is probably there)

build and run the asp.net core project.

this is a webapi project with the static file handler that in production (not debug) will host the angular application. in production you will publish angular build folder to wwwroot. if done correctly, on the production server there will an index.html at the root of wwwroot.

in debug/dev mode, you just run the webapi application. I find it handy to implement swagger for testing. but you can use postman. note the url port number

the project will be easy to call from angular if all webapi routes start with /api/

build and run the angular project

this is a vanilla angular node project. I've never used the angular template, but but i believe it uses the ng cli. the add integration adds proxy support for the angular dev server. at the command-line

• cd to angular project folder (should have a package.json file at root)
• npm install
• ng serve (check the run command in package.json)

the angular project should be running. fix any compile errors until it runs. once it runs, stop and update the proxy.config.json file with the routes and binding to the webapi project. restart, and angular should be able to call the webapi via /api/...

see: https://angular.io/guide/build#proxying-to-a-backend-server

once you have working form the command line, open as vs node project, and get working from vs.

combine to same solution
once both projects are working add them to the same solution and configure multi startup. the node project is a node command line project, the core can be iis express or core app.

you can probably edit the launch settings for the ports.

Answer 4

I did every thing that the Tutorial said on : https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-angular?view=vs-2022
I have created the angular standalone project with intergraded asp.net core files for connection.
I have put the map into my asp.net core project. i have copied the first ApplicationUrl and applied it into the proxy.conf.js file just like in the docoment

const PROXY_CONFIG = [  
  {  
    context: [  
      "/weatherforecast",  
    ],  
    target: "https://localhost:7128",  
    secure: false  
  }  
]  
  
module.exports = PROXY_CONFIG;  
  

I have added "ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy" under "environmentVariables": { in the asp net core launchSettings
in the profiles object and in the IIS express object.

then i Adjusted the program.cs just like in the asp.netcore angular template:

var builder = WebApplication.CreateBuilder(args);  
  
// Add services to the container.  
  
builder.Services.AddControllers();  
  
  
var app = builder.Build();  
  
// Configure the HTTP request pipeline.  
if (app.Environment.IsDevelopment())  
{  
    app.UseHsts();  
}  
  
app.UseHttpsRedirection();  
app.UseStaticFiles();  
app.UseRouting();  
  
  
app.MapControllerRoute(  
    name: "default",  
    pattern: "{controller}/{action=Index}/{id?}");  
  
app.MapFallbackToFile("index.html"); ;  
  
app.Run();  
  

map structure + launchSettings.json from asp.net core:

this are all the files that were adjusted.

please help me out im trying to figure this stuff out for more then 2 days now
I cant even get started with building a new website and its giving me a big headache

Answer 5

Thank I have got it running now. my last question is. how can i combine both projects into one
according to the tutorial you should first create the "angular standalone template"
and then create the back-end. then change some options to make it run. it did work now
I think the problem that i had earlier was that i builded the project before the changed the proxy settings

but i want it to turn into 1 project instead of 2 projects in the "Solution"

So i first create the asp.netcore back-end with Web-api template. and then created the
"Angular standalone project" and put it inside the asp.netcore map and put it in a new Map named "ClientApp"
Picture bellow:

as you can see the "ClientApp" is inside the Asp.net.core project as i wanted it
And it works fine. but as soon as i remove the Clientapp project above the "Restaurant"(asp net core)
asp net core fails to start.

So i looked into the Angular asp net core template that only uses 1 project and i saw they use the spa proxy.
so I added the spa proxy in the launchSettings.json just like in the angular asp net core template. and it still did not work.
I would like to know how to turn this into one project instead of 2.

I also can not find any step-by-step tutorial on this wich makes it even more difficult to understand this.
I find that very strange since allot of people are using asp net core in combination with frameworks like Angular.