Angular + Node.js - Connect an Angular App to a Node.js API
This is a quick post to show how to connect an Angular front-end app to a Node.js 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 Node.js and Express 4.
Download and Start the example Angular App
Follow these steps to run the Angular 14 front-end app.
- Install Node.js and npm from https://nodejs.org.
- Download or clone the Angular project source code from https://github.com/cornflourblue/angular-14-jwt-authentication-example
- Install all required npm packages by running
npm installornpm ifrom the command line in the project root folder (where the package.json is located). - Start the app by running
npm startfrom the command line in the project root folder, this will compile the Angular app and automatically launch it in the browser on the URLhttp://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 Node.js 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 Node.js API
Follow these steps to run the Node.js + Express 4 backend API.
- Download or clone the project source code from https://github.com/cornflourblue/node-jwt-authentication-api
- Start the api by running
npm startfrom the command line in the project root folder, you should see the messageServer listening on port 4000.
For more info on the Node API see Node.js + Express 4 - JWT Authentication Tutorial with Example API.
Connect the Angular App to the Node.js 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 Node.js + Express API.
That's it! You now have a full stack Angular + Node.js application running.
Need Some Angular Help?
Search fiverr for freelance Angular developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!