'Unable to route inside Core UI Angular

I am trying to redirect to a new page with the help of the router link attribute. but it is redirecting to the dashboard page instead of an expected page.

Below is how project structure looks

[![enter image description here][1]][1]

Routing-module file

children: [
      {
        path: '',
        redirectTo: 'cards',
      },
      {
        path: 'transactions',
        component: TransactionsComponent,
        data: {
          title: 'Transactions',
        },
      },
      {
        path: 'recon',
        component: ReconciliationComponent,
        data: {
          title: 'Reconciliaton',
        },
      },
      {
        path: 'coa',
        component: CoaComponent,
        data: {
          title: 'Chart of Accounts',
        },
      },
      {
        path: 'miscreceipt',
        component: MiscpaymentComponent,
        data: {
          title: 'Misc Receipt',
        },
      }
    ],
  },
  {
    path: 'miscpayment',
    component: MiscpaymentComponent,
    data: {
      title: 'Misc Payment'
    }
  },

(Above routes I have tried this way only in order to check whether it should work, otherwise, they were mentioned one below another )

HTML file:

    <c-container>
  <c-row>
    <c-col>
      <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <button cButton color="info" shape="rounded-pill" variant="outline" class="me-md-2" routerLink="/accouting/miscpayment" >New Misc Payment</button>
        <button cButton color="info" shape="rounded-pill" variant="outline" routerLink="/miscreceipt">New Misc Receipt</button>
        <button cButton color="info" shape="rounded-pill" variant="outline">Add Journal Transaction</button>
        <button cButton color="info" shape="rounded-pill" variant="outline">Upload a Bank Statement</button>

         <!--<button (click)="toggleCollapse()" cButton color="info" shape="rounded-pill" variant="outline" cDropdownToggle>More</button>
        <ul cDropdownMenu>
          <li><a [routerLink] cDropdownItem>Add Journal Transaction</a></li>
          <li><a [routerLink] cDropdownItem>Upload a Bank Statement</a></li>
        </ul>-->
      </div>

    </c-col>
  </c-row>
</c-container>

I have also tried other ways of redirecting

<button cButton color="info" shape="rounded-pill" variant="outline" class="me-md-2" (click) = "onClick()" >New Misc Payment</button>

In Component file method onClick()

    import {Router} from '@angular/router';
@Component({
  selector: 'app-transactions',
  templateUrl: './transactions.component.html',
  styleUrls: ['./transactions.component.scss']
})
export class TransactionsComponent  {

  constructor(private route:Router) { }

  

  ngOnInit(): void {
  }

  onClick(){
        this.route.navigate(['/miscpayment']); // navigate to other page
    }

}

After trying both solutions, I am unable to redirect it. It's still redirecting to the dashbaord

Solution 1:^[1]

Its sometimes just easier to use relativeTo setting on navigation. When you are using this. Its from the current component route you change route from.

constructor(private route:Router, private route: ActivatedRoute) { }

onClick(){
    this.route.navigate(['/miscpayment'],{ relativeTo: this.route}); // navigate to other page
}

Solution 2:^[2]

You need to add the property pathMatch: 'full' to the empty path. Otherwise, this empty string will match to any path and you will always be redirected to cards.

children: [
      {
        path: '',
        redirectTo: 'cards',
        pathMatch: 'full'
      },

See the doc here: https://angular.io/api/router/Route#pathMatch

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Henrik Bøgelund Lavstsen
Solution 2	Chris Hamilton

'Unable to route inside Core UI Angular

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]