Angular Routing multiple paths with different parameters and same component

Question

I tried routing to the same route with different parameters and to some level of success.

The problem is that I successfully get to the route, but in an instant, it reroutes me to the welcome page for no apparent reason no error codes in console or warnings, nothing.

The route displays as such: http://localhost:4200/UpdateStatement/1/copy/true

And after a second simply goes to this route: http://localhost:4200/# and from that page to http://localhost:4200/welcome

I have no idea why this happens, the closest ticket which describes my problem is on this link but still a bit different since I'm doing my routing within a component.

Route to Same component with multiple Params

This is my code where I navigate:

 onKopirajClick(k) {
    this.id = k.data.id;
    this.router.navigate(['updateStatement', this.id, 'copy', true]);
  }

This is the destination:

ngOnInit() {
    const id = +this.route.snapshot.paramMap.get('id');
    const isCopy = this.route.snapshot.paramMap.get('isCopy');
    this.route.paramMap.subscribe(params => {
      console.log(params);
      const statementId= +params.get('id');
      const copy = params.get('isCopy');
      this.getStatement(statementId);
    });

This is the method for getStatement(statementId), returns a simple model which should be filled to the HTML page inputs:

getStatement(id) {
    if (id != null && id > 0) {
      this.statementService.getUpdateStatement(id).subscribe({
        next: statement => {
          this.updateStatement= statement;         
          }
        },
        error: err => this.errorMessage = err
      });
    } 
  }

And these are the paths in my module for statements:

@NgModule({
  declarations: [
    UpdateStatementComponent,
    UpdateStatementListComponent,
    UpdateStatementSearchComponent   
  ],
  imports: [
    DevExtremeModule,
    RouterModule.forChild([
        {path: 'updateStatement', component: UpdateStatementComponent, pathMatch: 'full'},
        {path: 'updateStatement/:id', component: UpdateStatementComponent, pathMatch: 'full'},
        {path: 'updateStatement/:id/copy/:isCopy', component: UpdateStatementComponent, pathMatch: 'full'},
        {path: 'updateStatementList', component: UpdateStatementListComponent},
        {path: 'updateStatementList/:isSaved', component: UpdateStatementListComponent},
        {path: 'updateStatementSearch', component: UpdateStatementSearchComponent}
    ]),
    SharedModule
  ]
})

And this is the shared main module which displays the welcome page:

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    AppRoutingModule,
    RouterModule.forRoot([
      { path: 'welcome', component: WelcomeComponent },
      { path: '', redirectTo: 'welcome', pathMatch: 'full' },
      { path: '**', redirectTo: 'welcome', pathMatch: 'full' } // 404 page
    ]),
    UpdateStatementsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

If any other code is required for analysis please tell me for I'm not quite sure where to look at anymore.

Answer 1

I managed to locate the issue, the problem was the button within the template navigated to the correct route but the anchor tag before the button kept constantly rerouting to an unexisting route. Once i removed the <a href="#"> from the code it worked like a charm.

<div *dxTemplate="let d of 'kopirajIzjavuTemplate'">
     <a href="#">
       <dx-button
        icon="copy"
        hint="Kopiraj"
        (click)="onKopirajClick(d)">
      </dx-button>
      </a>
</div>