Angular 13 Project to Upload Single or Multiple Files to Node.js & Express Server Using Multer Library in TypeScript

 

 

Making the FrontEnd of Angular App

 

 

First of all we will make the angular frontend of the application and here first of all make a new angular project by using the below command

 

 

ng new angularapp

 

 

cd angularapp

 

 

And now you need to include the httpclientmodule inside the app.module.ts file as shown below

 

 

app.module.ts

 

 

 

 

So as you can see we have successfully included the httpclient library

 

 

And now we can include the app.component.html template as shown below inside which we will be having the form fields to upload the

 

files to express server

 

 

app.component.html

 

 

 

app.component.css

 

 

And now you need to make the app.component.ts file and copy paste the following code

 

 

app.component.ts

 

 

 

 

And now if you launch the angular app at port 4200 your app will look as shown below

 

 

 

 

 

Making the Backend of Angular App in Node.js & Express

 

 

Now for making the backend for the angular app make a new folder and make a new express app by the below commands as shown below

 

mkdir backend

 

cd backend

 

npm init -y

 

npm i express

 

npm i multer

 

npm i cors

 

 

Now make a app.js file and copy paste the following code

 

 

app.js

 

 

 

And now for uploading files inside the server you need to make the uploads folder inside the root directory

 

 

 

 

 

Packaging the Angular App For Production With Node.js and Express

 

 

npm run build

 

 

This will create the dist folder inside the root directory and now you need to copy this folder and paste it inside the backend directory

 

 

 

 

Just add these two lines inside the app.js file in the backend to open the index.html of angular app when called inside express app

 

 

 

Leave a Reply