Angular router navigation changes url, but doesn't render component

Question

I am working on an angular application with routing and path parameter. With a button click, a function is called to redirect the user to a new URL with the same path parameter. Although the URL in the browser changes, the corresponding component defined in app-routing.module.ts is not loaded. If I refresh the page again, the correct page is rendered.

The idea is that a student gets a unique URL with a hash token (e. g. /student/33192c29aa8e449e94f3a1c4eef43ca8), which shows him some guidelines. Afterwards with a click he should be forwarded to a registration page with the same token (e. g. /student/registration/33192c29aa8e449e94f3a1c4eef43ca8)

app-routing.module.ts

const routes: Routes = [
  ...
  { path: 'student/registration/:token', component: RegistrationsComponent },
  { path: 'student/:token', component: GuidelinesComponent },
  ...
];

guidelines.component.html

forwardToRegistration(): void {
  this.router.navigateByUrl('/student/registration/' + this.studentToken);
}

The URL is updating correctly in the browser, but the RegistrationComponent is not rendered.

Thank you for your help!

Well, the URL loads correctly. Only by using the method ```this.router.navigateByUrl(...)``` the URL is changed, but the component is not rendered. If I refresh the page without any further actions, the correct page is loaded. Furthermore, the variable ```this.studentToken``` holds the Path-Parameter hash token, which is read from the ActivatedRoute Params. — sivakumm, Jul 21 '20 at 21:48
Well, if you are able to reproduce your problem in a stackbliz project to share with us I am sure that we can help you because seems like the problem could come from other place. Please consider to build a reproducible scenario. — Juan Antonio, Jul 22 '20 at 08:14
curious if you got this to work as I am having the same issue. — eddyizm, Apr 21 '21 at 23:44
Have you been able to solve this? I am facing the same problem. — M. Azyoksul, Sep 12 '21 at 14:25

score 6 · Answer 1 · answered Dec 11 '20 at 10:27

6

I had the same issue, and figured it out. Maybe your cant see the content change because you dont have router-outlet tag in the app.component.html. The url will change the content of

<router-outlet></router-outlet>

so you should placed the router-outlet tag in the app.component.html.

answered Dec 11 '20 at 10:27

kin

139
2
6

router outlet is there, but stll not workin – Sunil Garg Aug 12 '22 at 07:14

score 3 · Answer 2 · answered Jun 07 '22 at 01:06

@RobLasch almost had it.

in short, you want to subscribe to activatedRoute.params. You do not want to subscribe to the entire activatedRoute.

here is a great video that walks you through it https://codecraft.tv/courses/angular/routing/parameterised-routes/

i dont see the component constructor in ops posting, so here is the one I have...

this works and inspecting the console, you are not getting any extra iterations... it just behaves like you would expect!

component constructor...

  constructor( 
              private activatedRoute : ActivatedRoute) {
        
                 
                this.activatedRoute.params.subscribe( (data) => {
                     
                    const id = this.activatedRoute.snapshot.paramMap.get('token');
                    console.log('router subscription fired token:' + token);
                    if(null == token) return;
                    this.getDetail();   //do whatever you need to do
                  })
        }

callingcomponent.ts

  itemClicked(evt: MouseEvent, item_: project) {
           
           
          this.router.navigate(['/students/' + item_.token]);
    }

Thakns for that! I moved the block of code that is initializing the variables inside the subscription of the activatedRoute and it worked! — Travel and code enthousiast, Jan 11 '23 at 12:25

score 1 · Answer 3 · answered Nov 07 '21 at 17:27

I solved it by listening to router changes in the component which should be refreshed.

Step 1. In app.component.ts: Navigate to component (orphan) and pass an object with a variable tableName.

this.router.navigate( ['/orphan', {table:tableName} ] );

Step 2. In orphan.component.ts, subscript to the observable to detect router changes and get the tableName from the snapshot object :

constructor( private route:ActivatedRoute, private router:Router) { 
      /* Listen for router events through the observable */
      router.events.subscribe( (data) => {
        // get the data from the snapshot
        this.tableName = this.route.snapshot.params.table;
      })
}

The component Orphan is now refreshed with the tableName value.

this seemed to work, but upon closer inspection, is leading to all sorts of unintended consequences. the subscription is firing 'a lot', and often w null parameters... — greg, Jun 07 '22 at 00:46

score 0 · Answer 4 · answered Jul 21 '20 at 20:34

0

Huh. Maybe student/registration, combined with the default pathMatch: 'prefix' setting, makes the Angular router interpret your navigateByUrl as same path navigation. Just a hypothesis.

To test that, add the pathMatch: full to the second route:

{
    path: 'student/:token',
    component: GuidelinesComponent,
    pathMatch: 'full',
}

answered Jul 21 '20 at 20:34

mbojko

13,503
1
16
26

2

I already tried this method, but unfortunately, it didn't work. There's still the same problem. – sivakumm Jul 21 '20 at 21:45

Angular router navigation changes url, but doesn't render component

4 Answers4