Search code examples
angularangular-router

Does Angular 4 allow rout to external routes in same domain?

There are two different angular apps app-1 and app-2 under single domain mydomain.com

like this:

  • mydomain.com/app-1
  • mydomain.com/app-2

The two apps didn't know anything about each other

Problem is wanting to navigate from app-1 to app-2 with routerLink

<a [routerLink]="['app-2']" > move <a/>

Does Angular 4 allow rout to external routes in same domain ?

Solution

  • it seem not possible to do it with routerLink. RouterLink directive use the router description to do his work so it will not make you go to another application. Even if you try to navigate by "url" like this : 

    this.router.navigateByUrl('mydomain.com/app-2');

    It will valide the url against the router description and told you it doesn't match (Error: Cannot match any routes. URL Segment).

    It think here, you need to use standard javascript navigation to change website.

    Like this :

    <a href="http://domain2.com/app2/home"></a>

    You could also mix it with an angular pipe if you have many url moving to your website. We can imagine something like this :

    <a [href]=" '/home' | toApp2Url"> hey</a>

    With a pure pipe like this :

    @Pipe({name: 'toApp2Url', pure: true})
export class ToApp2Url implements PipeTransform {
  transform(value: string): string {
    return 'http://domain2.com/app2' + value;
  }
}