Angular routing with dynamic parts

Question

The plan is to have two parameterized sections (project and scene, respectively), and any path after that is a selection of tools, regions, sections, etc. Something like this;

/{projectId}/{sceneId}/functionality

And so, if you pop in too few parameters, we choose some handy defaults for you, and off we go. Firstly I tried the following using redirectTo, but that just threw up all sorts of errors no matter what I tried, for example;

{ path: '', redirectTo:':projectid/:sceneid', pathMatch: 'full' },
{ path: ':projectid', redirectTo:':projectid/:sceneid', pathMatch: 'full'},
{ path: ':projectId/:sceneId', component: MainComponent, pathMatch: 'full'}

That always threw up "can't redirect to [:projectId/:sceneId], can't find [:sceneId]" and similar, no matter what order they are in, CamelCase, all smallcaps, etc. Maybe the trick here lies in nesting of every segment into children, et although I've tried and failed that.

I have tried hundreds of variations on this, but this is my routing config (contextual) at the current variation, which I feel is a bit hackish (repeating the component for multiple sections);

{ path: '', component: MainComponent, pathMatch: 'full' },
{ path: ':projectId', component: MainComponent, pathMatch: 'full' },
{ path: ':projectId/:sceneId', component: MainComponent, pathMatch: 'full', children:[
  { path: 'test', component: TestComponent, pathMatch: 'full' },
]}

I thought this at least would yield me something if I did "/10/20/test", but it throws a Not Found instead. I can't seem to properly wrap my head around this. In desperation I added this line to my first code example;

{ path: ':projectId/:sceneId/test', component: TestComponent, pathMatch: 'full' }

But of course that just renders the final component without sending us through the <router-outlet> path that includes the MainComponent. Any thoughts? I've checked the docs, but they are very sparse on dynamic paths, and my Google-foo is failing me. Is it a trick of pre or post slashes? Order? Or just missing the point or concept?

Answer 1

Ok, so I think I was trapped somewhere between thinking routing was closer to a map rather than what it is, which is a node matching tree. That way I treated every item as a full path (hence my use of pathMatch:'full') instead of letting the finder tackle tokens in the right order (using the default pathMatch:'prefix'). Thanks to Harun's comment, I figured it out with the following structure;

{ path: '', component: MainComponent, pathMatch: 'full' },
{ path: ':projectId', component: MainComponent },
{ path: ':projectId/:sceneId', component: MainComponent, children:[
  { path: '', redirectTo:'default', pathMatch: 'full' },
  { path: 'test', component: TestComponent },
  { path: 'default', component: DefaultComponent },
]},

There's still some ticks like component re-initializing on the same component match, and I'd still like to see if I can somehow use redirects with dynamic parameters, ut that's beyond the scope of my initial question.

I'd also like to link to this amazing answer I found in the process with a killer explanation of the ins and outs of routing matching and pathMatch:'prefix|full'.