title: Angular Routerlink doesn't work
body: <p>I'm just getting a grip on the Angular RouterModule, please bear with me.</p>
  
  <p>I've setup an app-component with buttons that let the user login and register. But Angular returns a 404 when the link is clicked; I can't understand why, I've followed the example.</p>
  
  <p>Would any-one have any idea as to where I may find the issue?</p>
  
  <p>I have 2 important modules:</p>
  
  <ol>
  <li>the user-module which contains the authentication service, as well
  as login/register/... components</li>
  <li>the entry-module which contains the actual application</li>
  </ol>
  
  <p>// app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { HttpClientModule } from '@angular/common/http';
  import { AppComponent } from './app.component';
  import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
  import { RouterModule, Routes } from '@angular/router';    
  import { UserModule } from './user/user.module';
  import { AuthenticationService } from './user/authentication.service';
  import { AppRoutingModule } from './app-routing/app-routing.module';
  import { EntryModule } from './entry/entry.module.ts';
  
  const appRoutes: Routes = [
    { path: 'entries', component: EntryListComponent },
    { path: '', redirectTo: 'entries', pathMatch: 'full'}, // empty
    { path: '**', component: PageNotFoundComponent} // catch-all
  ];
  
  @NgModule({
    declarations: [
      AppComponent,
      PageNotFoundComponent
    ],
    imports: [
      BrowserModule,
      UserModule,
      AppRoutingModule,
      RouterModule.forRoot(appRoutes),
      HttpClientModule
    ],
    providers: [
      AuthenticationService
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>// app.component.html (excerpt)</p>
  
  <pre><code>  &lt;button *ngIf='!(currentUser | async) else ng-hide'class="ui button" title="Login"&gt;
      &lt;a class="item" routerLinkActive='active' routerLink="/login"&gt;
        &lt;i class="large black user icon"&gt;&lt;/i&gt;
      &lt;/a&gt;
    &lt;/button&gt;
    &lt;button *ngIf='!(currentUser | async) else ng-hide' class="ui button" title="Register"&gt;
      &lt;a class="item" routerLinkActive='active' routerLink="/register"&gt;
        &lt;i class="large black user plus icon"&gt;&lt;/i&gt;
      &lt;/a&gt;
  </code></pre>
  
  <p>// app-routing.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { RouterModule, Routes } from '@angular/router';
  import { PageNotFoundComponent } from '../page-not-found/page-not-found.component';
  import { SelectivePreloadStrategy } from './SelectivePreloadStrategy';
  import { AuthGuardService } from '../user/auth-guard.service';
  
  const appRoutes: Routes = [
    {
      path: 'entry',
      canActivate: [ AuthGuardService ],
      loadChildren: 'app/entry/entry.module#EntryModule' // &lt;&lt;&lt; THIS IS IMPORTANT
    },
    { path: '', redirectTo: 'entry', pathMatch: 'full'},
    { path: '**', component: PageNotFoundComponent}
  ];
  
  
  @NgModule({
    imports: [
      CommonModule,
      RouterModule.forRoot(appRoutes, { preloadingStrategy: SelectivePreloadStrategy })
    ],
    declarations: [],
    exports: [
      RouterModule
    ]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>I'm not quite sure if the problem lies in any of those files, but the Github repo can be found <a href="https://github.com/Pieter-JanVanDamme/Cartabell" rel="nofollow noreferrer">here</a>.</p>
  
  <p>Any help would be greatly appreciated...</p>