title: Angular 4+: RouterLink in <a> element not working properly
body: <p>I have placed my <code>AppRoutingModule</code> inside <code>imports</code> of <code>@NgModule</code> of <code>AppModule</code> class.</p>
  
  <p>AppRoutingModule is defined in such way: </p>
  
  <pre><code>const APP_ROUTES : Routes = [
      { 
          path: '', 
          redirectTo: 'home', 
          pathMatch: 'full',
      },
      {
          path: 'home', 
          component: HomeComponent
      },
      {
          path: 'lesson-offers', 
          component: LessonOffersComponent
      },
  
      { path: '**', redirectTo: 'home' }
  ]
  </code></pre>
  
  <p>I have placed <code>&lt;router-outlet&gt;&lt;/router-outlet&gt;</code> in the app.component.html.</p>
  
  <p>Pages displays correctly based on URLs: </p>
  
  <pre><code>localhost:5000/  
  localhost:5000/home  
  localhost:5000/lesson-offers
  </code></pre>
  
  <p>The problem is in my header.component.ts where I am trying to add routerLink to home page. I have tried such solutions: </p>
  
  <pre><code>&lt;img routerLink="home" ... /&gt;
  &lt;img [routerLink]="/home" ... /&gt;
  &lt;a routerLink="home"&gt; &lt;img ... /&gt;&lt;/a&gt;
  &lt;a [routerLink]="home" ... &gt;&lt;img ... /&gt;&lt;/a&gt;
  </code></pre>
  
  <p>Firstly when I placed routerLink in <code>&lt;img&gt;</code> element such directive hasn't been found. Then in <code>&lt;a&gt;</code> element it makes casual <code>&lt;a href="/home"&gt;</code> from routerLink and makes full page reloading ! Shouldn't it reload only content of <code>&lt;router-outlet&gt;</code>?</p>
  
  <p>Maybe it has some meaning that my layout looks like this: </p>
  
  <pre><code>// AppComponent HTML
  &lt;header-bar&gt;&lt;/header-bar&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>and <strong>routerLink</strong> is placed on element in <strong>children component</strong> <code>&lt;header-bar&gt;</code> (logo) and should navigate on <code>&lt;router-outlet&gt;</code> <strong>in its parent</strong>?</p>
  
  <p>But I have also tested this behaviour using <strong>routerLink</strong>s placed <strong>directly inside AppComonent</strong> and nothing has changed! <strong>RouterLink</strong> still reloads the webpage!: </p>
  
  <pre><code>&lt;header-bar&gt;&lt;/header-bar&gt;
  &lt;a routerLink="home"&gt;Home&lt;/a&gt; 
  &lt;a routerLink="lesson-offers"&gt;Lesson Offers&lt;/a&gt;
  &lt;a routerLink="page-not-found"&gt;Not Exsists&lt;/a&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>