Search code examples
angularangular2-routingrouterlink

Angular 2 - routerLink doesn't work with external links

I'm trying to work with routerLink with external links. The links are exposed on index.html (that's like a menu from an external App), like this:

Index.html

<body>
  <div>
    <ul>
      <li><a onclick="window.changePage('home')" routerLink="/">Home</a>
      </li>
      <li><a onclick="window.changePage('info')" routerLink="/">Info</a>
      </li>
    </ul>
  </div>
  <app-root></app-root>
</body>

And the problem seems like angular doesn't load RouterModule when I access from this external links. If I navigate by this.router.navigate(....) this works fine. I put an example here: plunker

Step 1: Click on Home and in Go to Info button. You can see that "Go to Info" has a routerLink and you can click on it. Step 2: Refresh the page. Click on Info and you'll see that "Go to Info" can't be clicked it. How can I force angular load RouterModule with external links?

Solution

  • It is better to router that in your .ts file.

    In the anchor tag ,just call the function window.changePage('home') and similarly window.changePage('info'),and

    In .ts file inside the function navigate it.