CODEWITHSUNDEEP
angularrouter
lkartono
lkartono

Reputation: 2393

Angular route not triggered

My site has routes similar to this:

https://example.com/boat/categories/name-3

I defined routes like this:

    const routes: Routes = [
      {
        path: '',
        component: LayoutBoxComponent,
        children: [
          {
            path: '',
            component: HomeComponent
          },
          {
            path: 'posts/:slug',
            component: PostComponent
          },
          {
            path: ':site_name',
            component: HomeComponent,
            children: [
              {
                path: 'categories/:by_category',
                component: CategoryComponent    <==== This component does not seems to triggered
              }
            ]
          }
        ]
      }
    ]

When trying to access the route https://example.com/boat/categories/name-3 the CategoryComponent is not called and I don't seems to know why. Ideas ?

Edit

In my example:

https://example.com/boat/categories/name-3

is matching this pattern:

https://example.com/:site_name/categories/:by_category

boat here is dynamic. It could be car or train as well

Upvotes: 1

Views: 384

Answers (1)

Akirus
Akirus

Reputation: 574

To access child routes you need to use a <router-outlet> in the parent route.

So to access CategoryComponent you'd need both your LayoutBoxComponent and HomeComponent to have a <router-outlet></router-outlet> within their html file.

Stackblitz example - can be tested by setting the route to: https://angular-ivy-b4kdcc.stackblitz.io/test/categories/x

Upvotes: 1

Related Questions