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/ and from home page user navigate to search i.e localhost:3000/search page that I handled by angular2 routes.

I don't have the page for the search page its view render by the angular2. But when I directly hit localhost:3000/search as I don't have this routing in my node app it gives the error.

I don't know How to handle this in node app?

You should use angular2 routing using path after # as localhost:3000/#/search. This way angular 2 will get the request, not the server — binariedMe, Jan 18 '16 at 05:44
Configure your server to redirect to your start page. After quick search I [found this](http://stackoverflow.com/questions/4062260/nodejs-redirect-url) — Sasxa, Jan 18 '16 at 05:48
but in my case its not the 404 request if i do this its just render home page for instead of search page and for 404 request also — Rhushikesh, Jan 18 '16 at 05:51
My bad, I meant to say _you need to configure server to return your start page (index.html usually) if it can't find requested uri_... I don't know how to do that in node, I'm using other servers (`.htaccess` for php, middleware for local server, routes in python...), but hopefully this can lead you to the right answer... — Sasxa, Jan 18 '16 at 06:15

score 28 · Accepted Answer · answered Jan 18 '16 at 21:42

28

If you enter localhost:3000/search directly in the browser navigation bar, your browser issues an request to '/search' to your server, which can be seen in the console (make sure you check the 'Preserve Log' button).

Navigated to http://localhost:3000/search

If you run a fully static server, this generates an error, as the search page does not exist on the server. Using express, for example, you can catch these requests and returns the index.html file. The angular2 bootstrap kicks-in, and the /search route described in your @RouteConfig is activated.

// example of express()
let app = express();
app.use(express.static(static_dir));

// Additional web services goes here
...

// 404 catch 
app.all('*', (req: any, res: any) => {
  console.log(`[TRACE] Server 404 request: ${req.originalUrl}`);
  res.status(200).sendFile(index_file);
});

answered Jan 18 '16 at 21:42

user3636086

803
1
7
10

then how do i handle if there is any 404 request – Rhushikesh Jan 19 '16 at 04:59
With @RouteConfig like this: @RouteConfig([ { path: '' , component: HomeCmp, name: 'HomeCmp' }, { path: 'search' , component: SeachCmp, name: 'SearchCmp' }, { path: 'error', component: ErrorCmp, name: 'ErrorCmp' }, { path: '**', redirectTo: ['ErrorCmp'] } ]) – user3636086 Jan 19 '16 at 06:20
8

Great answer. Also, if you aren't using TypeScript, it might be something like `app.all('*', function (req, res) { res.status(200).sendFile(path.join(__dirname, '/index.html')); });` – Alex Szabo Jun 08 '16 at 12:09

score 1 · Answer 2 · answered Jan 18 '16 at 07:42

1

You need to use HashLocationStrategy

import { LocationStrategy, HashLocationStrategy } from "angular2/router";
bootstrap(AppComponent, [
 ROUTER_PROVIDERS,
 provide(LocationStrategy, { useClass: HashLocationStrategy })
]);

In your bootstrap file.

If you want to go with PathLocationStrategy ( without # ) you must setup rewrite strategy for your server.

answered Jan 18 '16 at 07:42

Vlado Tesanovic

6,369
2
20
31

provide is import from ?? – Rhushikesh Jan 18 '16 at 07:47
import { provide } from "angular2/core"; ah sorry – Vlado Tesanovic Jan 18 '16 at 07:49
can you please give some more details for the : If i want to go with PathLocationStrategy ( without # ) what i setup rewrite strategy for my server – Rhushikesh Jan 18 '16 at 07:53

score 1 · Answer 3 · edited Mar 24 '19 at 19:55

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 )

How to handle angular2 route path in Nodejs?

3 Answers3

Linked