CODEWITHSUNDEEP
angularnginxangular2-routing
Joe Berthelot
Joe Berthelot

Reputation: 735

External linking isn't working in Angular 2

Website for example: http://oktafox.com

It's setup with routing so when you click pages or links the url changes to something like:

/articles
/work
/articles/1

But if you were to click this link: http://oktafox.com/articles/1

It throws a 404. How can I set it up so it goes to the desired page rather than a 404?

Upvotes: 0

Views: 419

Answers (2)

Joe Berthelot
Joe Berthelot

Reputation: 735

Frank Modica hit the nail on the head with his answer above. After a little digging I figured out it was a configuration issue with my Nginx server.

Here's a link to the fix: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-configure-your-server-to-work-with-html5mode

Upvotes: 1

Frank Modica
Frank Modica

Reputation: 10526

It looks like your server-side routing needs some configuration. When you hit http://oktafox.com your server is sending back the index page, and then Angular kicks in and sets up routing. That's why clicking on links works after that point.

But if you go directly to http://oktafox.com/articles, your server is trying to find that document but it doesn't exist. Your server has to be told to always send back the index page, so that Angular can then read "/articles" from the URL and continue routing correctly.

Note that if you switch to hash-based routes in Angular (like http://oktafox.com/#/articles) you may be able to avoid the issue altogether, since the server doesn't see that portion of the route. But it is not recommended: https://angular.io/docs/ts/latest/guide/router.html

Upvotes: 2

Related Questions