Angular router redirect to first option

Question

I've been trying to redirect to a child route with the first sectionId if is empty.

For instance: navigating to /docs needs to redirect /docs/first-steps

const DOCUMENTATION_ROUTES: Routes = [
  {
    path: '',
    component: DocumentationPage,
    resolve: { data: DocumentationResolver },
    children: [{ path: ':id', component: DocumentationDetailComponent }]
  }
]; 

DocumentationResolver has all the data required for the page (sections).

    @Injectable()
    export class DocumentationResolver implements Resolve<Documentation[]> {
      constructor(
        private documentationService: DocumentationService,
        private glossaryService: GlossaryService,
        private router: Router
      ) {}

      resolve(route: ActivatedRouteSnapshot): Observable<any[]> {
        return forkJoin(
          this.documentationService.getDocumentation(),
          this.glossaryService.getGlossary()
        ).pipe(
          tap(([documentations]) => {

// this works but makes two calls

            const firstSectionTitle: string = documentations[0].titleNavigation;
            if (!route.firstChild) {
              this.router.navigate(['/docs', firstSectionTitle] });
            }
          })
        );
      }
    }

DocumentationPage: The entry page with the sidebar which contains the sections. DocumantationDetailComponent: a child component which renders the selected section. Besides, it injects DocumentationResolver in order to get the data.

Answer 1

Your route configuration:

const DOCUMENTATION_ROUTES: Routes = [
  {
    path: '',
    component: DocumentationPage,
    resolve: { data: DocumentationResolver },
    children: [{ path: ':id', component: DocumentationDetailComponent }]
  }
]; 

Is saying that the main router outlet should contain the DocumentPage component, which sounds like it's working?

And it is saying to only display a child if an id is provided.

What you want is a default route to display if there is no id?

If so, then you need something like this:

children: [
  { path: ':id', component: DocumentationDetailComponent },
  { path: '', redirectTo: 'firstSteps', pathMatch: 'full' }
]

I'm not sure of the exact syntax because I'm not sure where firstSteps is in your route hierarchy. But something like that should work.