title: Angular 2 Links To External URLs Treated As Relative Paths For Routing
body: <p>I've created a component which receives properties set on it's selector:</p>
  
  <pre><code>&lt;app-navigation-card
          label="My Label"
          description="Description of Item"
          type="download"
          [links]="[{path:'https://somedomain.com/somefile.zip', label:'Download'}]"
  &gt;&lt;/app-navigation-card&gt;
  </code></pre>
  
  <p>The inputs are set up in the NavigationCard class:</p>
  
  <pre><code>import { Component, OnInit, Input } from '@angular/core';
  
  @Component({
    selector: 'app-navigation-card',
    templateUrl: './navigation-card.component.html',
    styleUrls: ['./navigation-card.component.scss']
  })
  export class NavigationCardComponent implements OnInit {
  
    @Input() label: String;
    @Input() description: String;
    @Input() links: Object;
    @Input() type: String;
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>In the template:</p>
  
  <pre><code>&lt;div class="label"&gt;{{label}}&lt;/div&gt;
  &lt;div class="description"&gt;{{description}}&lt;/div&gt;
  &lt;ul *ngIf="links != undefined" class="links"&gt;
    &lt;li *ngFor="let link of links" [routerLink]="link.path"&gt;
      &lt;span *ngIf="type == 'download'"&gt;&lt;a href="{{link.path}}"&gt;{{link.label}}&lt;/a&gt;&lt;/span&gt;
      &lt;span *ngIf="type == 'navigation'" [routerLink]="link.path"&gt;&lt;{{link.label}}&lt;/span&gt;
      &lt;div&gt;&lt;/div&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>If type <code>== navigation</code>, the router redirects to the correct component, but when it's a download, I'm getting this error:</p>
  
  <blockquote>
    <p>EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL
    Segment: 'style-guide/https%3A/somedomain.com/somefile.zip'</p>
  </blockquote>
  
  <p>This URL works fine when explicitly entered in the href of a link but not via property binding. Any idea how to remedy this?</p>