title: Angular 5 - Routing changes url but doesn't navigate
body: <p>Currently I have three different modules:</p>
  
  <ul>
  <li>App Module -- with emtpy an array Root configuration</li>
  <li>Home Module -- with a '' path config for the homepage comp. for searching for a player</li>
  <li>Player Result Module -- shows the result of the search (either player stats or error page)</li>
  </ul>
  
  <p>Now in this player search module I have a player search result component with child components. One of the child component is a modal with a list in it. If i click on this list item (player) it should 'navigate' to the parent component and update its view. But the only thing that updates is the url.</p>
  
  <p>There is a workaround with <code>window.location.href(url)</code> that relaods the page after the navigation method updates the url. But I don't like workarounds.</p>
  
  <p>The parent component pretty much looks like:</p>
  
  <pre><code>export class PlayerSearchResultComponent implements OnInit, AfterViewInit {
  
   public isLoading = true;
    public searchValue: string;
    public playerResult: PlayerByPlayerTagType;
    public hasNoResultFound = false;
    public clanInfo: ClansByClantagType;
  
    constructor(private playerSearchService: PlayerSearchService,
                private activatedRoute: ActivatedRoute,
                private clanSearchService: ClanSearchService) {
    }
  
    ngOnInit(): void {
      this.activatedRoute.params.subscribe((params: Params) =&gt; {
        this.searchValue = params['playerId'];
      });
    }
  
    ngAfterViewInit() {
      this.playerSearchService.getPlayerByPlayerTag(this.searchValue).subscribe(player =&gt; {
          this.playerResult = player;
          if (!isUndefined(this.playerResult.clan)) {
            this.clanSearchService.getClanByClanTag(this.playerResult.clan.tag).subscribe((data: ClansByClantagType) =&gt; {
              this.clanInfo = data;
            });
          }
        }, () =&gt; {
          this.hasNoResultFound = true;
          this.isLoading = false;
        },
        () =&gt; this.isLoading = false);
    }
  }
  </code></pre>
  
  <p>And the child component:</p>
  
  <pre><code>export class ClanModalComponent {
  
    @ViewChild('childModal') childModal: ModalDirective;
    @Input() playerResult: PlayerByPlayerTagType;
    @Input() clanInfo: ClansByClantagType;
  
  
    constructor(private router: Router) {
    }
  
    open() {
      this.childModal.show();
    }
  
    memberSearch(member) {
      this.childModal.hide();
      this.router.navigate(['search/' + member.tag]);
    }
  
  }
  </code></pre>
  
  <p>The player result module looks like:</p>
  
  <pre><code>const appRoutes: Routes = [
    {path: 'search/:playerId', component: PlayerSearchResultComponent}
  ];
  
  @NgModule({
    declarations: [
     ...
    ],
    imports: [
      ...
      RouterModule.forChild(
        appRoutes
      )],
    providers: [
       ...
    ],
    exports: []
  })
  export class PlayerResultModule {
  }
  </code></pre>