CODEWITHSUNDEEP
angular
Akxe
Akxe

Reputation: 11475

Is there any way to debug why angular route is not being recognised?

I have no idea why the router won't match any of the routes give... I have even tried really simple ones, yet the all fail.

My routes (extract):

{
    path: ':rootFolder/',
    children: [
        {
            path: 'name/**',
            component: MainComponent,
        },
        {
            path: 'name/*', //  Debugging only
            component: MainComponent,
        },
        {
            path: 'name',   //  Debugging only
            component: MainComponent,
        },
        {
            path: '',
            component: MainComponent,
            pathMatch: 'full',
        },
    ],
},
{
    path: ':rootFolder/:currentFolder/',
    children: [
        {
            path: 'name/**',
            component: MainComponent,
        },
        {
            path: '',
            component: MainComponent,
            pathMatch: 'full',
        },
    ],
},

Also, I am certain, these routes are being accepted by the router as if I use UrlMatcher, I will get the correct behaviour. I just want to use the standard build-in solution rather than this...

Solving this problem is one thing, but I would love to learn why and possibly help others...

Upvotes: 1

Views: 1047

Answers (3)

Robin Webb
Robin Webb

Reputation: 1521

Remove the "/"

path: ':rootFolder',

Upvotes: 0

SiddAjmera
SiddAjmera

Reputation: 39432

Okay. So first up, there's an issue with the configuration itself.

The issue is with the parent paths. They can't be suffixed with a /. If you remove that from both the parent routes, then everything would work as expected.

So change path: ':rootFolder/', to path: ':rootFolder',

And change path: ':rootFolder/:currentFolder/', to path: ':rootFolder/:currentFolder',

const routes: Routes = [{
  path: ':rootFolder',
  children: [
    {
      path: 'name/**',
      component: MainComponent,
    },
    {
      path: 'name/*', //  Debugging only
      component: MainComponent,
    },
    {
      path: 'name',   //  Debugging only
      component: MainComponent,
    },
    {
      path: '',
      component: MainComponent,
      pathMatch: 'full',
    },
  ],
},
{
  path: ':rootFolder/:currentFolder',
  children: [
    {
      path: 'name/**',
      component: MainComponent,
    },
    {
      path: '',
      component: MainComponent,
      pathMatch: 'full',
    },
  ],
}]

Here's a Working Sample StackBlitz for your ref.

Upvotes: 2

Yennefer
Yennefer

Reputation: 6214

You can enable routing debugging in this way:

Declare the settings object

    const settings: ExtraOptions = {
        enableTracing: true,
    };

and then use it when you declare your router:

    RouterModule.forRoot(routes, settings)],

Doing so, you'll have the output in the browser console.

Note: you can also condense the settings object inline.

Upvotes: 7

Related Questions