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
– binariedMe, Commented Jan 18, 2016 at 5:44
Configure your server to redirect to your start page. After quick search I found this — Sasxa
– Sasxa, Commented Jan 18, 2016 at 5: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
– Rhushikesh, Commented Jan 18, 2016 at 5: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
– Sasxa, Commented Jan 18, 2016 at 6:15

user3636086 · Accepted Answer · 2016-01-18 21:42:02Z

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, 2016 at 21:42

user3636086

8331 gold badge8 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Rhushikesh Over a year ago

then how do i handle if there is any 404 request

user3636086 Over a year ago

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'] } ])

Alex Szabo Over a year ago

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')); });

Vlado Tesanovic · Accepted Answer · 2016-01-18 07:42:45Z

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, 2016 at 7:42

Vlado Tesanovic

6,4242 gold badges22 silver badges32 bronze badges

3 Comments

Rhushikesh Over a year ago

provide is import from ??

Vlado Tesanovic Over a year ago

import { provide } from "angular2/core"; ah sorry

Rhushikesh Over a year ago

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

Trevor Karjanis · Accepted Answer · 2019-03-24 19:55:06Z

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 )

Collectives™ on Stack Overflow

How to handle angular2 route path in Nodejs?

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related