title: Angular 6 routerlink in child module and router-outlet in parent (app.component)
body: <p>I'm using the RouterModule and have a problem with the routerLinks.</p>
  
  <p>The routerLinks doesn't work (the anchor isn't clickable) because they are in a child module and I don't know how to fix this problem.</p>
  
  <p>Hierarchy:</p>
  
  <p>App.Module (router-outlet) -> Elements Module -> Navi Module (routerLinks)</p>
  
  <p>app.module.ts</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { RouterModule } from '@angular/router';
  import { HttpClientModule } from '@angular/common/http';
  import { ElementsModule } from './elements/elements.module';
  
  import { LandingComponent } from './pages/landing.component';
  import { GenreComponent } from './pages/genre.component';
  import { SinglePostComponent } from './pages/singlepost.component';
  import { ListComponent } from './pages/list.component';
  import { AppComponent } from './app.component';
  
  import { DataService } from './data.service';
  
  @NgModule({
      imports: [
          BrowserModule,
          ElementsModule,
          HttpClientModule,
          RouterModule.forRoot([
              {path: "", component: LandingComponent},
              {path: "post/:id", component: SinglePostComponent},
              {path: "lists", component: ListComponent}
          ], {
              useHash: true,
          })
      ],
      declarations: [
          AppComponent,
          LandingComponent,
          GenreComponent,
          SinglePostComponent,
          ListComponent
      ],
      providers: [DataService],
      bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>app.component.html</p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>navi.componentent.html</p>
  
  <pre><code>&lt;a routerLink="/movies"&gt;Movies&lt;/a&gt;
  </code></pre>