Search code examples
angularangular-routing

# base routing is not working in angular 6

When I redirect page using below code. A page will redirect to page 3 but not redirect to div third.

this.router.navigateByUrl('/page5#third');

And when I hit URL http://localhost:4200/page5#third then a page will redirect to dit third. If any another way for # base routing in angular then please suggest.

here is my HTML code.

<div id="first">
  <div>
    <h2>Image 1</h2>
  </div>
  <img src="assets\img\pexels-photo-39811.jpeg">
</div>
<div id="second">
  <h2>Image 2</h2>
  <img src="assets\img\pexels-photo-459225.jpeg">
</div>
<div id="third">
  <h2>Image 3</h2>
  <img src="assets\img\pexels-photo.jpg">
</div>
Solution

  • It sounds like you are expecting the # (hash) in the route to navigate to a particular place in the page? (not asking about Hash-based routing?)

    See this article: https://medium.com/lacolaco-blog/introduce-router-scroller-in-angular-v6-1-ef34278461e9

    Or you could try the fragments feature documented here: https://angular.io/guide/router#query-parameters-and-fragments