Skip to content

docs: resolve guide and doc items in the router - #33895

Open
MeAkib wants to merge 1 commit into
angular:mainfrom
MeAkib:docs/route-not-found-resolvers
Open

MeAkib wants to merge 1 commit into
angular:mainfrom
MeAkib:docs/route-not-found-resolvers

Conversation

@MeAkib

@MeAkib MeAkib commented Sep 29, 2026

Copy link
Copy Markdown
Contributor

GuideViewer and ComponentViewer looked up their item from the route params themselves, and called router.navigate when nothing matched. That meant the component was created and rendered before the redirect, and the redirect started a second navigation.

This moves the lookup into route resolvers. When an item is missing, the resolver returns a RedirectCommand, so the router redirects as part of the same navigation, before the component is created. When it's found, the item reaches the component as an input through withComponentInputBinding().

Changes:

  • Add guideResolver on the guide/:id route. It resolves the guide or redirects to /guides.
  • Add docItemResolver on the :section/:id route. It resolves the doc item or redirects to the section.
  • GuideViewer: replace the id input and lookup with a required guide input, and drop the Router and GuideItems injections.
  • ComponentViewer: replace the id and section inputs and the async lookup with a required docItem input. componentDocItem is now toObservable(docItem), which replays the latest item like the old ReplaySubject, so the child pages are unchanged. The tabs in sections become a computed, so they're always in the same order instead of depending on the order of previous add/delete calls.

Tests:

  • Run the GuideViewer and ComponentViewer specs against routes that use the resolvers, so they cover both the resolved inputs and the redirects.
  • Add a test for the tabs shown for a doc item.

`GuideViewer` and `ComponentViewer` looked up their item from the route
params themselves, and called `router.navigate` when nothing matched.
That meant the component was created and rendered before the redirect,
and the redirect started a second navigation.

This moves the lookup into route resolvers. When an item is missing, the
resolver returns a `RedirectCommand`, so the router redirects as part of
the same navigation, before the component is created. When it's found,
the item reaches the component as an input through
`withComponentInputBinding()`.

Changes:
- Add `guideResolver` on the `guide/:id` route. It resolves the guide or
  redirects to `/guides`.
- Add `docItemResolver` on the `:section/:id` route. It resolves the doc
  item or redirects to the section.
- `GuideViewer`: replace the `id` input and lookup with a required
  `guide` input, and drop the `Router` and `GuideItems` injections.
- `ComponentViewer`: replace the `id` and `section` inputs and the async
  lookup with a required `docItem` input. `componentDocItem` is now
  `toObservable(docItem)`, which replays the latest item like the old
  `ReplaySubject`, so the child pages are unchanged. The tabs in
  `sections` become a `computed`, so they're always in the same order
  instead of depending on the order of previous add/delete calls.

Tests:
- Run the `GuideViewer` and `ComponentViewer` specs against routes that
  use the resolvers, so they cover both the resolved inputs and the
  redirects.
- Add a test for the tabs shown for a doc item.
@angular-robot angular-robot Bot added the area: docs Related to the documentation label Sep 29, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

area: docs Related to the documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant