Integrate Angular 8/9 with Node.js in MEAN Stack

Posted at: March 13, 2020 2:21 PM

In this lesson we will learn, how to work Angular 8/9 with NodeJS? In previous lesson we had learnt MEAN Stack with MySQL and this lesson we had created nodejs app.

Now we will create Angular application and connect with NodeJS.

Create Angular Application

Before create angular appliction must be sure intalled angular-cli in your system. If no then install angular-cli using below command

Install the Angular CLI

Create new application

Press "y" for create routing module and press Enter key.

Select stylesheet format for this application and press Enter key. If you want another stylesheet format then you can select format by press up-down arrow key.

Load application directory "meanapp" and run application.

Create Components and Services

Now stop the Angular application by pressing ctrl + c and create components and services.

Create users and 404 page component

Create users service into services folder.

Edit file src/app/app.component.html

Routing

Edit file src/app/app.routing.module.ts

Services

Create two service files src/app/services/message.service.ts and src/app/services/http-error-handler.service.ts for showing http error messages.

message.service.ts

http-error-handler.service.ts

app.module.ts

Edit src/app/app.module.ts for import HttpClientModule, HttpErrorHandler and MessageService. And add service HttpErrorHandler and MessageService providers to the application dependency injectors.

Why import HttpClientModule?

For http service use HttpClient. HttpClient is Angular's mechanism for communicating with a remote server over HTTP. HttpClient available everywhere in the your app to import HttpClientModule in app.module.ts

Set varialble in environments

Edit file src/environments/environment.ts and src/environments/environment.prod.ts for set variable of api base url for development and production mode of your application.

src/environments/environment.ts

src/environments/environment.prod.ts

User Service

Edit file src/app/services/users.service.ts for connect nodejs api. In this service I have used http.get method for fetch users.

Message Component

Edit file src/app/message/message.component.ts and import MessageService for showing messages.

src/app/message/message.component.html

Users Component

Edit file src/app/users/users.component.ts and import UserService

Edit file src/app/users/users.component.html

Changes in NodeJS

Edit file routes/users.js

Conclusion

In this lesson we have created application in Angular 8/9 and use services, routing, providers and http error handlers for showing http error messages etc. And connect Angular application with Node.JS. Next lesson we will learn user registration in MEAN application.

This lesson also available on YouTube
integrate angular 8/9 with nodejs angular 8/9 with nodejs angular 8/9 connect to rest api angular 8/9 connect to mysql run angular app with node angular 8/9 and node js integration angular 8/9 with node js example

More Posts - MEAN Stack

Please leave comments

0 Comments