Published:

Angular + .NET - Connect an Angular App to a .NET API

This is a quick post to show how to connect an Angular front-end app to a .NET back-end API.

The below example is a simple full-stack login application, the front-end client is built with Angular 14 and the back-end API is built with .NET 6.0.


Download and Start the example Angular App

Follow these steps to run the Angular 14 front-end app.

  1. Install Node.js and npm from https://nodejs.org.
  2. Download or clone the Angular project source code from https://github.com/cornflourblue/angular-14-jwt-authentication-example
  3. Install all required npm packages by running npm install or npm i from the command line in the project root folder (where the package.json is located).
  4. Start the app by running npm start from the command line in the project root folder, this will compile the Angular app and automatically launch it in the browser on the URL http://localhost:4200.

Backend-less by default

The Angular app runs with a fake backend by default to enable it to run completely in the browser without a real API (backend-less), we'll switch to connect to the .NET API below once it's up and running.

For more info on the Angular App see Angular 14 - JWT Authentication Example & Tutorial.


Download and Start the example .NET API

Follow these steps to run the .NET 6.0 backend API.

  1. Install the .NET SDK from https://dotnet.microsoft.com/download.
  2. Download or clone the project source code from https://github.com/cornflourblue/dotnet-6-jwt-authentication-api
  3. Start the api by running dotnet run from the command line in the project root folder (where the WebApi.csproj file is located), you should see the message Now listening on: http://localhost:4000.

For more info on the .NET API see .NET 6.0 - JWT Authentication Tutorial with Example API.


Connect the Angular App to the .NET API

Back in the Angular app, remove or comment out the line below the comment // provider used to create fake backend located in the /src/app/app.module.ts file, then restart the Angular app and it should now be connected with the .NET API.

That's it! You now have a full stack Angular + .NET application running.

 


Subscribe or Follow Me For Updates

Subscribe to my YouTube channel or follow me on Twitter, Facebook or GitHub to be notified when I post new content.

Other than coding...

I'm currently attempting to travel around Australia by motorcycle with my wife Tina on a pair of Royal Enfield Himalayans. You can follow our adventures on YouTube, Instagram and Facebook.


Need Some Angular Help?

Search fiverr to find help quickly from experienced Angular developers.



Supported by