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








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










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








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







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