Angular RouterLinks broken URL navigation unaffected

Question

My angular router is failing to load the latest component after a router change is made within the application. If I call the URL manually it will load the correct content however any use of routerLink or a call to router.navigate has no affect on the router-outlet content.

I have tried binding to router events and recalling the getContent function when there is a change and this fixes the issue when calling programmatically.

The project is pretty bare but the router:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { ContentpaneComponent } from './contentpane/contentpane.component';

const routes: Routes = [ 
  { path: '', component: ContentpaneComponent },
  { path: 'post/:app', component: ContentpaneComponent }                                                                                                                                                                                                                                                                                                                                                                                  
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

And the container in app.component.html

<div class="above">
  <app-sidebar></app-sidebar>
  <div class="contentpane">
    <router-outlet></router-outlet>                                                                                                                                                                                                                                                                                                                                                                                                       
  </div>
</div>
<app-terminal></app-terminal>

If there is any other code segments that would benefit please request in comments.

Here is the code containing the routerLink directives:

<div class="main">
  <div class="logo">
    O
  </div>
  <ul class="navbar">
    <li *ngFor="let nav of navs">
      <a routerLink="/{{nav.href}}" class="navitem">{{nav.title}}</a>
    </li>
  </ul>
</div>

EDIT: I am also getting a websocket error in the console:

WebSocket connection to 'ws://localhost:4200/sockjs-node/748/g0a4bxsw/websocket' failed: WebSocket is closed before the connection is established.

Not sure if it is a related issue.

could you add how you are using routerLink or router to navigate? and just to confirm, where the "container" code is placed? In the AppComponent? — Maciej Wojcik
– Maciej Wojcik, Commented Aug 5, 2022 at 21:13
@MaciejWojcik I added the routerLink code above, I also tried using router.navigate(). The container code is in AppComponent correct. — stmfunk
– stmfunk, Commented Aug 6, 2022 at 7:44

stmfunk · Accepted Answer · 2022-08-06 10:46:09Z

0

So I managed to find the solution. The problem arose because routerLink does not force the reloading of a component when the URL changes, so ngOnInit does not get called. The fix I implemented was to subscribe my content update function to the route.params and queryParams events:

  this.route.queryParams.subscribe(queryParams => {this.getContent()});
  this.route.params.subscribe(queryParams => {this.getContent()});

This causes these functions to be called whenever the route updates.

answered Aug 6, 2022 at 10:46

stmfunk

6835 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular RouterLinks broken URL navigation unaffected

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related