Solution 1 :

If you’re using HTML5 mode in the $location service, you can link to the page relatively from the root of the app:

<a href="/products.html">Products</a>

That stops the $location service from rewriting the href. More: angular docs

Solution 2 :

where have you placed your products.html file because what i think is that this page is not being served on this location(localhost:4200/products.html). i am assuming that the products page is an angular component if it is then you can simply implement the click event on the tag and on click you can navigate the user to this route and refresh the app using the following code

this.router.navigateByUrl('products').then(() => {

if its not an angular component then you have to conform that this page is being served on the server location from which you are calling it just write the link


on the browser if this page doesnot show then the problem is with the way you are serving this page to server because it means that the page is not found on this path. and you cannot call the html pages that way you are doing in localhost. just right click on the products.html file where ever it is in your computer and click on open with option choose a browzer and open file in the browzer and you will see the url on the search bar of the browzer just copy the url and paste it in href=”/paste copied_url here/” and now it should open the products.html file.
Hope this helps. if you have any questions just comment.

Problem :

Is it possible to change the URL using href in html? If i’m clicking the <a href="http://localhost:4200/products.html>Products</a> from the index.html file. The url is changing 1 second and go back to the http://localhost:4200/

Even my src/app/home/home.component.html have <a href="http://localhost:4200/products.html>Products</a> is still going back to the http://localhost:4200/ when I clicked the link.

I searched a lot about this problem but all suggestion is about the routing. But I want to refresh the browser by clicking. If href is not possible please give me any idea to solve this problem. Please help me about this problem. Thank you in advance!


Comment posted by Dave

Hi Sir Fahad, the first one is i’m not getting the point 🙁 can you tell me where I will put this code

Comment posted by Fahad Jadun

your page (products.html) is an angular component or a seperate html page??

Comment posted by Dave

It is in the outside of the app folder, I don’t know what is angular component means, i’m sorry. I’m trying my best to understand you. I’m from pure php and html development, i’m so new about this framework. :(( For you to know, the index.html & products.html is in the same path.

Comment posted by

Sorry i didn’t knew that you were new to angular i would have used some simple words. Just do one thing fist use href=”