angular relative routing not work as expected

Question

I develop an application using angular. In my application there is two kinds of path:

type 1:

http://localhost:4203/121/index (121 is merchant id)
http://localhost:4203/121/bill/tci
http://localhost:4203/121/bill/mci
http://localhost:4203/121/profile/dashboard

type 2:

http://localhost:4203/index (default without merchant id)
http://localhost:4203/bill/tci
http://localhost:4203/bill/mci
http://localhost:4203/profile/dashboard

so I did below code in app-routing Module:

export const routes: Routes = [
  {
    path: 'profile',
    loadChildren: () => import('./pages/profile/profile.module')
      .then(m => m.ProfileModule),
  },
  {
    path: ':mid/profile',
    loadChildren: () => import('./pages/profile/profile.module')
      .then(m => m.ProfileModule),
  },
  {
    path: 'bill',
    loadChildren: () => import('./pages/bill/bill.module')
      .then(m => m.BillModule),
  },
  {
    path: ':mid/bill',
    loadChildren: () => import('./pages/bill/bill.module')
    .then(m => m.BillModule),
  },
  {
    path: 'index',
    component: IndexComponent,
  },
  {
    path: ':mid/index',
    component: IndexComponent,
  },
  {
    path: 'auth-callback',
    component: AuthCallBackComponent,
  },
  { path: '', redirectTo: 'index', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

I created some library component on another project and it is added to this project. here is my card component:

<div class="solution_card">
  <a [routerLink]="defaullink">
    <div class="hover_color_bubble"></div>
    <a *ngFor="let icon of defaultMenu.icons" [routerLink]="icon.link" class="float-start icons">
      <i [class]="icon.title"></i>
    </a>
    <div class="so_top_icon">
      <img [src]="defaultMenu.img" />
    </div>
    <div class="solu_title">
      <h3>{{defaultMenu.title}}</h3>
    </div>
    <div class="solu_description">
      <p>
        {{defaultMenu.subTitle}}
      </p>
    </div>
  </a>
</div>

and in component module I defined default links:

  public defaullink:string = '../test2';
  public defaullink2:string = '../123231321';

when I used this component in my project, I expect results as below:

(I put component in index.html.ts)

in Page: http://localhost:4203/121/index ===> link to: http://localhost:4203/121/test2
in Page: http://localhost:4203/index ===> link to: http://localhost:4203/test2

but in both pages the link is: http://localhost:4203/test2

please help me

score 0 · Answer 1 · answered Oct 11 '21 at 06:36

Can you try to modify the link string path to remove the ../ on the beginning and replace with ./ ?

  public defaullink:string = './test2';
  public defaullink2:string = './123231321';

You are possibly trying to change the page to one on the same level of the caller one, so you would be needing just the ./

I also see you are using it in a component (it can be in different page levels), so it may be better to use absolute paths as it would be possible for your needs by prefixing with just a /

  public defaullink:string = '/test2';
  public defaullink2:string = '/123231321';

You can also check at the documentation on: https://angular.io/api/router/RouterLink#relative-link-paths

UrlMatcher

I think also you are not including a route for the index page without the index suffix as like as:

{
    matcher: (url) => {
        if (url.length === 1 && url[0].path.match(/^[\d]+$/gm)) {
            return {
                consumed: url,
                mid: new UrlSegment(url[0].path.substr(1), {})
            };
        }
        return null;
    },
    component: IndexComponent
},
...

Using a matcher on the routes (it would have to be on top of other possible ones that could match the looked path) can filter for just some regular expression or other checks. It would return the routing object if the match is found or a null value if it the router needs to continue its evaluation of next ones. UrlMatcher doc

angular relative routing not work as expected

1 Answers1