Styjun

I have a project which is currently running on express.js, but i want to add angular to the project to handle the front end thereby making it a single page application, the website currently reloads the whole content from the server when a link is clicked thus redoing what has already been done. So I was hoping to make angular load all the website and only the part which is needed can be provided by the server.

I have the css, js, images etc in a public folder, while the html(using templating engine) is inside the views folder.

The current way things are done is when a route is called the data which belongs to that page(e.g. info, forms, images etc) is loaded via the route into the view then everything would be loaded from the views folder but I am looking at a better way of only sending the information that is needed and not sending the whole site content (kind of).

The routes are all determined in node.js angular may not even know what links would exist until at run time, angular would basically receive the links from node.js at run time.

Please how can I achieve this.

Note: angular is just a add-on existing and main work is on node

Without any code the answer is going to be quite abstract but here are the main steps that you need to do:

1. You will need to setup the express.static middleware so that the express app will serve your angular app (typically index.html) and the images:

app.use(express.static('public')) //images in here

app.use(express.static('dist')) //index.html in here

For this to work you will need to specify the --output-path option during ng build:

ng build --output-path ./dist

Also, note that each angular components has its own style-sheet. So you will either have to move those .css styles you defined in each component's stylesheet or add them in the angular.json file under the styles array:

"styles": [
 "styles.css",
 ],

2. Modify your express app to only serve the index.html file. Everything else will be handled by the API router which will only serve data to the angular app:

// Set our api routes
app.use('/api', api);

// Catch all other routes and return the index file
app.get('*', (req, res) => 
 res.sendFile(path.join(__dirname, 'dist/index.html'));
); 

3. You will need to setup the Angular router to handle the navigation between components. This will be specific to your project structure but there are plenty of tutorials out there to help you set it up.

Let me know if you need any further clarifications.