How to handle angular2 route path in Nodejs?

Question

I am working on a NodeJS app with Angular2. In my app, I have a home page and search page. For home page I have an HTML page that will render for the localhost:3000/

Answer 1

I've been digging this topic for quite a time , and try a lot of method that don' work . If you are using angular-cli and with express , I found a solution if the chosen answer doesn't works for you .

Try this node module : express-history-api-fallback

[ Angular ] Change your app.module.ts file , under @NgModule > imports as following :

RouterModule.forRoot(routes), ...

This is so called : " Location Strategy "

You probably were using " Hash Location Strategy " like this :

RouterModule.forRoot(routes, { useHash: true }) , ...

[ Express & Node ] Basically you have to handle the URL properly , so if you want call "api/datas" etc. that doesn't conflict with the HTML5 Location Strategy .

In your server.js file ( if you used express generator , I've rename it as middleware.js for clarity )

Step 1. - Require the express-history-api-fallback module.

const fallback = require('express-history-api-fallback');

Step 2 . You may have a lot of routes module , sth. like :

app.use('/api/users, userRoutes);
app.use('/api/books, bookRoutes); ......
app.use('/', index); // Where you render your Angular 4 (dist/index.html) 

Becareful with the order you are writing , in my case I call the module right under app.use('/',index);

app.use(fallback(__dirname + '/dist/index.html'));

* Make sure it is before where you handle 404 or sth. like that .

This approach works for me : ) I am using EAN stack (Angular4 with cli , Express , Node )