angular router cahnges url but dose not load the compoents / pages

i have this nav component

<div class="mx">
  <ul class="xv">
    <li
      *ngFor="let item of items"
      class="main-nav__item main-nav__item--{{ item.theme }}"
    >
      <a
        routerLink="{{ item.category == 'home' ? '' : item.endpoint }}"
        routerLinkActive="active"
        [routerLinkActiveOptions]="{ exact: true }"
        >{{ item.title }} </a>
    </li>
  </ul>
</div>
</nav>

in the app-routing

  {
    path: ":section/:layout/:layout_2/:site/:section",
    component: HomePageComponent,
  },

  {
    path: ":site/:section/:year/:month/:day/:title",
    pathMatch: "full",
    component: ArticlePageComponent

  },
 {
    path: "",
    pathMatch: "full",
    component: HomePageComponent
  },
...

so I’m loading the same component but with different data e.gHomePageComponent

so the router only move to a section page from the root/home page
but if in section page already it won’t switch to another section page only go back to home page

59 thoughts on “angular router cahnges url but dose not load the compoents / pages”

  1. Be aware that your whole paths are "variable", because they only consists out of parameters.
    The URL itself contains then only the value of the params, but not the param-names.
    Therefor the router could not distinguish the routes (only perhaps if the amount of variables is different).

    Change your url for example to

    path: "section/:section/layout/:layout/layout_2/:layout_2/site/:site/section/:section"
    

    then the router has a chance to distinguish the routes based on the "static" parts.

    Reply

Leave a Comment