Do you want to run Angular App on the Node.js server?

Do you want to serve your Angular app on the node.js server?
I assume that you already have an angular app now you want to render it with node.js. in this dev blog, I will explain how you can achieve this in a very easy and secure way by using view engines in node.js.

also, I will explain how you can render modify your endpoints to work with the server-side, you might using service to hit the specific backend by going on the specific route. e.g signup-route.
let's get started.
Table of content.

1)What is angular

2)What is PUG (in this tutorial I will use pug)?

3)How to render Angular application with node.js backend

What is Angular?

Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations.

What is PUG?

PUG is a robust, elegant, a feature-rich template engine for Node.js

How to render Angular application on the node.js server?

As we know that Angular is SPA(Single Page Application) we can render its content with node.js backend.
Luckily node.js provide template engines to run templates on the server-side. we can use any template engine like jade, pug, ejs to run the angular application but in this dev blog, I will use pug.
these are the steps to render angular applications with pug template engine.

1. production build an angular application by running the following command with angular cli ng build --prod
2. after successful build you will see build files by default in dist folder.
3. Install template engine by running the following command npm install --save pug
4. ```

const app = express();
app.use(express.static('../dist/interior'))//set the static path
app.set('view engine', 'pug');

5. `View-engine` setup is completed now it's time to render `Angular` app  add the following code after view engine 

app.get('/', (req, res) => {
res.sendFile('index.html',{root:__dirname})
});

6. Now when you run your node.js app you will see the angular app in action. Note: if you want to change the route you can change the above code like this to render angular app on a specific route e.g when the user hits `/angular`

app.get('/angular', (req, res) => {
res.sendFile('index.html',{root:__dirname})
});

##Complete code will look like this 

const express = require('express');
const path = require('path')
const port = 8080;
const app = express();

app.use(express.static('../dist/angular-directory'))
app.set('view engine', 'pug');

app.get('/', (req, res) => {
res.sendFile('index.html',{root:__dirname})
});

app.listen(port, () => {
console.log("Server is listening on port "+port);
});

###### run `node app.js` and visit `localhost:8080` you will see your angular app running on node.js (express server) 
That's all for this blog I hope this will help you, consider writing your thought and feedback, so I can improve my writing and help people in a better way.
Best Regards

    
      

        
      
    
  

    

Saad AbbasiFollow

    

      Hello 👋🏽
I am **Saad Abbasi**. A MEAN stack Developer.