title: Angular 4: Routing to a route doesn't work
body: <p>There is some fundamental concept of routing in Angular 4 that I don't understand.</p>
  
  <p><strong>index.html</strong>:</p>
  
  <pre><code>&lt;base href="/"&gt;
  </code></pre>
  
  <p><strong>File structure:</strong></p>
  
  <pre><code>- app
  |- app.routings.ts
  |- collections
  |-- collection.component.ts
  |-- collection.component.html
  |-- collectioninfo.component.ts
  |-- collectioninfo.component.html
  |- shared
  |-- header.component.html
  |-- header.component.ts
  </code></pre>
  
  <p>I have a link in my header.component.html:</p>
  
  <pre><code>&lt;a class="nav-link" [routerLink]="['/collections']"&gt;
      Collections
  &lt;/a&gt;
  </code></pre>
  
  <p>If I click it I land on localhost:4200/collections. When a button is clicked, the url is programmatically changed (in collection.component.ts):</p>
  
  <pre><code>this.router.navigate(['/collections/', collection.name]);
  </code></pre>
  
  <p>I end up on localhost:4200/collections/name - all fine. Now I programatically want to get back to /collections (in collectioninfo.component.ts):</p>
  
  <pre><code>this.router.navigate(['/collections']);
  </code></pre>
  
  <p>But that doesn't work. The url doesn't change and I get an error that says a parameter couldn't be loaded - so apparently /collections/name is being loaded again. Thought it might is a path issue, but things like this also don't work:</p>
  
  <pre><code>this.router.navigate(['../collections']);
  </code></pre>
  
  <p>Additional info: When I manually reload the page while being on /collections I'm being forwarded to the home page again, but I think that is another issue and not related to this behaviour.</p>
  
  <p><strong>app.routing.ts</strong>:</p>
  
  <pre><code>const APP_ROUTES: Routes = [
    ...
    { path: 'collections', component: CollectionComponent },
    { path: 'collections/:id', component: CollectionInfo },
  ];
  </code></pre>