diff --git a/adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts b/adev/src/content/examples/animations/src/app/native-css/auto-height.ts similarity index 61% rename from adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts rename to adev/src/content/examples/animations/src/app/native-css/auto-height.ts index fd9500586a63..73f0d2dae0f1 100644 --- a/adev/src/content/examples/animations/src/app/native-css/auto-height.component.ts +++ b/adev/src/content/examples/animations/src/app/native-css/auto-height.ts @@ -3,10 +3,10 @@ import {Component, signal} from '@angular/core'; @Component({ selector: 'app-auto-height', - templateUrl: 'auto-height.component.html', - styleUrls: ['auto-height.component.css'], + templateUrl: 'auto-height.html', + styleUrls: ['auto-height.css'], }) -export class AutoHeightComponent { +export class AutoHeight { isOpen = signal(true); toggle() { this.isOpen.update((isOpen) => !isOpen); diff --git a/adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css b/adev/src/content/examples/animations/src/app/native-css/increment-decrement.css similarity index 100% rename from adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.css rename to adev/src/content/examples/animations/src/app/native-css/increment-decrement.css diff --git a/adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html b/adev/src/content/examples/animations/src/app/native-css/increment-decrement.html similarity index 100% rename from adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.html rename to adev/src/content/examples/animations/src/app/native-css/increment-decrement.html diff --git a/adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts b/adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts similarity index 84% rename from adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts rename to adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts index 17d90a3a37ce..bd18f66d2573 100755 --- a/adev/src/content/examples/animations/src/app/native-css/increment-decrement.component.ts +++ b/adev/src/content/examples/animations/src/app/native-css/increment-decrement.ts @@ -4,10 +4,10 @@ import {Component, ElementRef, OnInit, signal, viewChild} from '@angular/core'; @Component({ selector: 'app-increment-decrement', - templateUrl: 'increment-decrement.component.html', - styleUrls: ['increment-decrement.component.css'], + templateUrl: 'increment-decrement.html', + styleUrls: ['increment-decrement.css'], }) -export class IncrementDecrementComponent implements OnInit { +export class IncrementDecrement implements OnInit { num = signal(0); el = viewChild>('el'); diff --git a/adev/src/content/examples/animations/src/app/native-css/insert.component.css b/adev/src/content/examples/animations/src/app/native-css/insert.css similarity index 64% rename from adev/src/content/examples/animations/src/app/native-css/insert.component.css rename to adev/src/content/examples/animations/src/app/native-css/insert.css index cabb573a7ebb..5a592d1ae4d3 100644 --- a/adev/src/content/examples/animations/src/app/native-css/insert.component.css +++ b/adev/src/content/examples/animations/src/app/native-css/insert.css @@ -25,3 +25,12 @@ transform: translateY(0); } } + +.toggle-btn { + background: transparent; + border: 1px solid var(--primary-contrast, black); + color: var(--primary-contrast, black); + padding: 10px 24px; + border-radius: 8px; + cursor: pointer; +} diff --git a/adev/src/content/examples/animations/src/app/native-css/insert.component.html b/adev/src/content/examples/animations/src/app/native-css/insert.html similarity index 69% rename from adev/src/content/examples/animations/src/app/native-css/insert.component.html rename to adev/src/content/examples/animations/src/app/native-css/insert.html index 4670a27fe88f..f5470c6e3961 100644 --- a/adev/src/content/examples/animations/src/app/native-css/insert.component.html +++ b/adev/src/content/examples/animations/src/app/native-css/insert.html @@ -2,7 +2,7 @@

Insert Element Example

@if (isShown()) { diff --git a/adev/src/content/examples/animations/src/app/native-css/insert.component.ts b/adev/src/content/examples/animations/src/app/native-css/insert.ts similarity index 64% rename from adev/src/content/examples/animations/src/app/native-css/insert.component.ts rename to adev/src/content/examples/animations/src/app/native-css/insert.ts index dae1f70696e2..2461b1f2d68a 100755 --- a/adev/src/content/examples/animations/src/app/native-css/insert.component.ts +++ b/adev/src/content/examples/animations/src/app/native-css/insert.ts @@ -3,10 +3,10 @@ import {Component, signal} from '@angular/core'; @Component({ selector: 'app-insert', - templateUrl: 'insert.component.html', - styleUrls: ['insert.component.css'], + templateUrl: 'insert.html', + styleUrls: ['insert.css'], }) -export class InsertComponent { +export class Insert { isShown = signal(false); toggle() { diff --git a/adev/src/content/examples/animations/src/app/native-css/open-close.component.css b/adev/src/content/examples/animations/src/app/native-css/open-close.css similarity index 60% rename from adev/src/content/examples/animations/src/app/native-css/open-close.component.css rename to adev/src/content/examples/animations/src/app/native-css/open-close.css index 7f7dc6a21d39..588f3a48c02c 100644 --- a/adev/src/content/examples/animations/src/app/native-css/open-close.component.css +++ b/adev/src/content/examples/animations/src/app/native-css/open-close.css @@ -11,16 +11,25 @@ font-size: 20px; height: 100px; opacity: 0.8; - background-color: blue; + background: #3b82f6; color: #ebebeb; transition-property: height, opacity, background-color, color; transition-duration: 1s; } +.toggle-btn { + background: transparent; + border: 1px solid var(--primary-contrast, black); + color: var(--primary-contrast, black); + padding: 10px 24px; + border-radius: 8px; + cursor: pointer; +} + .open { transition-duration: 0.5s; height: 200px; opacity: 1; - background-color: yellow; - color: #000000; + background: #475569; + color: #f9fafb; } diff --git a/adev/src/content/examples/animations/src/app/native-css/open-close.component.html b/adev/src/content/examples/animations/src/app/native-css/open-close.html similarity index 67% rename from adev/src/content/examples/animations/src/app/native-css/open-close.component.html rename to adev/src/content/examples/animations/src/app/native-css/open-close.html index fa4bafd5ced5..97b886de4ac1 100644 --- a/adev/src/content/examples/animations/src/app/native-css/open-close.component.html +++ b/adev/src/content/examples/animations/src/app/native-css/open-close.html @@ -1,7 +1,7 @@

Open / Close Example

- +

The box is now {{ isOpen() ? 'Open' : 'Closed' }}!

diff --git a/adev/src/content/examples/animations/src/app/native-css/open-close.component.ts b/adev/src/content/examples/animations/src/app/native-css/open-close.ts similarity index 62% rename from adev/src/content/examples/animations/src/app/native-css/open-close.component.ts rename to adev/src/content/examples/animations/src/app/native-css/open-close.ts index 3f419af8056b..e8dd8127bb99 100644 --- a/adev/src/content/examples/animations/src/app/native-css/open-close.component.ts +++ b/adev/src/content/examples/animations/src/app/native-css/open-close.ts @@ -3,10 +3,10 @@ import {Component, signal} from '@angular/core'; @Component({ selector: 'app-open-close', - templateUrl: 'open-close.component.html', - styleUrls: ['open-close.component.css'], + templateUrl: 'open-close.html', + styleUrls: ['open-close.css'], }) -export class OpenCloseComponent { +export class OpenClose { isOpen = signal(true); toggle() { this.isOpen.update((isOpen) => !isOpen); diff --git a/adev/src/content/examples/animations/src/app/native-css/remove.component.css b/adev/src/content/examples/animations/src/app/native-css/remove.css similarity index 54% rename from adev/src/content/examples/animations/src/app/native-css/remove.component.css rename to adev/src/content/examples/animations/src/app/native-css/remove.css index 3ef4d075cfca..e19a63504efd 100644 --- a/adev/src/content/examples/animations/src/app/native-css/remove.component.css +++ b/adev/src/content/examples/animations/src/app/native-css/remove.css @@ -19,5 +19,16 @@ .deleting { opacity: 0; transform: translateY(20px); - transition: opacity 500ms ease-out, transform 500ms ease-out; + transition: + opacity 500ms ease-out, + transform 500ms ease-out; +} + +.toggle-btn { + background: transparent; + border: 1px solid var(--primary-contrast, black); + color: var(--primary-contrast, black); + padding: 10px 24px; + border-radius: 8px; + cursor: pointer; } diff --git a/adev/src/content/examples/animations/src/app/native-css/remove.component.html b/adev/src/content/examples/animations/src/app/native-css/remove.html similarity index 68% rename from adev/src/content/examples/animations/src/app/native-css/remove.component.html rename to adev/src/content/examples/animations/src/app/native-css/remove.html index 3f5970adefa5..2704c07eae86 100644 --- a/adev/src/content/examples/animations/src/app/native-css/remove.component.html +++ b/adev/src/content/examples/animations/src/app/native-css/remove.html @@ -2,7 +2,7 @@

Remove Element Example

@if (isShown()) { diff --git a/adev/src/content/examples/animations/src/app/native-css/remove.component.ts b/adev/src/content/examples/animations/src/app/native-css/remove.ts similarity index 64% rename from adev/src/content/examples/animations/src/app/native-css/remove.component.ts rename to adev/src/content/examples/animations/src/app/native-css/remove.ts index fed2e06267ee..00e19f3c9415 100755 --- a/adev/src/content/examples/animations/src/app/native-css/remove.component.ts +++ b/adev/src/content/examples/animations/src/app/native-css/remove.ts @@ -3,10 +3,10 @@ import {Component, signal} from '@angular/core'; @Component({ selector: 'app-remove', - templateUrl: 'remove.component.html', - styleUrls: ['remove.component.css'], + templateUrl: 'remove.html', + styleUrls: ['remove.css'], }) -export class RemoveComponent { +export class Remove { isShown = signal(false); toggle() { diff --git a/adev/src/content/examples/animations/src/app/native-css/reorder.component.css b/adev/src/content/examples/animations/src/app/native-css/reorder.css similarity index 64% rename from adev/src/content/examples/animations/src/app/native-css/reorder.component.css rename to adev/src/content/examples/animations/src/app/native-css/reorder.css index ac4fa6bfa9c4..5ff27b08f2e0 100644 --- a/adev/src/content/examples/animations/src/app/native-css/reorder.component.css +++ b/adev/src/content/examples/animations/src/app/native-css/reorder.css @@ -27,3 +27,12 @@ opacity: 0; } } + +.toggle-btn { + background: transparent; + border: 1px solid var(--primary-contrast, black); + color: var(--primary-contrast, black); + padding: 10px 24px; + border-radius: 8px; + cursor: pointer; +} diff --git a/adev/src/content/examples/animations/src/app/native-css/reorder.component.html b/adev/src/content/examples/animations/src/app/native-css/reorder.html similarity index 68% rename from adev/src/content/examples/animations/src/app/native-css/reorder.component.html rename to adev/src/content/examples/animations/src/app/native-css/reorder.html index 9c65a23360f2..31209dcd32bc 100644 --- a/adev/src/content/examples/animations/src/app/native-css/reorder.component.html +++ b/adev/src/content/examples/animations/src/app/native-css/reorder.html @@ -1,6 +1,6 @@

Reordering List Example

- +

Stagger Example

+ ## Parallel animation using group() function @@ -67,7 +67,7 @@ HELPFUL: The [`group()`](api/animations/group) function is used to group animati The following example uses [`group()`](api/animations/group)s on both `:enter` and `:leave` for two different timing configurations, thus applying two independent animations to the same element in parallel. - + ## Sequential vs. parallel animations @@ -91,11 +91,11 @@ The heroes list gradually re-enters the page as you delete each letter in the fi The HTML template contains a trigger called `filterAnimation`. - + The `filterAnimation` in the component's decorator contains three transitions. - + The code in this example performs the following tasks: diff --git a/adev/src/content/guide/animations/css.md b/adev/src/content/guide/animations/css.md index a88a32ef70fd..8d08ff0e5889 100644 --- a/adev/src/content/guide/animations/css.md +++ b/adev/src/content/guide/animations/css.md @@ -52,10 +52,10 @@ Similarly, you can use `transition-duration`, `transition-delay`, and `transitio Animations can be triggered by toggling CSS styles or classes. Once a class is present on an element, the animation will occur. Removing the class will revert the element back to whatever CSS is defined for that element. Here's an example: - - - - + + + + ## Transition and Triggers @@ -64,10 +64,10 @@ Animations can be triggered by toggling CSS styles or classes. Once a class is p You can use css-grid to animate to auto height. - - - - + + + + If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information. @@ -76,18 +76,18 @@ If you don't have to worry about supporting all browsers, you can also check out You can create animations for when an item enters a view or leaves a view. Let's start by looking at how to animate an element entering a view. We'll do this with `animate.enter`, which will apply animation classes when an element enters the view. - - - - + + + + Animating an element when it leaves the view is similar to animating when entering a view. Use `animate.leave` to specify which CSS classes to apply when the element leaves the view. - - - - + + + + For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations). @@ -96,10 +96,10 @@ For more information on `animate.enter` and `animate.leave`, see the [Enter and Animating on increment and decrement is a common pattern in applications. Here's an example of how you can accomplish that behavior. - - - - + + + + ### Disabling an animation or all animations @@ -147,10 +147,10 @@ Animations are often more complicated than just a simple fade in or fade out. Yo One common effect is to stagger the animations of each item in a list to create a cascade effect. This can be accomplished by utilizing `animation-delay` or `transition-delay`. Here is an example of what that CSS might look like. - - - - + + + + ### Parallel Animations @@ -171,10 +171,10 @@ In this example, the `rotate` and `fade-in` animations fire at the same time, bu Items in a `@for` loop will be removed and re-added, which will fire off animations using `@starting-styles` for entry animations. Alternatively, you can use `animate.enter` for this same behavior. Use `animate.leave` to animate elements as they are removed, as seen in the example below. - - - - + + + + ## Programmatic control of animations diff --git a/adev/src/content/guide/animations/migration.md b/adev/src/content/guide/animations/migration.md index 69d0b4796549..bf2cebbd8ce2 100644 --- a/adev/src/content/guide/animations/migration.md +++ b/adev/src/content/guide/animations/migration.md @@ -38,7 +38,7 @@ The animations package allowed you to define various states using the [`state()` #### With Animations Package - + This same behavior can be accomplished natively by using CSS classes either using a keyframe animation or transition styling. @@ -69,17 +69,17 @@ The animations package required specifying triggers using the `trigger()` functi #### With Animations Package - - - + + + #### With Native CSS - - - - + + + + ## Transition and Triggers @@ -97,19 +97,19 @@ The animations package offers the ability to animate things that have been histo #### With Animations Package - - - + + + You can use css-grid to animate to auto height. #### With Native CSS - - - - + + + + If you don't have to worry about supporting all browsers, you can also check out `calc-size()`, which is the true solution to animating auto height. See [MDN's docs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc-size) and (this tutorial)[https://frontendmasters.com/blog/one-of-the-boss-battles-of-css-is-almost-won-transitioning-to-auto/] for more information. @@ -121,29 +121,25 @@ The animations package offered the previously mentioned pattern matching for ent #### With Animations Package - - - + + + #### With Native CSS -Here's how the same thing can be accomplished without the animations package using `animate.enter`. - - - - - + + + + #### With Native CSS -Use `animate.leave` to animate elements as they leave the view, which will apply the specified CSS classes to the element as it leaves the view. - - - - - + + + + For more information on `animate.enter` and `animate.leave`, see the [Enter and Leave animations guide](guide/animations). @@ -155,17 +151,17 @@ Along with the aforementioned `:enter` and `:leave`, there's also `:increment` a #### With Animations Package - - - + + + #### With Native CSS - - - - + + + + ### Parent / Child Animations @@ -226,17 +222,17 @@ The `stagger()` function allowed you to delay the animation of each item in a li #### With Animations Package - - - + + + #### With Native CSS - - - - + + + + ### Parallel Animations @@ -260,17 +256,17 @@ Items reordering in a list works out of the box using the previously described t #### With Animations Package< - - - + + + #### With Native CSS - - - - + + + + ## Migrating usages of AnimationPlayer diff --git a/adev/src/content/guide/animations/overview.md b/adev/src/content/guide/animations/overview.md index 04981eaa651e..9871859ffc1c 100644 --- a/adev/src/content/guide/animations/overview.md +++ b/adev/src/content/guide/animations/overview.md @@ -52,7 +52,7 @@ For `NgModule` based applications import `BrowserAnimationsModule`, which introd If you plan to use specific animation functions in component files, import those functions from `@angular/animations`. - + See all [available animation functions](guide/legacy-animations#animations-api-summary) at the end of this guide. @@ -61,7 +61,7 @@ See all [available animation functions](guide/legacy-animations#animations-api-s In the component file, add a metadata property called `animations:` within the `@Component()` decorator. You put the trigger that defines an animation within the `animations` metadata property. - + @@ -84,7 +84,7 @@ Run the following command in terminal to generate the component: ng g component open-close ``` -This will create the component at `src/app/open-close.component.ts`. +This will create the component at `src/app/open-close.ts`. ### Animation state and styles @@ -99,11 +99,11 @@ Let's see how Angular's [`state()`](api/animations/state) function works with th In this code snippet, multiple style attributes are set at the same time for the state. In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a yellow background color. - + In the following `closed` state, the button has a height of 100 pixels, an opacity of 0.8, and a background color of blue. - + ### Transitions and timing @@ -171,7 +171,7 @@ HELPFUL: See the Material Design website's topic on [Natural easing curves](http This example provides a state transition from `open` to `closed` with a 1-second transition between states. - + In the preceding code snippet, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional. Within the transition, `animate()` specifies how long the transition takes. @@ -179,7 +179,7 @@ In this case, the state change from `open` to `closed` takes 1 second, expressed This example adds a state transition from the `closed` state to the `open` state with a 0.5-second transition animation arc. - + HELPFUL: Some additional notes on using styles within [`state`](api/animations/state) and `transition` functions. @@ -212,7 +212,7 @@ However, it's possible for multiple triggers to be active at once. Animations are defined in the metadata of the component that controls the HTML element to be animated. Put the code that defines your animations under the `animations:` property within the `@Component()` decorator. - + When you've defined an animation trigger for a component, attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state. @@ -225,7 +225,7 @@ The animation is executed or triggered when the expression value changes to a ne The following code snippet binds the trigger to the value of the `isOpen` property. - + In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change. Then it's up to the `openClose` code to handle the state change and kick off a state change animation. @@ -242,9 +242,9 @@ In the HTML template file, use the trigger name to attach the defined animations Here are the code files discussed in the transition example. - - - + + + ### Summary diff --git a/adev/src/content/guide/animations/reusable-animations.md b/adev/src/content/guide/animations/reusable-animations.md index 350aaa4b4a42..c2fee0af08c4 100644 --- a/adev/src/content/guide/animations/reusable-animations.md +++ b/adev/src/content/guide/animations/reusable-animations.md @@ -23,7 +23,7 @@ For example, the following snippet exports the animation `trigger`. From this point, you can import reusable animation variables in your component class. For example, the following code snippet imports the `transitionAnimation` variable and uses it via the `useAnimation()` function. - + ## More on Angular animations diff --git a/adev/src/content/guide/animations/transition-and-triggers.md b/adev/src/content/guide/animations/transition-and-triggers.md index 1856a2e2493c..dc5b9167e527 100644 --- a/adev/src/content/guide/animations/transition-and-triggers.md +++ b/adev/src/content/guide/animations/transition-and-triggers.md @@ -23,11 +23,11 @@ Instead of defining each state-to-state transition pair, any transition to `clos This allows the addition of new states without having to include separate transitions for each one. - + Use a double arrow syntax to specify state-to-state transitions in both directions. - + ### Use wildcard state with multiple transition states @@ -37,7 +37,7 @@ If the button can change from `open` to either `closed` or something like `inPro wildcard state with 3 states

- + The `* => *` transition applies when any change between two states takes place. @@ -52,7 +52,7 @@ To do this, list the more specific transitions _before_ `* => *`. Use the wildcard `*` with a style to tell the animation to use whatever the current style value is, and animate with that. Wildcard is a fallback value that's used if the state being animated isn't declared within the trigger. - + ### Void state @@ -76,7 +76,7 @@ Add a new behavior: - When you add a hero to the list of heroes, it appears to fly onto the page from the left - When you remove a hero from the list, it appears to fly out to the right - + In the preceding code, you applied the `void` state when the HTML element isn't attached to a view. @@ -105,11 +105,11 @@ As a rule of thumb consider that any element being added to the DOM by Angular p This example has a special trigger for the enter and leave animation called `myInsertRemoveTrigger`. The HTML template contains the following code. - + In the component file, the `:enter` transition sets an initial opacity of 0. It then animates it to change that opacity to 1 as the element is inserted into the view. - + Note that this example doesn't need to use [`state()`](api/animations/state). @@ -121,13 +121,13 @@ Use these to kick off a transition when a numeric value has increased or decreas HELPFUL: The following example uses `query()` and `stagger()` methods. For more information on these methods, see the [complex sequences](guide/legacy-animations/complex-sequences) page. - + ## Boolean values in transitions If a trigger contains a Boolean value as a binding value, then this value can be matched using a `transition()` expression that compares `true` and `false`, or `1` and `0`. - + In the code snippet above, the HTML template binds a `

` element to a trigger named `openClose` with a status expression of `isOpen`, and with possible values of `true` and `false`. This pattern is an alternative to the practice of creating two named states like `open` and `close`. @@ -136,7 +136,7 @@ Inside the `@Component` metadata under the `animations:` property, when the stat In this case, the animation uses whatever height the element already had before the animation started. When the element is `closed`, the element gets animated to a height of 0, which makes it invisible. - + ## Multiple animation triggers @@ -156,8 +156,8 @@ When true, the `@.disabled` binding prevents all animations from rendering. The following code sample shows how to use this feature. - - + + When the `@.disabled` binding is true, the `@childAnimation` trigger doesn't kick off. @@ -177,7 +177,7 @@ Those elements can still animate. To turn off all animations for an Angular application, place the `@.disabled` host binding on the topmost Angular component. - + HELPFUL: Disabling animations application-wide is useful during end-to-end $E2E$ testing. @@ -186,12 +186,12 @@ HELPFUL: Disabling animations application-wide is useful during end-to-end \(E2E The animation `trigger()` function emits _callbacks_ when it starts and when it finishes. The following example features a component that contains an `openClose` trigger. - + In the HTML template, the animation event is passed back via `$event`, as `@triggerName.start` and `@triggerName.done`, where `triggerName` is the name of the trigger being used. In this example, the trigger `openClose` appears as follows. - + A potential use for animation callbacks could be to cover for a slow API call, such as a database lookup. For example, an **InProgress** button can be set up to have its own looping animation while the backend system operation finishes. @@ -204,7 +204,7 @@ An animation can influence an end user to _perceive_ the operation as faster, ev Callbacks can serve as a debugging tool, for example in conjunction with `console.warn()` to view the application's progress in a browser's Developer JavaScript Console. The following code snippet creates console log output for the original example, a button with the two states of `open` and `closed`. - + ## Keyframes @@ -217,7 +217,7 @@ For example, the button, instead of fading, could change color several times ove The code for this color change might look like this. - + ### Offset @@ -233,7 +233,7 @@ Specifying an offset of 0.8 for the middle transition in the preceding example m The code with offsets specified would be as follows. - + You can combine keyframes with `duration`, `delay`, and `easing` within a single animation. @@ -250,7 +250,7 @@ Here's an example of using keyframes to create a pulse effect: The code snippet for this animation might look like this. - + ### Animatable properties and units @@ -285,7 +285,7 @@ In these cases, you can use a special wildcard `*` property value under `style() The following example has a trigger called `shrinkOut`, used when an HTML element leaves the page. The animation takes whatever height the element has before it leaves, and animates from that height to zero. - + ### Keyframes summary diff --git a/adev/src/content/guide/http/interceptors.md b/adev/src/content/guide/http/interceptors.md index cb8ae2d7c57f..5561365175b4 100644 --- a/adev/src/content/guide/http/interceptors.md +++ b/adev/src/content/guide/http/interceptors.md @@ -45,7 +45,7 @@ In order for this interceptor to actually intercept requests, you must configure You declare the set of interceptors to use when configuring `HttpClient` through dependency injection, by using the `withInterceptors` feature: ```ts -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideHttpClient(withInterceptors([loggingInterceptor, cachingInterceptor]))], }); ``` @@ -275,7 +275,7 @@ export class LoggingInterceptor implements HttpInterceptor { DI-based interceptors are configured through a dependency injection multi-provider: ```ts -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [ provideHttpClient( // DI-based interceptors must be explicitly enabled. diff --git a/adev/src/content/guide/http/making-requests.md b/adev/src/content/guide/http/making-requests.md index da3792294fbf..23a3d24ead06 100644 --- a/adev/src/content/guide/http/making-requests.md +++ b/adev/src/content/guide/http/making-requests.md @@ -659,7 +659,7 @@ import { AsyncPipe } from '@angular/common'; } `, }) -export class UserProfileComponent { +export class UserProfile { userId = input.required(); user$!: Observable; diff --git a/adev/src/content/guide/ssr.md b/adev/src/content/guide/ssr.md index d1b38b914344..27f9daf6d560 100644 --- a/adev/src/content/guide/ssr.md +++ b/adev/src/content/guide/ssr.md @@ -71,11 +71,11 @@ When using the [App shell pattern](ecosystem/service-workers/app-shell), you mus ```typescript import {provideServerRendering, withRoutes, withAppShell} from '@angular/ssr'; -import {AppShellComponent} from './app-shell/app-shell.component'; +import {AppShell} from './app-shell'; const serverConfig: ApplicationConfig = { providers: [ - provideServerRendering(withRoutes(serverRoutes), withAppShell(AppShellComponent)), + provideServerRendering(withRoutes(serverRoutes), withAppShell(AppShell)), // ... other providers ... ], }; @@ -433,7 +433,7 @@ By default, `HttpClient` caches all `HEAD` and `GET` requests which don't contai import {bootstrapApplication} from '@angular/platform-browser'; import {provideClientHydration, withHttpTransferCacheOptions} from '@angular/platform-browser'; -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [ provideClientHydration( withHttpTransferCacheOptions({ @@ -516,7 +516,7 @@ import { withNoHttpTransferCache, } from '@angular/platform-browser'; -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [provideClientHydration(withNoHttpTransferCache())], }); ``` @@ -532,7 +532,7 @@ import { withHttpTransferCacheOptions, } from '@angular/platform-browser'; -bootstrapApplication(AppComponent, { +bootstrapApplication(App, { providers: [ provideClientHydration( withHttpTransferCacheOptions({ From 1f47e885fde4b1b32d0ff39f46cd3e719f23077c Mon Sep 17 00:00:00 2001 From: Angelo Parziale Date: Mon, 12 Jan 2026 19:16:24 +0100 Subject: [PATCH 044/339] build(docs-infra): Update dependency @xterm/xterm to v6 Update dependency @xterm/xterm to v6 and fix style (cherry picked from commit 4d983e9904d16a209ce2c97156636d67752a3b89) --- adev/package.json | 2 +- .../editor/terminal/interactive-terminal.ts | 15 +++++++++++-- .../terminal/terminal-handler.service.ts | 21 ++++++++++++++----- pnpm-lock.yaml | 10 ++++----- 4 files changed, 35 insertions(+), 13 deletions(-) diff --git a/adev/package.json b/adev/package.json index 6d977a331a49..39788126f412 100644 --- a/adev/package.json +++ b/adev/package.json @@ -48,7 +48,7 @@ "@typescript/vfs": "1.6.2", "@webcontainer/api": "1.6.1", "@xterm/addon-fit": "0.11.0", - "@xterm/xterm": "5.5.0", + "@xterm/xterm": "6.0.0", "algoliasearch": "5.46.2", "angular-split": "20.0.0", "crelt": "1.0.6", diff --git a/adev/src/app/editor/terminal/interactive-terminal.ts b/adev/src/app/editor/terminal/interactive-terminal.ts index 33ed288cf618..cc95de50f316 100644 --- a/adev/src/app/editor/terminal/interactive-terminal.ts +++ b/adev/src/app/editor/terminal/interactive-terminal.ts @@ -7,7 +7,7 @@ */ import {Subject} from 'rxjs'; -import {Terminal} from '@xterm/xterm'; +import {Terminal, ITerminalOptions, ITerminalInitOnlyOptions} from '@xterm/xterm'; import {CommandValidator} from './command-validator.service'; @@ -21,6 +21,16 @@ export const ALLOWED_KEYS: Array = [ 'ArrowDown', ]; +/** Set of defaults to use for all terminal instances in adev. */ +export const adevTerminalDefaultOptions: ITerminalOptions = { + convertEol: true, + theme: { + background: '#00000000', + }, + fontFamily: 'courier-new, courier, monospace', + fontSize: 15, +}; + export class InteractiveTerminal extends Terminal { private readonly breakProcess = new Subject(); @@ -28,10 +38,11 @@ export class InteractiveTerminal extends Terminal { breakProcess$ = this.breakProcess.asObservable(); constructor( + options: ITerminalOptions & ITerminalInitOnlyOptions, readonly window: Window, readonly commandValidator: CommandValidator, ) { - super({convertEol: true, disableStdin: false}); + super(options); // bypass command validation if sudo=true is present in the query string if (!this.window.location.search.includes('sudo=true')) { diff --git a/adev/src/app/editor/terminal/terminal-handler.service.ts b/adev/src/app/editor/terminal/terminal-handler.service.ts index 2ae133803c76..9bdb8dac8e17 100644 --- a/adev/src/app/editor/terminal/terminal-handler.service.ts +++ b/adev/src/app/editor/terminal/terminal-handler.service.ts @@ -9,7 +9,7 @@ import {computed, inject, Injectable, signal, Signal, untracked} from '@angular/core'; import {Terminal} from '@xterm/xterm'; import {FitAddon} from '@xterm/addon-fit'; -import {InteractiveTerminal} from './interactive-terminal'; +import {InteractiveTerminal, adevTerminalDefaultOptions} from './interactive-terminal'; import {WINDOW} from '@angular/docs'; import {CommandValidator} from './command-validator.service'; @@ -28,11 +28,18 @@ export class TerminalHandler { // Because colors are parsed // See https://github.com/xtermjs/xterm.js/blob/854e2736f66ca3e5d3ab5a7b65bf3fd6fba8b707/src/browser/services/ThemeService.ts#L125 [TerminalType.READONLY]: signal({ - instance: new Terminal({convertEol: true, disableStdin: true}), + instance: new Terminal({ + ...adevTerminalDefaultOptions, + disableStdin: true, + }), fitAddon: new FitAddon(), }), [TerminalType.INTERACTIVE]: signal({ - instance: new InteractiveTerminal(this.window, this.commandValidator), + instance: new InteractiveTerminal( + adevTerminalDefaultOptions, + this.window, + this.commandValidator, + ), fitAddon: new FitAddon(), }), }; @@ -59,10 +66,14 @@ export class TerminalHandler { instance.dispose(); fitAddon = new FitAddon(); if (type === TerminalType.READONLY) { - instance = new Terminal({convertEol: true, disableStdin: true}); + instance = new Terminal({...adevTerminalDefaultOptions, disableStdin: true}); this.terminals[type].set({instance, fitAddon}); } else { - const newInstance = new InteractiveTerminal(this.window, this.commandValidator); + const newInstance = new InteractiveTerminal( + adevTerminalDefaultOptions, + this.window, + this.commandValidator, + ); instance = newInstance; this.terminals[type].set({instance: newInstance, fitAddon}); } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e08a2d15b12e..a63be1e80511 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -609,8 +609,8 @@ importers: specifier: 0.11.0 version: 0.11.0 '@xterm/xterm': - specifier: 5.5.0 - version: 5.5.0 + specifier: 6.0.0 + version: 6.0.0 algoliasearch: specifier: 5.46.2 version: 5.46.2 @@ -5770,8 +5770,8 @@ packages: '@xterm/addon-fit@0.11.0': resolution: {integrity: sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==} - '@xterm/xterm@5.5.0': - resolution: {integrity: sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==} + '@xterm/xterm@6.0.0': + resolution: {integrity: sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==} '@xtuc/ieee754@1.2.0': resolution: {integrity: sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==} @@ -18723,7 +18723,7 @@ snapshots: '@xterm/addon-fit@0.11.0': {} - '@xterm/xterm@5.5.0': {} + '@xterm/xterm@6.0.0': {} '@xtuc/ieee754@1.2.0': {} From ed5b62a140ba8caef86ab5a6c3f425c28a4035d5 Mon Sep 17 00:00:00 2001 From: Angular Robot Date: Mon, 12 Jan 2026 18:51:28 +0000 Subject: [PATCH 045/339] build: update cross-repo angular dependencies See associated pull request for more information. --- .github/actions/saucelabs-legacy/action.yml | 4 +- .github/workflows/adev-preview-build.yml | 8 +-- .github/workflows/adev-preview-deploy.yml | 2 +- .../assistant-to-the-branch-manager.yml | 2 +- .github/workflows/benchmark-compare.yml | 2 +- .github/workflows/ci.yml | 50 +++++++++---------- .github/workflows/dev-infra.yml | 4 +- .github/workflows/google-internal-tests.yml | 2 +- .github/workflows/manual.yml | 8 +-- .github/workflows/merge-ready-status.yml | 2 +- .github/workflows/perf.yml | 6 +-- .github/workflows/pr.yml | 40 +++++++-------- MODULE.bazel | 2 +- package.json | 2 +- pnpm-lock.yaml | 12 ++--- 15 files changed, 73 insertions(+), 73 deletions(-) diff --git a/.github/actions/saucelabs-legacy/action.yml b/.github/actions/saucelabs-legacy/action.yml index f4d2e324e833..b60463473b32 100644 --- a/.github/actions/saucelabs-legacy/action.yml +++ b/.github/actions/saucelabs-legacy/action.yml @@ -5,9 +5,9 @@ runs: using: 'composite' steps: - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Saucelabs Variables - uses: angular/dev-infra/github-actions/saucelabs@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/saucelabs@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Starting Saucelabs tunnel service shell: bash run: ./tools/saucelabs/sauce-service.sh run & diff --git a/.github/workflows/adev-preview-build.yml b/.github/workflows/adev-preview-build.yml index 85507172ebe1..44ece322be64 100644 --- a/.github/workflows/adev-preview-build.yml +++ b/.github/workflows/adev-preview-build.yml @@ -21,17 +21,17 @@ jobs: (github.event.action == 'synchronize' && contains(github.event.pull_request.labels.*.name, 'adev: preview')) steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel RBE - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - name: Build adev # `snapshot-build` config is used to stamp the exact version with sha in the footer. run: pnpm bazel build //adev:build.production --config=snapshot-build - - uses: angular/dev-infra/github-actions/previews/pack-and-upload-artifact@74db0cd6da7fe89807133854c645ed02c9980566 + - uses: angular/dev-infra/github-actions/previews/pack-and-upload-artifact@8ce8257f740613a7291256173e2706fb2ed8aefa with: workflow-artifact-name: 'adev-preview' pull-number: '${{github.event.pull_request.number}}' diff --git a/.github/workflows/adev-preview-deploy.yml b/.github/workflows/adev-preview-deploy.yml index 722037651e2c..1b7ee8e39644 100644 --- a/.github/workflows/adev-preview-deploy.yml +++ b/.github/workflows/adev-preview-deploy.yml @@ -40,7 +40,7 @@ jobs: npx -y firebase-tools@latest target:clear --config adev/firebase.json --project ${{env.PREVIEW_PROJECT}} hosting angular-docs npx -y firebase-tools@latest target:apply --config adev/firebase.json --project ${{env.PREVIEW_PROJECT}} hosting angular-docs ${{env.PREVIEW_SITE}} - - uses: angular/dev-infra/github-actions/previews/upload-artifacts-to-firebase@74db0cd6da7fe89807133854c645ed02c9980566 + - uses: angular/dev-infra/github-actions/previews/upload-artifacts-to-firebase@8ce8257f740613a7291256173e2706fb2ed8aefa with: github-token: '${{secrets.GITHUB_TOKEN}}' workflow-artifact-name: 'adev-preview' diff --git a/.github/workflows/assistant-to-the-branch-manager.yml b/.github/workflows/assistant-to-the-branch-manager.yml index b310fb7320d5..60208dd095ca 100644 --- a/.github/workflows/assistant-to-the-branch-manager.yml +++ b/.github/workflows/assistant-to-the-branch-manager.yml @@ -17,6 +17,6 @@ jobs: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 with: persist-credentials: false - - uses: angular/dev-infra/github-actions/branch-manager@74db0cd6da7fe89807133854c645ed02c9980566 + - uses: angular/dev-infra/github-actions/branch-manager@8ce8257f740613a7291256173e2706fb2ed8aefa with: angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }} diff --git a/.github/workflows/benchmark-compare.yml b/.github/workflows/benchmark-compare.yml index ed4d6966412f..d1dda15a0850 100644 --- a/.github/workflows/benchmark-compare.yml +++ b/.github/workflows/benchmark-compare.yml @@ -38,7 +38,7 @@ jobs: - run: pnpm install --frozen-lockfile - - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + - uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa with: bazelrc: ./.bazelrc.user diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 168335f88be1..f5dc4b85bd0d 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -21,7 +21,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - name: Check code lint @@ -39,13 +39,13 @@ jobs: runs-on: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa with: disable-package-manager-cache: true - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel RBE - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa with: google_credential: ${{ secrets.RBE_TRUSTED_BUILDS_USER }} - name: Install node modules @@ -67,11 +67,11 @@ jobs: runs-on: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel Remote Caching - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa with: google_credential: ${{ secrets.RBE_TRUSTED_BUILDS_USER }} - name: Install node modules @@ -83,11 +83,11 @@ jobs: runs-on: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel Remote Caching - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa with: google_credential: ${{ secrets.RBE_TRUSTED_BUILDS_USER }} - name: Install node modules @@ -100,11 +100,11 @@ jobs: labels: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel RBE - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa with: google_credential: ${{ secrets.RBE_TRUSTED_BUILDS_USER }} - name: Install node modules @@ -119,11 +119,11 @@ jobs: labels: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel RBE - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa with: google_credential: ${{ secrets.RBE_TRUSTED_BUILDS_USER }} - name: Install node modules @@ -136,11 +136,11 @@ jobs: labels: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel RBE - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - run: echo "https://${{secrets.SNAPSHOT_BUILDS_GITHUB_TOKEN}}:@github.com" > ${HOME}/.git_credentials @@ -152,11 +152,11 @@ jobs: labels: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel RBE - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa with: google_credential: ${{ secrets.RBE_TRUSTED_BUILDS_USER }} - name: Install node modules @@ -206,11 +206,11 @@ jobs: runs-on: ubuntu-latest-8core steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel RBE - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - name: Build adev diff --git a/.github/workflows/dev-infra.yml b/.github/workflows/dev-infra.yml index b8bc229c744b..1e7e5cdb9bd6 100644 --- a/.github/workflows/dev-infra.yml +++ b/.github/workflows/dev-infra.yml @@ -13,13 +13,13 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 - - uses: angular/dev-infra/github-actions/pull-request-labeling@74db0cd6da7fe89807133854c645ed02c9980566 + - uses: angular/dev-infra/github-actions/pull-request-labeling@8ce8257f740613a7291256173e2706fb2ed8aefa with: angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }} post_approval_changes: runs-on: ubuntu-latest steps: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 - - uses: angular/dev-infra/github-actions/post-approval-changes@74db0cd6da7fe89807133854c645ed02c9980566 + - uses: angular/dev-infra/github-actions/post-approval-changes@8ce8257f740613a7291256173e2706fb2ed8aefa with: angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }} diff --git a/.github/workflows/google-internal-tests.yml b/.github/workflows/google-internal-tests.yml index 6e26a89160c9..f780dfb07332 100644 --- a/.github/workflows/google-internal-tests.yml +++ b/.github/workflows/google-internal-tests.yml @@ -14,7 +14,7 @@ jobs: runs-on: ubuntu-latest steps: - uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1 - - uses: angular/dev-infra/github-actions/google-internal-tests@74db0cd6da7fe89807133854c645ed02c9980566 + - uses: angular/dev-infra/github-actions/google-internal-tests@8ce8257f740613a7291256173e2706fb2ed8aefa with: run-tests-guide-url: http://go/angular-g3sync-start github-token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/manual.yml b/.github/workflows/manual.yml index 2f41b97b214f..d10340600411 100644 --- a/.github/workflows/manual.yml +++ b/.github/workflows/manual.yml @@ -13,15 +13,15 @@ jobs: JOBS: 2 steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel Remote Caching - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Saucelabs Variables - uses: angular/dev-infra/github-actions/saucelabs@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/saucelabs@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Set up Sauce Tunnel Daemon run: pnpm bazel run //tools/saucelabs-daemon/background-service -- $JOBS & env: diff --git a/.github/workflows/merge-ready-status.yml b/.github/workflows/merge-ready-status.yml index ed33b15a3110..f781cf4d985a 100644 --- a/.github/workflows/merge-ready-status.yml +++ b/.github/workflows/merge-ready-status.yml @@ -9,6 +9,6 @@ jobs: status: runs-on: ubuntu-latest steps: - - uses: angular/dev-infra/github-actions/unified-status-check@74db0cd6da7fe89807133854c645ed02c9980566 + - uses: angular/dev-infra/github-actions/unified-status-check@8ce8257f740613a7291256173e2706fb2ed8aefa with: angular-robot-key: ${{ secrets.ANGULAR_ROBOT_PRIVATE_KEY }} diff --git a/.github/workflows/perf.yml b/.github/workflows/perf.yml index bebccf859646..45751a8451cd 100644 --- a/.github/workflows/perf.yml +++ b/.github/workflows/perf.yml @@ -21,7 +21,7 @@ jobs: workflows: ${{ steps.workflows.outputs.workflows }} steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - id: workflows @@ -36,9 +36,9 @@ jobs: workflow: ${{ fromJSON(needs.list.outputs.workflows) }} steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile # We utilize the google-github-actions/auth action to allow us to get an active credential using workflow diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml index ceb4af179dcf..f433f813f0af 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pr.yml @@ -19,7 +19,7 @@ jobs: runs-on: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - name: Check code lint @@ -37,7 +37,7 @@ jobs: - name: Check code format run: pnpm ng-dev format changed --check ${{ github.event.pull_request.base.sha }} - name: Check Package Licenses - uses: angular/dev-infra/github-actions/linting/licenses@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/linting/licenses@8ce8257f740613a7291256173e2706fb2ed8aefa with: allow-dependencies-licenses: 'pkg:npm/google-protobuf@' @@ -45,13 +45,13 @@ jobs: runs-on: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa with: disable-package-manager-cache: true - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel RBE - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - name: Run unit tests @@ -71,11 +71,11 @@ jobs: runs-on: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel Remote Caching - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - name: Run CI tests for framework @@ -95,11 +95,11 @@ jobs: runs-on: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel Remote Caching - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - name: Run integration CI tests for framework @@ -110,11 +110,11 @@ jobs: labels: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel RBE - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - name: Run tests @@ -127,11 +127,11 @@ jobs: labels: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel RBE - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - name: Run tests @@ -142,11 +142,11 @@ jobs: labels: ubuntu-latest steps: - name: Initialize environment - uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/npm/checkout-and-setup-node@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel - uses: angular/dev-infra/github-actions/bazel/setup@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/setup@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Setup Bazel RBE - uses: angular/dev-infra/github-actions/bazel/configure-remote@74db0cd6da7fe89807133854c645ed02c9980566 + uses: angular/dev-infra/github-actions/bazel/configure-remote@8ce8257f740613a7291256173e2706fb2ed8aefa - name: Install node modules run: pnpm install --frozen-lockfile - run: | diff --git a/MODULE.bazel b/MODULE.bazel index 46fad448fec9..c28f53c7eddf 100644 --- a/MODULE.bazel +++ b/MODULE.bazel @@ -25,7 +25,7 @@ git_override( bazel_dep(name = "devinfra") git_override( module_name = "devinfra", - commit = "74db0cd6da7fe89807133854c645ed02c9980566", + commit = "8ce8257f740613a7291256173e2706fb2ed8aefa", remote = "https://github.com/angular/dev-infra.git", ) diff --git a/package.json b/package.json index 153b5aad698e..bd03bfe30372 100644 --- a/package.json +++ b/package.json @@ -163,7 +163,7 @@ "@actions/core": "^2.0.0", "@actions/github": "^6.0.0", "@angular-devkit/architect-cli": "0.2101.0-rc.0", - "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#8538b565cd4eb980c7143590335216ebb64dd54f", + "@angular/ng-dev": "https://github.com/angular/dev-infra-private-ng-dev-builds.git#486b075a283ef0c169475b981de1bd229114a000", "@babel/plugin-proposal-async-generator-functions": "7.20.7", "@babel/plugin-transform-async-generator-functions": "^7.27.1", "@bazel/bazelisk": "^1.7.5", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a63be1e80511..5d6f67c518ec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -342,8 +342,8 @@ importers: specifier: 0.2101.0-rc.0 version: 0.2101.0-rc.0(chokidar@5.0.0) '@angular/ng-dev': - specifier: https://github.com/angular/dev-infra-private-ng-dev-builds.git#8538b565cd4eb980c7143590335216ebb64dd54f - version: https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/8538b565cd4eb980c7143590335216ebb64dd54f(@modelcontextprotocol/sdk@1.25.2) + specifier: https://github.com/angular/dev-infra-private-ng-dev-builds.git#486b075a283ef0c169475b981de1bd229114a000 + version: https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/486b075a283ef0c169475b981de1bd229114a000(@modelcontextprotocol/sdk@1.25.2) '@babel/plugin-proposal-async-generator-functions': specifier: 7.20.7 version: 7.20.7(@babel/core@7.28.5) @@ -1698,9 +1698,9 @@ packages: '@angular/platform-browser': ^21.0.0-0 || ^21.1.0-0 || ^21.2.0-0 || ^21.3.0-0 || ^22.0.0-0 rxjs: ^6.5.3 || ^7.4.0 - '@angular/ng-dev@https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/8538b565cd4eb980c7143590335216ebb64dd54f': - resolution: {tarball: https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/8538b565cd4eb980c7143590335216ebb64dd54f} - version: 0.0.0-74db0cd6da7fe89807133854c645ed02c9980566 + '@angular/ng-dev@https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/486b075a283ef0c169475b981de1bd229114a000': + resolution: {tarball: https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/486b075a283ef0c169475b981de1bd229114a000} + version: 0.0.0-8ce8257f740613a7291256173e2706fb2ed8aefa hasBin: true '@angular/ssr@21.1.0-rc.0': @@ -13943,7 +13943,7 @@ snapshots: rxjs: 7.8.2 tslib: 2.8.1 - '@angular/ng-dev@https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/8538b565cd4eb980c7143590335216ebb64dd54f(@modelcontextprotocol/sdk@1.25.2)': + '@angular/ng-dev@https://codeload.github.com/angular/dev-infra-private-ng-dev-builds/tar.gz/486b075a283ef0c169475b981de1bd229114a000(@modelcontextprotocol/sdk@1.25.2)': dependencies: '@actions/core': 2.0.1 '@google-cloud/spanner': 8.0.0(supports-color@10.2.2) From e66a8ef0da8cb0d9c4dcf4b594ab6d693514e284 Mon Sep 17 00:00:00 2001 From: Joey Perrott Date: Mon, 12 Jan 2026 18:12:15 +0000 Subject: [PATCH 046/339] build: begin requring usage of release mode for releases Start requiring the usage of the release merge-mode for allowing releases to be made from the repository (cherry picked from commit 4d6a6aafeecc0449025b3ad94c08223770af1b97) --- .ng-dev/github.mjs | 1 + 1 file changed, 1 insertion(+) diff --git a/.ng-dev/github.mjs b/.ng-dev/github.mjs index 57b585723a7b..8df9dcd86ffa 100644 --- a/.ng-dev/github.mjs +++ b/.ng-dev/github.mjs @@ -9,4 +9,5 @@ export const github = { name: 'angular', mainBranchName: 'main', mergeMode: 'caretaker-only', + requireReleaseModeForRelease: true, }; From 3932bab6335c60c1e6a12e5d34e0038188626055 Mon Sep 17 00:00:00 2001 From: Roshith <107235573+roshith844@users.noreply.github.com> Date: Mon, 12 Jan 2026 23:17:17 +0530 Subject: [PATCH 047/339] docs: fix spelling mistake in documentation correct typo where "youself" was written instead of "yourself" (cherry picked from commit 933ca9e5dce1b0439a8c923459f2f16d7b5a27c8) --- adev/src/content/guide/signals/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/adev/src/content/guide/signals/overview.md b/adev/src/content/guide/signals/overview.md index cffc0924859a..7180209b0fb7 100644 --- a/adev/src/content/guide/signals/overview.md +++ b/adev/src/content/guide/signals/overview.md @@ -188,7 +188,7 @@ effect(() => { ## Advanced derivations -While `computed` handles simple readonly derivations, you might find youself needing a writable state that is dependant on other signals. +While `computed` handles simple readonly derivations, you might find yourself needing a writable state that is dependant on other signals. For more information see the [Dependent state with linkedSignal](/guide/signals/linked-signal) guide. All signal APIs are synchronous— `signal`, `computed`, `input`, etc. However, applications often need to deal with data that is available asynchronously. A `Resource` gives you a way to incorporate async data into your application's signal-based code and still allow you to access its data synchronously. For more information see the [Async reactivity with resources](/guide/signals/resource) guide. From cc066cb31ff2fe19e3c12fac66a0f219c637034e Mon Sep 17 00:00:00 2001 From: Shuaib Hasan Akib Date: Thu, 11 Dec 2025 00:03:54 +0600 Subject: [PATCH 048/339] fix(docs-infra): prevent duplicate description rendering for block API entries Block entries (@if, @defer, @for,@let, @switch) were falling back to the generic DocsReference template, causing the description to appear twice - once in the header section and once in the main content area. This commit adds a dedicated rendering path for block entries: - Creates BlockEntryRenderable type and associated transforms - Adds BlockReference template that uses RawHtml directly - Modifies HeaderApi to accept hideDescription prop - Updates processing and rendering pipelines to handle blocks The fix ensures block documentation displays only one description section while preserving the existing behavior for all other API entry types. Update adev/shared-docs/pipeline/api-gen/rendering/transforms/block-transforms.mts Co-authored-by: Matthieu Riegler (cherry picked from commit 8bdd98ef41141d7b21643fcb3d9b2a745a8a85c1) --- .../pipeline/api-gen/rendering/entities.mts | 3 ++ .../rendering/entities/categorization.mts | 9 +++++ .../rendering/entities/renderables.mts | 4 +++ .../pipeline/api-gen/rendering/processing.mts | 5 +++ .../pipeline/api-gen/rendering/rendering.mts | 5 +++ .../rendering/templates/block-reference.tsx | 23 ++++++++++++ .../rendering/templates/header-api.tsx | 15 ++++---- .../rendering/transforms/block-transforms.mts | 36 +++++++++++++++++++ 8 files changed, 94 insertions(+), 6 deletions(-) create mode 100644 adev/shared-docs/pipeline/api-gen/rendering/templates/block-reference.tsx create mode 100644 adev/shared-docs/pipeline/api-gen/rendering/transforms/block-transforms.mts diff --git a/adev/shared-docs/pipeline/api-gen/rendering/entities.mts b/adev/shared-docs/pipeline/api-gen/rendering/entities.mts index ce784693f11b..7b2ab7edadf1 100644 --- a/adev/shared-docs/pipeline/api-gen/rendering/entities.mts +++ b/adev/shared-docs/pipeline/api-gen/rendering/entities.mts @@ -161,6 +161,9 @@ export type FunctionEntry = FunctionDefinitionEntry & implementation: FunctionSignatureMetadata; }; +/** Documentation entity for a block. */ +export interface BlockEntry extends DocEntry {} + /** Interface describing a function with overload signatures. */ export interface FunctionDefinitionEntry { name: string; diff --git a/adev/shared-docs/pipeline/api-gen/rendering/entities/categorization.mts b/adev/shared-docs/pipeline/api-gen/rendering/entities/categorization.mts index 9c82e58e18bc..02f51035bfa5 100644 --- a/adev/shared-docs/pipeline/api-gen/rendering/entities/categorization.mts +++ b/adev/shared-docs/pipeline/api-gen/rendering/entities/categorization.mts @@ -7,6 +7,7 @@ */ import { + BlockEntry, ClassEntry, ConstantEntry, DecoratorEntry, @@ -27,6 +28,7 @@ import { import {CliCommand} from '../cli-entities.mjs'; import { + BlockEntryRenderable, ClassEntryRenderable, ConstantEntryRenderable, DecoratorEntryRenderable, @@ -107,6 +109,13 @@ export function isFunctionEntry(entry: DocEntry): entry is FunctionEntry { return entry.entryType === EntryType.Function; } +/** Gets whether the given entry represents a block */ +export function isBlockEntry(entry: DocEntryRenderable): entry is BlockEntryRenderable; +export function isBlockEntry(entry: DocEntry): entry is BlockEntry; +export function isBlockEntry(entry: DocEntry): entry is BlockEntry { + return entry.entryType === EntryType.Block; +} + export function isInitializerApiFunctionEntry( entry: DocEntryRenderable, ): entry is InitializerApiFunctionRenderable; diff --git a/adev/shared-docs/pipeline/api-gen/rendering/entities/renderables.mts b/adev/shared-docs/pipeline/api-gen/rendering/entities/renderables.mts index 322f7e8733e4..bbfeb2163750 100644 --- a/adev/shared-docs/pipeline/api-gen/rendering/entities/renderables.mts +++ b/adev/shared-docs/pipeline/api-gen/rendering/entities/renderables.mts @@ -21,6 +21,7 @@ import { ParameterEntry, PipeEntry, TypeAliasEntry, + EntryType, } from '../entities.mjs'; import {CliCommand, CliOption} from '../cli-entities.mjs'; @@ -106,6 +107,9 @@ export type FunctionSignatureMetadataRenderable = FunctionSignatureMetadata & params: ParameterEntryRenderable[]; }; +/** Documentation entity for a block augmented with transformed content for rendering. */ +export type BlockEntryRenderable = DocEntry & DocEntryRenderable; + /** Sub-entry for a single class or enum member augmented with transformed content for rendering. */ export interface MemberEntryRenderable extends MemberEntry { htmlDescription: string; diff --git a/adev/shared-docs/pipeline/api-gen/rendering/processing.mts b/adev/shared-docs/pipeline/api-gen/rendering/processing.mts index 03862f9cfdf9..14230c1737e2 100644 --- a/adev/shared-docs/pipeline/api-gen/rendering/processing.mts +++ b/adev/shared-docs/pipeline/api-gen/rendering/processing.mts @@ -19,6 +19,7 @@ import { isInitializerApiFunctionEntry, isInterfaceEntry, isTypeAliasEntry, + isBlockEntry, } from './entities/categorization.mjs'; import {CliCommandRenderable, DocEntryRenderable} from './entities/renderables.mjs'; import {getClassRenderable} from './transforms/class-transforms.mjs'; @@ -39,6 +40,7 @@ import { import {addModuleName} from './transforms/module-name.mjs'; import {addRepo} from './transforms/repo.mjs'; import {getTypeAliasRenderable} from './transforms/type-alias-transforms.mjs'; +import {getBlockRenderable} from './transforms/block-transforms.mjs'; export async function getRenderable( entry: DocEntry | CliCommand, @@ -73,6 +75,9 @@ export async function getRenderable( if (isInitializerApiFunctionEntry(entry)) { return getInitializerApiFunctionRenderable(entry, moduleName, repo); } + if (isBlockEntry(entry)) { + return getBlockRenderable(entry, moduleName, repo); + } // Fallback to an uncategorized renderable. return setEntryFlags( diff --git a/adev/shared-docs/pipeline/api-gen/rendering/rendering.mts b/adev/shared-docs/pipeline/api-gen/rendering/rendering.mts index d223ac0c5b5e..4f997ef21924 100644 --- a/adev/shared-docs/pipeline/api-gen/rendering/rendering.mts +++ b/adev/shared-docs/pipeline/api-gen/rendering/rendering.mts @@ -18,6 +18,7 @@ import { isInitializerApiFunctionEntry, isInterfaceEntry, isTypeAliasEntry, + isBlockEntry, } from './entities/categorization.mjs'; import {CliCommandRenderable, DocEntryRenderable} from './entities/renderables.mjs'; import {ClassReference} from './templates/class-reference'; @@ -30,6 +31,7 @@ import {InitializerApiFunction} from './templates/initializer-api-function'; import {TypeAliasReference} from './templates/type-alias-reference'; import {DecoratorReference} from './templates/decorator-reference'; import {setCurrentSymbol} from './symbol-context.mjs'; +import {BlockReference} from './templates/block-reference'; /** Given a doc entry, get the transformed version of the entry for rendering. */ export function renderEntry(renderable: DocEntryRenderable | CliCommandRenderable): string { @@ -59,6 +61,9 @@ export function renderEntry(renderable: DocEntryRenderable | CliCommandRenderabl if (isInitializerApiFunctionEntry(renderable)) { return render(InitializerApiFunction(renderable)); } + if (isBlockEntry(renderable)) { + return render(BlockReference(renderable)); + } // Fall back rendering nothing while in development. return render(DocsReference(renderable)); diff --git a/adev/shared-docs/pipeline/api-gen/rendering/templates/block-reference.tsx b/adev/shared-docs/pipeline/api-gen/rendering/templates/block-reference.tsx new file mode 100644 index 000000000000..79096223be77 --- /dev/null +++ b/adev/shared-docs/pipeline/api-gen/rendering/templates/block-reference.tsx @@ -0,0 +1,23 @@ +/*! + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.dev/license + */ + +import {h} from 'preact'; +import {BlockEntryRenderable} from '../entities/renderables.mjs'; +import {HeaderApi} from './header-api'; +import {RawHtml} from './raw-html'; +import {API_REFERENCE_CONTAINER} from '../styling/css-classes.mjs'; + +/** Component to render a block API reference document. */ +export function BlockReference(entry: BlockEntryRenderable) { + return ( +

+ + +

+ ); +} diff --git a/adev/shared-docs/pipeline/api-gen/rendering/templates/header-api.tsx b/adev/shared-docs/pipeline/api-gen/rendering/templates/header-api.tsx index cfdcc84b8313..5d0d2289ce16 100644 --- a/adev/shared-docs/pipeline/api-gen/rendering/templates/header-api.tsx +++ b/adev/shared-docs/pipeline/api-gen/rendering/templates/header-api.tsx @@ -21,6 +21,7 @@ import {DocsPillRow} from './docs-pill-row'; export function HeaderApi(props: { entry: DocEntryRenderable | PipeEntryRenderable; showFullDescription?: boolean; + hideDescription?: boolean; }) { const entry = props.entry; @@ -60,12 +61,14 @@ export function HeaderApi(props: { )}

+ {!props.hideDescription && ( +

+ )} diff --git a/adev/shared-docs/pipeline/api-gen/rendering/transforms/block-transforms.mts b/adev/shared-docs/pipeline/api-gen/rendering/transforms/block-transforms.mts new file mode 100644 index 000000000000..a77386d5a08b --- /dev/null +++ b/adev/shared-docs/pipeline/api-gen/rendering/transforms/block-transforms.mts @@ -0,0 +1,36 @@ +/*! + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.dev/license + */ + +import {DocEntry} from '../entities.mjs'; +import {BlockEntryRenderable} from '../entities/renderables.mjs'; +import { + addHtmlAdditionalLinks, + addHtmlDescription, + addHtmlJsDocTagComments, + addHtmlUsageNotes, + setEntryFlags, +} from './jsdoc-transforms.mjs'; +import {addModuleName} from './module-name.mjs'; +import {addRepo} from './repo.mjs'; + +/** Given an unprocessed block entry, get the fully renderable block entry. */ +export function getBlockRenderable( + blockEntry: DocEntry, + moduleName: string, + repo: string, +): BlockEntryRenderable { + return setEntryFlags( + addHtmlAdditionalLinks( + addHtmlDescription( + addHtmlUsageNotes( + addHtmlJsDocTagComments(addRepo(addModuleName(blockEntry, moduleName), repo)), + ), + ), + ), + ); +} From 79f979a673aed56664f951fac1d5659b91e1d016 Mon Sep 17 00:00:00 2001 From: Matthieu Riegler Date: Mon, 12 Jan 2026 22:38:20 +0100 Subject: [PATCH 049/339] docs(docs-infra): Throw build error on invalid guide links The list of valid links is generated from navigation data configuration in the ADEV app. Redirections are knowingly exclude so we stop referencing them. (cherry picked from commit c09f5352f670ffc37929c1b1095ca01236621f92) --- adev/BUILD.bazel | 13 + adev/scripts/routes/BUILD.bazel | 52 + adev/scripts/routes/generate-routes.mts | 82 + adev/shared-docs/index.bzl | 8 +- adev/shared-docs/pipeline/_guides.bzl | 11 + .../rendering/transforms/jsdoc-transforms.mts | 1 + adev/shared-docs/pipeline/guides/index.mts | 36 +- .../marked/extensions/docs-pill/docs-pill.mts | 9 + .../pipeline/shared/marked/renderer.mts | 80 +- .../shared/marked/test/heading/heading.md | 12 - .../marked/test/heading/heading.spec.mts | 47 +- .../shared/marked/transformations/heading.mts | 32 +- .../shared/marked/transformations/link.mts | 6 + .../routing/navigation-entries/BUILD.bazel | 32 + .../app/routing/navigation-entries/index.ts | 1702 +++++++++++++++++ adev/src/app/routing/redirections.ts | 12 +- adev/src/app/routing/sub-navigation-data.ts | 1656 +--------------- adev/src/content/BUILD.bazel | 5 +- adev/src/content/ai/BUILD.bazel | 8 +- adev/src/content/best-practices/BUILD.bazel | 5 +- .../content/best-practices/error-handling.md | 2 +- .../runtime-performance/BUILD.bazel | 8 +- .../runtime-performance/slow-computations.md | 2 +- adev/src/content/ecosystem/BUILD.bazel | 6 +- .../ecosystem/rxjs-interop/BUILD.bazel | 1 - .../ecosystem/service-workers/BUILD.bazel | 8 +- adev/src/content/events/BUILD.bazel | 8 +- adev/src/content/guide/BUILD.bazel | 2 +- adev/src/content/guide/animations/BUILD.bazel | 1 - .../guide/animations/complex-sequences.md | 2 +- adev/src/content/guide/animations/overview.md | 2 +- .../guide/animations/reusable-animations.md | 2 +- .../animations/transition-and-triggers.md | 2 +- adev/src/content/guide/aria/BUILD.bazel | 1 - adev/src/content/guide/components/BUILD.bazel | 1 - .../guide/components/anatomy-of-components.md | 2 +- adev/src/content/guide/components/inputs.md | 2 +- .../src/content/guide/components/selectors.md | 2 +- adev/src/content/guide/di/BUILD.bazel | 2 - .../guide/di/creating-injectable-service.md | 4 +- .../di/hierarchical-dependency-injection.md | 4 +- .../guide/di/lightweight-injection-tokens.md | 2 +- adev/src/content/guide/directives/BUILD.bazel | 1 - adev/src/content/guide/directives/overview.md | 2 +- adev/src/content/guide/forms/BUILD.bazel | 1 - .../content/guide/forms/signals/BUILD.bazel | 1 - .../forms/signals/field-state-management.md | 2 +- .../content/guide/forms/signals/overview.md | 2 +- adev/src/content/guide/http/BUILD.bazel | 1 - adev/src/content/guide/i18n/BUILD.bazel | 1 - .../content/guide/incremental-hydration.md | 2 +- adev/src/content/guide/ngmodules/BUILD.bazel | 1 - adev/src/content/guide/ngmodules/overview.md | 2 +- .../src/content/guide/performance/BUILD.bazel | 1 - adev/src/content/guide/routing/BUILD.bazel | 1 - .../guide/routing/common-router-tasks.md | 4 +- .../routing/route-transition-animations.md | 6 +- .../content/guide/routing/router-reference.md | 2 +- adev/src/content/guide/signals/BUILD.bazel | 1 - adev/src/content/guide/templates/BUILD.bazel | 1 - adev/src/content/guide/templates/defer.md | 4 +- .../guide/templates/two-way-binding.md | 2 +- adev/src/content/guide/templates/variables.md | 2 +- adev/src/content/guide/testing/BUILD.bazel | 1 - .../guide/testing/components-scenarios.md | 4 +- adev/src/content/guide/testing/karma.md | 2 +- adev/src/content/guide/testing/services.md | 4 +- .../src/content/guide/testing/utility-apis.md | 32 +- .../testing/zone-js-testing-utilities.md | 14 +- adev/src/content/introduction/BUILD.bazel | 1 - .../introduction/essentials/BUILD.bazel | 1 - .../introduction/essentials/next-steps.md | 2 +- adev/src/content/reference/BUILD.bazel | 11 +- .../content/reference/concepts/BUILD.bazel | 8 +- .../src/content/reference/configs/BUILD.bazel | 8 +- .../configs/angular-compiler-options.md | 4 +- .../reference/configs/workspace-config.md | 20 +- adev/src/content/reference/errors/BUILD.bazel | 8 +- adev/src/content/reference/errors/NG0300.md | 2 +- adev/src/content/reference/errors/NG0403.md | 2 +- adev/src/content/reference/errors/NG0913.md | 2 +- .../extended-diagnostics/BUILD.bazel | 8 +- .../content/reference/migrations/BUILD.bazel | 8 +- .../reference/migrations/signal-inputs.md | 2 +- .../reference/migrations/signal-queries.md | 2 +- adev/src/content/reference/roadmap.md | 2 +- adev/src/content/tools/BUILD.bazel | 12 +- adev/src/content/tools/cli/BUILD.bazel | 8 +- adev/src/content/tools/cli/aot-compiler.md | 6 +- .../content/tools/cli/aot-metadata-errors.md | 58 +- .../content/tools/cli/template-typecheck.md | 4 +- adev/src/content/tools/devtools/BUILD.bazel | 8 +- adev/src/content/tools/devtools/profiler.md | 2 +- adev/src/content/tools/libraries/BUILD.bazel | 8 +- .../tools/libraries/creating-libraries.md | 2 +- adev/src/content/tutorials/BUILD.bazel | 14 +- .../tutorials/deferrable-views/BUILD.bazel | 8 +- .../steps/3-defer-triggers/README.md | 4 +- .../content/tutorials/first-app/BUILD.bazel | 8 +- .../steps/06-property-binding/README.md | 4 +- .../first-app/steps/09-services/README.md | 2 +- .../first-app/steps/11-details-page/README.md | 2 +- .../tutorials/learn-angular/BUILD.bazel | 8 +- .../steps/10-deferrable-views/README.md | 2 +- .../steps/13-define-a-route/README.md | 2 +- .../steps/14-routerLink/README.md | 2 +- .../steps/6-property-binding/README.md | 2 +- .../tutorials/signal-forms/BUILD.bazel | 7 + .../tutorials/signal-forms/intro/README.md | 2 +- .../src/content/tutorials/signals/BUILD.bazel | 7 + .../README.md | 2 +- tools/manual_api_docs/blocks/defer.md | 2 +- 112 files changed, 2310 insertions(+), 1939 deletions(-) create mode 100644 adev/scripts/routes/BUILD.bazel create mode 100644 adev/scripts/routes/generate-routes.mts create mode 100644 adev/src/app/routing/navigation-entries/BUILD.bazel create mode 100644 adev/src/app/routing/navigation-entries/index.ts diff --git a/adev/BUILD.bazel b/adev/BUILD.bazel index 478224dd036d..efabb43082b8 100644 --- a/adev/BUILD.bazel +++ b/adev/BUILD.bazel @@ -25,6 +25,19 @@ APPLICATION_FILES = [ "//adev/src/assets:context", "//adev/src/content/examples:embeddable", "tailwind.config.js", + + # For the routes that are generated at build time + "//adev/src/assets:docs_api_manifest", + "//adev/scripts/routes:generate_route", + "//adev/src/app/routing/navigation-entries", + "//adev/src/app/routing/navigation-entries:navigation_types", + "//adev/src/content/reference/errors:route-nav-items", + "//adev/src/content/reference/extended-diagnostics:route-nav-items", + "//adev/src/content/tutorials/deferrable-views", + "//adev/src/content/tutorials/first-app", + "//adev/src/content/tutorials/learn-angular", + "//adev/src/content/tutorials/signal-forms", + "//adev/src/content/tutorials/signals", ] + glob( ["src/**/*"], exclude = ["src/**/*.spec.ts"], diff --git a/adev/scripts/routes/BUILD.bazel b/adev/scripts/routes/BUILD.bazel new file mode 100644 index 000000000000..46d3a6a84062 --- /dev/null +++ b/adev/scripts/routes/BUILD.bazel @@ -0,0 +1,52 @@ +load("@aspect_rules_ts//ts:defs.bzl", "ts_project") +load("//adev/shared-docs:defaults.bzl", "js_binary", "js_run_binary") + +package(default_visibility = ["//adev:__subpackages__"]) + +ts_project( + name = "generate_routes_lib", + srcs = [ + "generate-routes.mts", + ], + data = [ + "//adev/src/assets:docs_api_manifest", + "//adev/src/content/tutorials/deferrable-views", + "//adev/src/content/tutorials/first-app", + "//adev/src/content/tutorials/learn-angular", + "//adev/src/content/tutorials/signal-forms", + "//adev/src/content/tutorials/signals", + ], + tsconfig = { + "compilerOptions": { + "target": "ES2022", + "moduleResolution": "node", + "types": ["node"], + "rootDir": ".", + "skipLibCheck": True, + }, + }, + deps = [ + "//adev:node_modules/@angular/docs", + "//adev:node_modules/@types/node", + "//adev/src/app/routing/navigation-entries", + "//adev/src/content/reference/errors:route-nav-items", + "//adev/src/content/reference/extended-diagnostics:route-nav-items", + ], +) + +js_binary( + name = "generate_route", + data = [ + "generate-routes.mjs", + ":generate_routes_lib", + "//adev/src/content:guide_files", + ], + entry_point = ":generate-routes.mjs", +) + +js_run_binary( + name = "run_generate_route", + outs = ["defined-routes.json"], + chdir = package_name(), + tool = ":generate_route", +) diff --git a/adev/scripts/routes/generate-routes.mts b/adev/scripts/routes/generate-routes.mts new file mode 100644 index 000000000000..605262d1729b --- /dev/null +++ b/adev/scripts/routes/generate-routes.mts @@ -0,0 +1,82 @@ +/*! + * @license + * Copyright Google LLC All Rights Reserved. + * + * Use of this source code is governed by an MIT-style license that can be + * found in the LICENSE file at https://angular.dev/license + */ + +import {ALL_ITEMS} from '../../src/app/routing/navigation-entries'; +import {NavigationItem} from '@angular/docs'; +import {writeFileSync, readFileSync} from 'fs'; +import {join, resolve} from 'path'; + +const outputFile = 'defined-routes.json'; +const contentRoot = resolve(process.cwd(), '../../src/content'); + +/** + * The scripts generates a list of all defined routes in the guides section and stores them + * in a JSON file. This file then used by other bazel targets to know which routes are valid. + */ + +function extractRoutes(items: NavigationItem[]): string[] { + const routes: string[] = []; + for (const item of items) { + if (item.path && !item.path.startsWith('http')) { + routes.push(item.path); + if (item.contentPath) { + const content = readFileSync(join(contentRoot, `${item.contentPath}.md`), { + encoding: 'utf-8', + }); + const headings = extractHeadings(content); + routes.push( + ...headings.map( + (heading) => `${item.path}#${heading.toLowerCase().replace(/\s+/g, '-')}`, + ), + ); + } + } + if (item.children) { + routes.push(...extractRoutes(item.children)); + } + } + return routes; +} + +function extractHeadings(content: string): string[] { + const headings = content + .split('\n') + // Top level heading (H1) are used for the page title only + // and yes, headings can have leading spaces + .filter((line) => line.trim().startsWith('##')) + .map((line) => line.replace(/^#+\s*/, '').trim()); + + const stepRegex = /]*title="([^"]*)"/g; + let match; + while ((match = stepRegex.exec(content)) !== null) { + headings.push(match[1]); + } + + return headings.map((heading: string) => getIdFromHeading(heading)); +} + +function main() { + const allRoutes: string[] = []; + + allRoutes.push(...extractRoutes(ALL_ITEMS)); + + const uniqueRoutes = Array.from(new Set(allRoutes.filter((r) => !!r))); + + console.warn('Generated routes:', JSON.stringify(uniqueRoutes, null, 2)); + writeFileSync(outputFile, JSON.stringify(uniqueRoutes, null, 2)); +} + +main(); + +// TODO: refactor so this function is shared with the generation pipeline (adev/shared-docs/pipeline/shared/marked/transformations/heading.mts) +function getIdFromHeading(heading: string): string { + return heading + .toLowerCase() + .replace(/\s|\//g, '-') // replace spaces and slashes with dashes + .replace(/[^\p{L}\d\-]/gu, ''); // only keep letters, digits & dashes +} diff --git a/adev/shared-docs/index.bzl b/adev/shared-docs/index.bzl index 576ecc162858..b600c2834480 100644 --- a/adev/shared-docs/index.bzl +++ b/adev/shared-docs/index.bzl @@ -5,9 +5,15 @@ load("//adev/shared-docs/pipeline:_previews.bzl", _generate_previews = "generate load("//adev/shared-docs/pipeline:_stackblitz.bzl", _generate_stackblitz = "generate_stackblitz") load("//adev/shared-docs/pipeline:_tutorial.bzl", _generate_tutorial = "generate_tutorial") -generate_guides = _generate_guides generate_stackblitz = _generate_stackblitz generate_previews = _generate_previews generate_playground = _generate_playground generate_tutorial = _generate_tutorial generate_nav_items = _generate_nav_items + +def generate_guides(**kwargs): + _generate_guides( + api_manifest = "//adev/src/assets:docs_api_manifest", + defined_routes = "//adev/scripts/routes:defined-routes.json", + **kwargs + ) diff --git a/adev/shared-docs/pipeline/_guides.bzl b/adev/shared-docs/pipeline/_guides.bzl index 3a7f45cc8a62..17bf4a8ae582 100644 --- a/adev/shared-docs/pipeline/_guides.bzl +++ b/adev/shared-docs/pipeline/_guides.bzl @@ -22,6 +22,11 @@ def _generate_guides(ctx): else: args.add("") + if ctx.attr.defined_routes: + args.add(ctx.file.defined_routes.path) + else: + args.add("") + # Determine the set of html output files. For each input markdown file, produce an html # file with the same name (replacing the markdown extension with `.html`). html_outputs = [] @@ -39,6 +44,8 @@ def _generate_guides(ctx): inputs = ctx.files.srcs + ctx.files.data if ctx.attr.api_manifest: inputs.append(ctx.file.api_manifest) + if ctx.attr.defined_routes: + inputs.append(ctx.file.defined_routes) if (ctx.attr.mermaid_blocks): ctx.actions.run( @@ -85,6 +92,10 @@ generate_guides = rule( doc = """A file containing API entries to be used in the markdown.""", allow_single_file = True, ), + "defined_routes": attr.label( + doc = """List of defined routes.""", + allow_single_file = [".json"], + ), "mermaid_blocks": attr.bool( doc = """Whether to transform mermaid blocks.""", default = False, diff --git a/adev/shared-docs/pipeline/api-gen/rendering/transforms/jsdoc-transforms.mts b/adev/shared-docs/pipeline/api-gen/rendering/transforms/jsdoc-transforms.mts index 87dd75ad11b6..4a49c2459f71 100644 --- a/adev/shared-docs/pipeline/api-gen/rendering/transforms/jsdoc-transforms.mts +++ b/adev/shared-docs/pipeline/api-gen/rendering/transforms/jsdoc-transforms.mts @@ -109,6 +109,7 @@ function getHtmlForJsDocText(text: string): string { const parsed = parseMarkdown(mdToParse, { apiEntries: getSymbolsAsApiEntries(), highlighter: getHighlighterInstance(), + definedRoutes: [], }); return addApiLinksToHtml(parsed); } diff --git a/adev/shared-docs/pipeline/guides/index.mts b/adev/shared-docs/pipeline/guides/index.mts index 056caa2b0b68..89bcf9c9972c 100644 --- a/adev/shared-docs/pipeline/guides/index.mts +++ b/adev/shared-docs/pipeline/guides/index.mts @@ -8,8 +8,8 @@ import {readFile, writeFile} from 'fs/promises'; import path from 'path'; -import {initHighlighter} from '../shared/shiki.mjs'; import {parseMarkdownAsync} from '../shared/marked/parse.mjs'; +import {initHighlighter} from '../shared/shiki.mjs'; import {hasUnknownAnchors} from './helpers.mjs'; type ApiManifest = ApiManifestPackage[]; @@ -21,33 +21,45 @@ interface ApiManifestPackage { async function main() { const [paramFilePath] = process.argv.slice(2); const rawParamLines = (await readFile(paramFilePath, {encoding: 'utf8'})).split('\n'); - const [srcs, outputFilenameExecRootRelativePath, apiManifestPath] = rawParamLines; + const [srcs, outputFilenameExecRootRelativePath, apiManifestPath, definedRoutesAsStr] = + rawParamLines; // The highlighter needs to be setup asynchronously // so we're doing it at the start of the pipeline const highlighter = await initHighlighter(); + let apiManifest: ApiManifest = []; + if (!apiManifestPath) { + throw new Error( + 'No API manifest path provided to the markdown parser. Check the failing generate_guides target.', + ); + } + + const apiManifestStr = await readFile(apiManifestPath, {encoding: 'utf8'}); + apiManifest = JSON.parse(apiManifestStr); + + let definedRoutes: string[] = []; + if (!definedRoutesAsStr) { + throw new Error( + 'No defined routes path provided to the markdown parser. Check the failing generate_guides target.', + ); + } + + const definedGuideRoutes = await readFile(definedRoutesAsStr, {encoding: 'utf8'}); + definedRoutes = JSON.parse(definedGuideRoutes) as string[]; + await Promise.all( srcs.split(',').map(async (filePath) => { if (!filePath.endsWith('.md')) { throw new Error(`Input file "${filePath}" does not end in a ".md" file extension.`); } - let apiManifest: ApiManifest = []; - if (apiManifestPath) { - try { - const apiManifestStr = await readFile(apiManifestPath, {encoding: 'utf8'}); - apiManifest = JSON.parse(apiManifestStr); - } catch (error) { - console.warn('Failed to load API entries:', error); - } - } - const markdownContent = await readFile(filePath, {encoding: 'utf8'}); const htmlOutputContent = await parseMarkdownAsync(markdownContent, { markdownFilePath: filePath, apiEntries: mapManifestToEntries(apiManifest), highlighter, + definedRoutes, }); // The expected file name structure is the [name of the file].md.html. diff --git a/adev/shared-docs/pipeline/shared/marked/extensions/docs-pill/docs-pill.mts b/adev/shared-docs/pipeline/shared/marked/extensions/docs-pill/docs-pill.mts index 223883a749c7..f4788b4fc44b 100644 --- a/adev/shared-docs/pipeline/shared/marked/extensions/docs-pill/docs-pill.mts +++ b/adev/shared-docs/pipeline/shared/marked/extensions/docs-pill/docs-pill.mts @@ -8,6 +8,7 @@ import {Token, Tokens, RendererThis, TokenizerThis} from 'marked'; import {anchorTarget, isExternalLink} from '../../helpers.mjs'; +import {AdevDocsRenderer} from '../../renderer.mjs'; interface DocsPillToken extends Tokens.Generic { type: 'docs-pill'; @@ -59,6 +60,14 @@ export const docsPillExtension = { renderer(this: RendererThis, token: DocsPillToken) { const downloadAttr = token.download ? ` download="${token.download}"` : ''; const targetAttr = token.target ? ` target="${token.target}"` : anchorTarget(token.href); + const renderer = this.parser.renderer as AdevDocsRenderer; + + if (!renderer.isKnownRoute(token.href)) { + throw new Error( + `Link target "${token.href}" is invalid in in ${renderer.context.markdownFilePath} does not exist in the defined guide routes.`, + ); + } + return ` ${this.parser.parseInline(token.tokens)}${ diff --git a/adev/shared-docs/pipeline/shared/marked/renderer.mts b/adev/shared-docs/pipeline/shared/marked/renderer.mts index b76160f702db..dc884fae7a7e 100644 --- a/adev/shared-docs/pipeline/shared/marked/renderer.mts +++ b/adev/shared-docs/pipeline/shared/marked/renderer.mts @@ -7,17 +7,27 @@ */ import {Renderer} from 'marked'; +import {HighlighterGeneric} from 'shiki'; +import {codespanRender} from './transformations/code.mjs'; +import {headingRender} from './transformations/heading.mjs'; +import {imageRender} from './transformations/image.mjs'; import {linkRender} from './transformations/link.mjs'; -import {tableRender} from './transformations/table.mjs'; import {listRender} from './transformations/list.mjs'; -import {imageRender} from './transformations/image.mjs'; +import {tableRender} from './transformations/table.mjs'; import {textRender} from './transformations/text.mjs'; -import {headingRender} from './transformations/heading.mjs'; -import {codespanRender} from './transformations/code.mjs'; -import {HighlighterGeneric} from 'shiki'; export interface RendererContext { + /** + * Path of the markdown file being rendered. + */ markdownFilePath?: string; + /** + * List of guide routes defined in the application. + */ + definedRoutes?: string[]; + /** + * Map of API entries available for linking within the rendered markdown file. + */ apiEntries?: Record; highlighter: HighlighterGeneric; headerIds: Map; @@ -46,6 +56,36 @@ export class AdevDocsRenderer extends Renderer { return this.context.markdownFilePath?.includes('/content/guide') ?? false; } + isKnownRoute(route: string): boolean { + route = route.startsWith('/') ? route.slice(1) : route; + route = route.split('?')[0]; // Remove query params + + if (route.startsWith('api/') || route.startsWith('api#')) { + // Remove fragment for API routes, as we don't have enough info to check them. + route = route.split('#')[0]; + } + if (!this.context.definedRoutes?.length) { + return true; + } + + if ( + route.startsWith('http') || + route.startsWith('#') || // Anchor link within the same page + route.startsWith('mailto:') || // Should we have a regex to exclude any protocol? + route.startsWith('playground') || + // TODO: Extract routes from the CDK as well + route.startsWith('api/cdk') || + // TODO: Extract routes from Aria as well + route.startsWith('api/aria') || + route.startsWith('tutorials') || + route.startsWith('extended-diagnostics') + ) { + return true; + } + + return this.context.definedRoutes.includes(route); + } + override link = linkRender; override table = tableRender; override list = listRender; @@ -53,34 +93,4 @@ export class AdevDocsRenderer extends Renderer { override text = textRender; override heading = headingRender; override codespan = codespanRender; - - getHeaderId(heading: string) { - const numberOfHeaderOccurrencesInTheDocument = this.context.headerIds.get(heading) ?? 0; - this.context.headerIds.set(heading, numberOfHeaderOccurrencesInTheDocument + 1); - - // extract the extended markdown heading id - // ex: ## MyHeading {# myId} - const match = heading.match(/{#([\w-]+)}/); - - let extractedId: string; - if (match) { - extractedId = match[1]; - } else { - extractedId = heading - .toLowerCase() - .replace(/

(.*?)<\/code>/g, '$1') // remove 
-        .replace(/(.*?)<\/strong>/g, '$1') // remove 
-        .replace(/(.*?)<\/em>/g, '$1') // remove 
-        .replace(/\s|\//g, '-') // remove spaces and slashes
-        .replace(/gt;|lt;/g, '') // remove escaped < and >
-        .replace(/&#\d+;/g, '') // remove HTML entities
-        .replace(/[^\p{L}\d\-]/gu, ''); // only keep letters, digits & dashes
-    }
-
-    const headerId = numberOfHeaderOccurrencesInTheDocument
-      ? `${extractedId}-${numberOfHeaderOccurrencesInTheDocument}`
-      : extractedId;
-
-    return headerId;
-  }
 }
diff --git a/adev/shared-docs/pipeline/shared/marked/test/heading/heading.md b/adev/shared-docs/pipeline/shared/marked/test/heading/heading.md
index a3ee7cebe7aa..104110533ff5 100644
--- a/adev/shared-docs/pipeline/shared/marked/test/heading/heading.md
+++ b/adev/shared-docs/pipeline/shared/marked/test/heading/heading.md
@@ -11,15 +11,3 @@
 ###### The smallest! (h6)
 
 ##### Another "more smaller" (h5)
-
-## Duplicate Anchor
-
-## Duplicate Anchor
-
-## `myClass.myMethod` is the best
-
-## ステップ 2 - アプリケーションのレイアウトに新しいコンポーネントを追加
-
-## My heading {# my-custom-id }
-
-## Query for the ``
diff --git a/adev/shared-docs/pipeline/shared/marked/test/heading/heading.spec.mts b/adev/shared-docs/pipeline/shared/marked/test/heading/heading.spec.mts
index 0eef81bb355d..16faedf05f8b 100644
--- a/adev/shared-docs/pipeline/shared/marked/test/heading/heading.spec.mts
+++ b/adev/shared-docs/pipeline/shared/marked/test/heading/heading.spec.mts
@@ -43,19 +43,26 @@ describe('markdown to html', () => {
     }
   });
 
-  it('increments when multiple duplicate header names are found', () => {
+  // In case there is a valid usecase for duplicate header ids, we should use custom ids (as demonstrated below)
+  it('uses same id when multiple duplicate header names are found', () => {
+    const markdownDocument = JSDOM.fragment(
+      parseMarkdown(
+        `
+## Duplicate Anchor
+## Duplicate Anchor`,
+        rendererContext,
+      ),
+    );
+
     const headers = markdownDocument.querySelectorAll('a.docs-anchor');
-    const knownRefs = new Set();
-    for (const el of headers) {
-      const href = el.getAttribute('href');
-      expect(knownRefs.has(href!)).toBeFalse();
-      knownRefs.add(href!);
-    }
+    expect(headers[0].getAttribute('href')).toBe(headers[1].getAttribute('href'));
   });
 
   it('should remove code block markups', () => {
-    const h2List = markdownDocument.querySelectorAll('h2');
-    const h2 = h2List[3];
+    const markdownDocument = JSDOM.fragment(
+      parseMarkdown('## `myClass.myMethod` is the best', rendererContext),
+    );
+    const h2 = markdownDocument.querySelector('h2')!;
     const h2Anchor = h2?.firstElementChild;
 
     const h2HeaderId = h2?.getAttribute('id');
@@ -66,8 +73,13 @@ describe('markdown to html', () => {
   });
 
   it('should be able to extract non-ascii ids', () => {
-    const h2List = markdownDocument.querySelectorAll('h2');
-    const h2 = h2List[4];
+    const markdownDocument = JSDOM.fragment(
+      parseMarkdown(
+        '## ステップ 2 - アプリケーションのレイアウトに新しいコンポーネントを追加',
+        rendererContext,
+      ),
+    );
+    const h2 = markdownDocument.querySelector('h2')!;
     const h2Anchor = h2?.firstElementChild;
 
     const h2HeaderId = h2?.getAttribute('id');
@@ -80,8 +92,11 @@ describe('markdown to html', () => {
   });
 
   it('should be able to extract custom ids', () => {
-    const h2List = markdownDocument.querySelectorAll('h2');
-    const h2 = h2List[5];
+    const markdownDocument = JSDOM.fragment(
+      parseMarkdown('## My heading {# my-custom-id }', rendererContext),
+    );
+
+    const h2 = markdownDocument.querySelector('h2')!;
     const h2Anchor = h2?.firstElementChild;
 
     const h2HeaderId = h2?.getAttribute('id');
@@ -92,8 +107,10 @@ describe('markdown to html', () => {
   });
 
   it('should be able to parse heading with a valid tag in a code block', () => {
-    const h2List = markdownDocument.querySelectorAll('h2');
-    const h2 = h2List[6];
+    const markdownDocument = JSDOM.fragment(
+      parseMarkdown('## Query for the ``', rendererContext),
+    );
+    const h2 = markdownDocument.querySelector('h2')!;
 
     // The anchor element should be to only child
     expect(h2.children.length).toBe(1);
diff --git a/adev/shared-docs/pipeline/shared/marked/transformations/heading.mts b/adev/shared-docs/pipeline/shared/marked/transformations/heading.mts
index 2dbcba2cae39..3bd651ee9d21 100644
--- a/adev/shared-docs/pipeline/shared/marked/transformations/heading.mts
+++ b/adev/shared-docs/pipeline/shared/marked/transformations/heading.mts
@@ -9,29 +9,30 @@
 import {Tokens} from 'marked';
 import {AdevDocsRenderer} from '../renderer.mjs';
 
-export function headingRender(this: AdevDocsRenderer, {depth, tokens}: Tokens.Heading): string {
-  const text = this?.parser.parseInline(tokens);
+export function headingRender(
+  this: AdevDocsRenderer,
+  {depth, tokens, text: headingText, raw}: Tokens.Heading,
+): string {
+  const parsedText = this?.parser.parseInline(tokens);
   if (depth === 1) {
     return `
     
       
-      ${getPageTitle(text, this.context.markdownFilePath)}
+      ${getPageTitle(parsedText, this.context.markdownFilePath)}
     
     `;
   }
 
-  // Nested anchor elements are invalid in HTML
-  // They might happen when we have a code block in a heading
-  // regex aren't perfect for that but this one should be "good enough"
-  const regex = /]*?\s+)?href.*?>(.*?)<\/a>/gi;
-  const anchorLessText = text.replace(regex, '$1');
-
   // extract the extended markdown heading id
   // ex:  ## MyHeading {# myId}
+  // This is recommended in case we end up having duplicate Ids but we still want the same heading text.
+  // We don't want to make Id generation stateful/too complex to handle duplicates automatically.
   const customIdRegex = /{#\s*([\w-]+)\s*}/g;
-  const customId = customIdRegex.exec(anchorLessText)?.[1];
-  const link = customId ?? this.getHeaderId(anchorLessText);
-  const label = anchorLessText.replace(/`(.*?)`/g, '$1').replace(customIdRegex, '');
+  const customId = customIdRegex.exec(headingText)?.[1];
+
+  const link = customId ?? getIdFromHeading(headingText);
+
+  const label = parsedText.replace(/`(.*?)`/g, '$1');
   const normalizedLabel = label.replace(/<\/?code>/g, '');
 
   return `
@@ -62,3 +63,10 @@ export function getPageTitle(text: string, filePath?: string): string {
     }

`;
 }
+
+function getIdFromHeading(heading: string): string {
+  return heading
+    .toLowerCase()
+    .replace(/\s|\//g, '-') // replace spaces and slashes with dashes
+    .replace(/[^\p{L}\d\-]/gu, ''); // only keep letters, digits & dashes
+}
diff --git a/adev/shared-docs/pipeline/shared/marked/transformations/link.mts b/adev/shared-docs/pipeline/shared/marked/transformations/link.mts
index d5d176e2ebfc..502635588871 100644
--- a/adev/shared-docs/pipeline/shared/marked/transformations/link.mts
+++ b/adev/shared-docs/pipeline/shared/marked/transformations/link.mts
@@ -34,6 +34,12 @@ export function linkRender(this: AdevDocsRenderer, {href, title, tokens}: Tokens
     );
   }
 
+  if (!this.isKnownRoute(href)) {
+    throw new Error(
+      `Link target "${href}" in ${this.context.markdownFilePath} does not exist in the defined guide routes.`,
+    );
+  }
+
   if (insideLink) {
     return this.parser.parseInline(tokens);
   }
diff --git a/adev/src/app/routing/navigation-entries/BUILD.bazel b/adev/src/app/routing/navigation-entries/BUILD.bazel
new file mode 100644
index 000000000000..6cb83572c137
--- /dev/null
+++ b/adev/src/app/routing/navigation-entries/BUILD.bazel
@@ -0,0 +1,32 @@
+load("@aspect_rules_ts//ts:defs.bzl", "ts_project")
+
+package(default_visibility = ["//visibility:public"])
+
+ts_project(
+    name = "navigation-entries",
+    srcs = ["index.ts"],
+    declaration = True,
+    tsconfig = {
+        "compilerOptions": {
+            "target": "ES2022",
+            "moduleResolution": "node",
+            "types": ["node"],
+            "rootDir": ".",
+            "skipLibCheck": True,
+        },
+    },
+    deps = [
+        "//adev:node_modules/@angular/compiler-cli",
+        "//adev:node_modules/@angular/core",
+        "//adev:node_modules/@angular/docs",
+        "//adev:node_modules/@types/node",
+        "//adev/src/content/reference/errors:route-nav-items",
+        "//adev/src/content/reference/extended-diagnostics:route-nav-items",
+    ],
+)
+
+filegroup(
+    name = "navigation_types",
+    srcs = [":navigation-entries"],
+    output_group = "types",
+)
diff --git a/adev/src/app/routing/navigation-entries/index.ts b/adev/src/app/routing/navigation-entries/index.ts
new file mode 100644
index 000000000000..eba3f1809a9a
--- /dev/null
+++ b/adev/src/app/routing/navigation-entries/index.ts
@@ -0,0 +1,1702 @@
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {isDevMode} from '@angular/core';
+import type {NavigationItem} from '@angular/docs';
+// These imports are expected to be red because they are generated a build time
+// @ts-ignore
+import ERRORS_NAV_DATA from '../../../content/reference/errors/routes.json' with {type: 'json'};
+// @ts-ignore
+import EXT_DIAGNOSTICS_NAV_DATA from '../../../content/reference/extended-diagnostics/routes.json' with {type: 'json'};
+// @ts-ignore
+import FIRST_APP_TUTORIAL_NAV_DATA from '../../../content/tutorials/first-app/first-app/routes.json' with {type: 'json'};
+// @ts-ignore
+import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../content/tutorials/learn-angular/learn-angular/routes.json' with {type: 'json'};
+// @ts-ignore
+import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../content/tutorials/deferrable-views/deferrable-views/routes.json' with {type: 'json'};
+// @ts-ignore
+import SIGNALS_TUTORIAL_NAV_DATA from '../../../content/tutorials/signals/signals/routes.json' with {type: 'json'};
+// @ts-ignore
+import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../content/tutorials/signal-forms/signal-forms/routes.json' with {type: 'json'};
+// @ts-ignore
+import API_MANIFEST_JSON from '../../../assets/manifest.json' with {type: 'json'};
+
+interface SubNavigationData {
+  docs: NavigationItem[];
+  reference: NavigationItem[];
+  tutorials: NavigationItem[];
+  footer: NavigationItem[];
+}
+
+export const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
+  {
+    label: 'Introduction',
+    children: [
+      {
+        label: 'What is Angular?',
+        path: 'overview',
+        contentPath: 'introduction/what-is-angular',
+      },
+      {
+        label: 'Installation',
+        path: 'installation',
+        contentPath: 'introduction/installation',
+      },
+      {
+        label: 'Essentials',
+        children: [
+          {
+            label: 'Overview',
+            path: 'essentials',
+            contentPath: 'introduction/essentials/overview',
+          },
+          {
+            label: 'Composition with components',
+            path: 'essentials/components',
+            contentPath: 'introduction/essentials/components',
+          },
+          {
+            label: 'Reactivity with signals',
+            path: 'essentials/signals',
+            contentPath: 'introduction/essentials/signals',
+          },
+          {
+            label: 'Dynamic interfaces with templates',
+            path: 'essentials/templates',
+            contentPath: 'introduction/essentials/templates',
+          },
+          {
+            label: 'Forms with signals',
+            path: 'essentials/signal-forms',
+            contentPath: 'introduction/essentials/signal-forms',
+            status: 'new',
+          },
+          {
+            label: 'Modular design with dependency injection',
+            path: 'essentials/dependency-injection',
+            contentPath: 'introduction/essentials/dependency-injection',
+          },
+          {
+            label: 'Next Steps',
+            path: 'essentials/next-steps',
+            contentPath: 'introduction/essentials/next-steps',
+          },
+        ],
+      },
+      {
+        label: 'Start coding! 🚀',
+        path: 'tutorials/learn-angular',
+      },
+    ],
+  },
+  {
+    label: 'In-depth Guides',
+    children: [
+      {
+        label: 'Signals',
+        status: 'updated',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/signals',
+            contentPath: 'guide/signals/overview',
+          },
+          {
+            label: 'Dependent state with linkedSignal',
+            path: 'guide/signals/linked-signal',
+            contentPath: 'guide/signals/linked-signal',
+          },
+          {
+            label: 'Async reactivity with resources',
+            path: 'guide/signals/resource',
+            contentPath: 'guide/signals/resource',
+          },
+          {
+            label: 'Side effects for non-reactives APIs',
+            path: 'guide/signals/effect',
+            contentPath: 'guide/signals/effect',
+            status: 'new',
+          },
+        ],
+      },
+      {
+        label: 'Components',
+        children: [
+          {
+            label: 'Anatomy of components',
+            path: 'guide/components',
+            contentPath: 'guide/components/anatomy-of-components',
+          },
+          {
+            label: 'Selectors',
+            path: 'guide/components/selectors',
+            contentPath: 'guide/components/selectors',
+          },
+          {
+            label: 'Styling',
+            path: 'guide/components/styling',
+            contentPath: 'guide/components/styling',
+          },
+          {
+            label: 'Accepting data with input properties',
+            path: 'guide/components/inputs',
+            contentPath: 'guide/components/inputs',
+          },
+          {
+            label: 'Custom events with outputs',
+            path: 'guide/components/outputs',
+            contentPath: 'guide/components/outputs',
+          },
+          {
+            label: 'Content projection with ng-content',
+            path: 'guide/components/content-projection',
+            contentPath: 'guide/components/content-projection',
+          },
+          {
+            label: 'Host elements',
+            path: 'guide/components/host-elements',
+            contentPath: 'guide/components/host-elements',
+          },
+          {
+            label: 'Lifecycle',
+            path: 'guide/components/lifecycle',
+            contentPath: 'guide/components/lifecycle',
+          },
+          {
+            label: 'Referencing component children with queries',
+            path: 'guide/components/queries',
+            contentPath: 'guide/components/queries',
+          },
+          {
+            label: 'Using DOM APIs',
+            path: 'guide/components/dom-apis',
+            contentPath: 'guide/components/dom-apis',
+          },
+          {
+            label: 'Inheritance',
+            path: 'guide/components/inheritance',
+            contentPath: 'guide/components/inheritance',
+          },
+          {
+            label: 'Programmatically rendering components',
+            path: 'guide/components/programmatic-rendering',
+            contentPath: 'guide/components/programmatic-rendering',
+          },
+          {
+            label: 'Advanced configuration',
+            path: 'guide/components/advanced-configuration',
+            contentPath: 'guide/components/advanced-configuration',
+          },
+          {
+            label: 'Custom Elements',
+            path: 'guide/elements',
+            contentPath: 'guide/elements',
+          },
+        ],
+      },
+      {
+        label: 'Templates',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/templates',
+            contentPath: 'guide/templates/overview',
+          },
+          {
+            label: 'Binding dynamic text, properties and attributes',
+            path: 'guide/templates/binding',
+            contentPath: 'guide/templates/binding',
+          },
+          {
+            label: 'Adding event listeners',
+            path: 'guide/templates/event-listeners',
+            contentPath: 'guide/templates/event-listeners',
+          },
+          {
+            label: 'Two-way binding',
+            path: 'guide/templates/two-way-binding',
+            contentPath: 'guide/templates/two-way-binding',
+          },
+          {
+            label: 'Control flow',
+            path: 'guide/templates/control-flow',
+            contentPath: 'guide/templates/control-flow',
+          },
+          {
+            label: 'Pipes',
+            path: 'guide/templates/pipes',
+            contentPath: 'guide/templates/pipes',
+          },
+          {
+            label: 'Slotting child content with ng-content',
+            path: 'guide/templates/ng-content',
+            contentPath: 'guide/templates/ng-content',
+          },
+          {
+            label: 'Create template fragments with ng-template',
+            path: 'guide/templates/ng-template',
+            contentPath: 'guide/templates/ng-template',
+          },
+          {
+            label: 'Grouping elements with ng-container',
+            path: 'guide/templates/ng-container',
+            contentPath: 'guide/templates/ng-container',
+          },
+          {
+            label: 'Variables in templates',
+            path: 'guide/templates/variables',
+            contentPath: 'guide/templates/variables',
+          },
+          {
+            label: 'Deferred loading with @defer',
+            path: 'guide/templates/defer',
+            contentPath: 'guide/templates/defer',
+          },
+          {
+            label: 'Expression syntax',
+            path: 'guide/templates/expression-syntax',
+            contentPath: 'guide/templates/expression-syntax',
+          },
+          {
+            label: 'Whitespace in templates',
+            path: 'guide/templates/whitespace',
+            contentPath: 'guide/templates/whitespace',
+          },
+        ],
+      },
+      {
+        label: 'Directives',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/directives',
+            contentPath: 'guide/directives/overview',
+          },
+          {
+            label: 'Attribute directives',
+            path: 'guide/directives/attribute-directives',
+            contentPath: 'guide/directives/attribute-directives',
+          },
+          {
+            label: 'Structural directives',
+            path: 'guide/directives/structural-directives',
+            contentPath: 'guide/directives/structural-directives',
+          },
+          {
+            label: 'Directive composition API',
+            path: 'guide/directives/directive-composition-api',
+            contentPath: 'guide/directives/directive-composition-api',
+          },
+          {
+            label: 'Optimizing images with NgOptimizedImage',
+            path: 'guide/image-optimization',
+            contentPath: 'guide/image-optimization',
+          },
+        ],
+      },
+      {
+        label: 'Dependency Injection',
+        status: 'updated',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/di',
+            contentPath: 'guide/di/overview',
+            status: 'updated',
+          },
+          {
+            label: 'Creating and using services',
+            path: 'guide/di/creating-and-using-services',
+            contentPath: 'guide/di/creating-and-using-services',
+            status: 'updated',
+          },
+          {
+            label: 'Defining dependency providers',
+            path: 'guide/di/defining-dependency-providers',
+            contentPath: 'guide/di/defining-dependency-providers',
+            status: 'updated',
+          },
+          {
+            label: 'Injection context',
+            path: 'guide/di/dependency-injection-context',
+            contentPath: 'guide/di/dependency-injection-context',
+          },
+          {
+            label: 'Hierarchical injectors',
+            path: 'guide/di/hierarchical-dependency-injection',
+            contentPath: 'guide/di/hierarchical-dependency-injection',
+          },
+          {
+            label: 'Optimizing injection tokens',
+            path: 'guide/di/lightweight-injection-tokens',
+            contentPath: 'guide/di/lightweight-injection-tokens',
+          },
+          {
+            label: 'DI in action',
+            path: 'guide/di/di-in-action',
+            contentPath: 'guide/di/di-in-action',
+          },
+        ],
+      },
+      {
+        label: 'Routing',
+        status: 'updated',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/routing',
+            contentPath: 'guide/routing/overview',
+          },
+          {
+            label: 'Define routes',
+            path: 'guide/routing/define-routes',
+            contentPath: 'guide/routing/define-routes',
+          },
+          {
+            label: 'Show routes with Outlets',
+            path: 'guide/routing/show-routes-with-outlets',
+            contentPath: 'guide/routing/show-routes-with-outlets',
+          },
+          {
+            label: 'Navigate to routes',
+            path: 'guide/routing/navigate-to-routes',
+            contentPath: 'guide/routing/navigate-to-routes',
+          },
+          {
+            label: 'Read route state',
+            path: 'guide/routing/read-route-state',
+            contentPath: 'guide/routing/read-route-state',
+          },
+          {
+            label: 'Redirecting routes',
+            path: 'guide/routing/redirecting-routes',
+            contentPath: 'guide/routing/redirecting-routes',
+          },
+          {
+            label: 'Control route access with guards',
+            path: 'guide/routing/route-guards',
+            contentPath: 'guide/routing/route-guards',
+          },
+          {
+            label: 'Route data resolvers',
+            path: 'guide/routing/data-resolvers',
+            contentPath: 'guide/routing/data-resolvers',
+          },
+          {
+            label: 'Lifecycle and events',
+            path: 'guide/routing/lifecycle-and-events',
+            contentPath: 'guide/routing/lifecycle-and-events',
+          },
+          {
+            label: 'Testing routing and navigation',
+            path: 'guide/routing/testing',
+            contentPath: 'guide/routing/testing',
+            status: 'new',
+          },
+          {
+            label: 'Other routing tasks',
+            path: 'guide/routing/common-router-tasks',
+            contentPath: 'guide/routing/common-router-tasks',
+          },
+          {
+            label: 'Creating custom route matches',
+            path: 'guide/routing/routing-with-urlmatcher',
+            contentPath: 'guide/routing/routing-with-urlmatcher',
+          },
+          {
+            label: 'Rendering strategies',
+            path: 'guide/routing/rendering-strategies',
+            contentPath: 'guide/routing/rendering-strategies',
+            status: 'new',
+          },
+          {
+            label: 'Customizing route behavior',
+            path: 'guide/routing/customizing-route-behavior',
+            contentPath: 'guide/routing/customizing-route-behavior',
+            status: 'new',
+          },
+          {
+            label: 'Router reference',
+            path: 'guide/routing/router-reference',
+            contentPath: 'guide/routing/router-reference',
+          },
+          {
+            label: 'Route transition animations',
+            path: 'guide/routing/route-transition-animations',
+            contentPath: 'guide/routing/route-transition-animations',
+          },
+        ],
+      },
+      {
+        label: 'Forms',
+        status: 'updated',
+        preserveOtherCategoryOrder: true,
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/forms',
+            contentPath: 'guide/forms/overview',
+          },
+
+          {
+            label: 'Overview',
+            path: 'guide/forms/signals/overview',
+            contentPath: 'guide/forms/signals/overview',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Form models',
+            path: 'guide/forms/signals/models',
+            contentPath: 'guide/forms/signals/models',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Form model design',
+            path: 'guide/forms/signals/model-design',
+            contentPath: 'guide/forms/signals/designing-your-form-model',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Field state management',
+            path: 'guide/forms/signals/field-state-management',
+            contentPath: 'guide/forms/signals/field-state-management',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Validation',
+            path: 'guide/forms/signals/validation',
+            contentPath: 'guide/forms/signals/validation',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Custom controls',
+            path: 'guide/forms/signals/custom-controls',
+            contentPath: 'guide/forms/signals/custom-controls',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Comparison with other form systems',
+            path: 'guide/forms/signals/comparison',
+            contentPath: 'guide/forms/signals/comparison',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Migrating from Legacy Forms',
+            path: 'guide/forms/signals/migration',
+            contentPath: 'guide/forms/signals/migration',
+            category: 'Signal Forms',
+            status: 'new',
+          },
+          {
+            label: 'Reactive forms',
+            path: 'guide/forms/reactive-forms',
+            contentPath: 'guide/forms/reactive-forms',
+            category: 'Reactive Forms',
+          },
+          {
+            label: 'Strictly typed reactive forms',
+            path: 'guide/forms/typed-forms',
+            contentPath: 'guide/forms/typed-forms',
+            category: 'Reactive Forms',
+          },
+          {
+            label: 'Template-driven forms',
+            path: 'guide/forms/template-driven-forms',
+            contentPath: 'guide/forms/template-driven-forms',
+            category: 'Template driven Forms',
+          },
+          {
+            label: 'Validate form input',
+            path: 'guide/forms/form-validation',
+            contentPath: 'guide/forms/form-validation',
+            category: 'Reactive Forms',
+          },
+          {
+            label: 'Validate form input',
+            path: 'guide/forms/form-validation',
+            contentPath: 'guide/forms/form-validation',
+            category: 'Template driven Forms',
+          },
+          {
+            label: 'Building dynamic forms',
+            path: 'guide/forms/dynamic-forms',
+            contentPath: 'guide/forms/dynamic-forms',
+            category: 'Reactive Forms',
+          },
+        ],
+      },
+      {
+        label: 'HTTP Client',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/http',
+            contentPath: 'guide/http/overview',
+          },
+          {
+            label: 'Setting up HttpClient',
+            path: 'guide/http/setup',
+            contentPath: 'guide/http/setup',
+          },
+          {
+            label: 'Making requests',
+            path: 'guide/http/making-requests',
+            contentPath: 'guide/http/making-requests',
+          },
+          {
+            label: 'Reactive data fetching with httpResource',
+            path: 'guide/http/http-resource',
+            contentPath: 'guide/http/http-resource',
+          },
+          {
+            label: 'Intercepting requests and responses',
+            path: 'guide/http/interceptors',
+            contentPath: 'guide/http/interceptors',
+          },
+          {
+            label: 'Testing',
+            path: 'guide/http/testing',
+            contentPath: 'guide/http/testing',
+          },
+        ],
+      },
+      {
+        label: 'Server-side & hybrid-rendering',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/performance',
+            contentPath: 'guide/performance/overview',
+          },
+          {
+            label: 'Server-side and hybrid-rendering',
+            path: 'guide/ssr',
+            contentPath: 'guide/ssr',
+          },
+          {
+            label: 'Hydration',
+            path: 'guide/hydration',
+            contentPath: 'guide/hydration',
+          },
+          {
+            label: 'Incremental Hydration',
+            path: 'guide/incremental-hydration',
+            contentPath: 'guide/incremental-hydration',
+          },
+        ],
+      },
+      {
+        label: 'Testing',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/testing',
+            contentPath: 'guide/testing/overview',
+          },
+          {
+            label: 'Basics of testing components',
+            path: 'guide/testing/components-basics',
+            contentPath: 'guide/testing/components-basics',
+          },
+          {
+            label: 'Component testing scenarios',
+            path: 'guide/testing/components-scenarios',
+            contentPath: 'guide/testing/components-scenarios',
+          },
+          {
+            label: 'Testing services',
+            path: 'guide/testing/services',
+            contentPath: 'guide/testing/services',
+          },
+          {
+            label: 'Testing attribute directives',
+            path: 'guide/testing/attribute-directives',
+            contentPath: 'guide/testing/attribute-directives',
+          },
+          {
+            label: 'Testing pipes',
+            path: 'guide/testing/pipes',
+            contentPath: 'guide/testing/pipes',
+          },
+          {
+            label: 'Testing routing and navigation',
+            path: 'guide/routing/testing',
+            contentPath: 'guide/routing/testing',
+            status: 'new',
+          },
+          {
+            label: 'Debugging tests',
+            path: 'guide/testing/debugging',
+            contentPath: 'guide/testing/debugging',
+          },
+          {
+            label: 'Code coverage',
+            path: 'guide/testing/code-coverage',
+            contentPath: 'guide/testing/code-coverage',
+          },
+          {
+            label: 'Testing utility APIs',
+            path: 'guide/testing/utility-apis',
+            contentPath: 'guide/testing/utility-apis',
+          },
+          {
+            label: 'Component harnesses overview',
+            path: 'guide/testing/component-harnesses-overview',
+            contentPath: 'guide/testing/component-harnesses-overview',
+          },
+          {
+            label: 'Using component harnesses in tests',
+            path: 'guide/testing/using-component-harnesses',
+            contentPath: 'guide/testing/using-component-harnesses',
+          },
+          {
+            label: 'Creating harnesses for your components',
+            path: 'guide/testing/creating-component-harnesses',
+            contentPath: 'guide/testing/creating-component-harnesses',
+          },
+          {
+            label: 'Adding harness support for additional testing environments',
+            path: 'guide/testing/component-harnesses-testing-environments',
+            contentPath: 'guide/testing/component-harnesses-testing-environments',
+          },
+          {
+            label: 'Migrating from Karma to Vitest',
+            path: 'guide/testing/migrating-to-vitest',
+            contentPath: 'guide/testing/migrating-to-vitest',
+          },
+          {
+            label: 'Testing with Karma and Jasmine',
+            path: 'guide/testing/karma',
+            contentPath: 'guide/testing/karma',
+          },
+          {
+            label: 'Zone.js Testing Utilities',
+            path: 'guide/testing/zone-js-testing-utilities',
+            contentPath: 'guide/testing/zone-js-testing-utilities',
+          },
+        ],
+      },
+      {
+        label: 'Angular Aria',
+        status: 'new',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/aria/overview',
+            contentPath: 'guide/aria/overview',
+          },
+          {
+            label: 'Accordion',
+            path: 'guide/aria/accordion',
+            contentPath: 'guide/aria/accordion',
+          },
+          {
+            label: 'Autocomplete',
+            path: 'guide/aria/autocomplete',
+            contentPath: 'guide/aria/autocomplete',
+          },
+          {
+            label: 'Combobox',
+            path: 'guide/aria/combobox',
+            contentPath: 'guide/aria/combobox',
+          },
+          {
+            label: 'Grid',
+            path: 'guide/aria/grid',
+            contentPath: 'guide/aria/grid',
+          },
+          {
+            label: 'Listbox',
+            path: 'guide/aria/listbox',
+            contentPath: 'guide/aria/listbox',
+          },
+          {
+            label: 'Menu',
+            path: 'guide/aria/menu',
+            contentPath: 'guide/aria/menu',
+          },
+          {
+            label: 'Menubar',
+            path: 'guide/aria/menubar',
+            contentPath: 'guide/aria/menubar',
+          },
+          {
+            label: 'Multiselect',
+            path: 'guide/aria/multiselect',
+            contentPath: 'guide/aria/multiselect',
+          },
+          {
+            label: 'Select',
+            path: 'guide/aria/select',
+            contentPath: 'guide/aria/select',
+          },
+          {
+            label: 'Tabs',
+            path: 'guide/aria/tabs',
+            contentPath: 'guide/aria/tabs',
+          },
+          {
+            label: 'Toolbar',
+            path: 'guide/aria/toolbar',
+            contentPath: 'guide/aria/toolbar',
+          },
+          {
+            label: 'Tree',
+            path: 'guide/aria/tree',
+            contentPath: 'guide/aria/tree',
+          },
+        ],
+      },
+      {
+        label: 'Internationalization',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/i18n',
+            contentPath: 'guide/i18n/overview',
+          },
+          {
+            label: 'Add the localize package',
+            path: 'guide/i18n/add-package',
+            contentPath: 'guide/i18n/add-package',
+          },
+          {
+            label: 'Refer to locales by ID',
+            path: 'guide/i18n/locale-id',
+            contentPath: 'guide/i18n/locale-id',
+          },
+          {
+            label: 'Format data based on locale',
+            path: 'guide/i18n/format-data-locale',
+            contentPath: 'guide/i18n/format-data-locale',
+          },
+          {
+            label: 'Prepare component for translation',
+            path: 'guide/i18n/prepare',
+            contentPath: 'guide/i18n/prepare',
+          },
+          {
+            label: 'Work with translation files',
+            path: 'guide/i18n/translation-files',
+            contentPath: 'guide/i18n/translation-files',
+          },
+          {
+            label: 'Merge translations into the app',
+            path: 'guide/i18n/merge',
+            contentPath: 'guide/i18n/merge',
+          },
+          {
+            label: 'Deploy multiple locales',
+            path: 'guide/i18n/deploy',
+            contentPath: 'guide/i18n/deploy',
+          },
+          {
+            label: 'Import global variants of the locale data',
+            path: 'guide/i18n/import-global-variants',
+            contentPath: 'guide/i18n/import-global-variants',
+          },
+          {
+            label: 'Manage marked text with custom IDs',
+            path: 'guide/i18n/manage-marked-text',
+            contentPath: 'guide/i18n/manage-marked-text',
+          },
+          {
+            label: 'Example Angular application',
+            path: 'guide/i18n/example',
+            contentPath: 'guide/i18n/example',
+          },
+        ],
+      },
+      {
+        label: 'Animations',
+        status: 'updated',
+        children: [
+          {
+            label: 'Enter and Leave animations',
+            path: 'guide/animations',
+            contentPath: 'guide/animations/enter-and-leave',
+            status: 'new',
+          },
+          {
+            label: 'Complex Animations with CSS',
+            path: 'guide/animations/css',
+            contentPath: 'guide/animations/css',
+          },
+          {
+            label: 'Route transition animations',
+            path: 'guide/routing/route-transition-animations',
+            contentPath: 'guide/routing/route-transition-animations',
+          },
+        ],
+      },
+      {
+        label: 'Drag and drop',
+        path: 'guide/drag-drop',
+        contentPath: 'guide/drag-drop',
+      },
+    ],
+  },
+  {
+    label: 'Build with AI',
+    status: 'new',
+    children: [
+      {
+        label: 'Get Started',
+        path: 'ai',
+        contentPath: 'ai/overview',
+      },
+      {
+        label: 'LLM prompts and AI IDE setup',
+        path: 'ai/develop-with-ai',
+        contentPath: 'ai/develop-with-ai',
+      },
+      {
+        label: 'Design Patterns',
+        path: 'ai/design-patterns',
+        contentPath: 'ai/design-patterns',
+      },
+      {
+        label: 'Angular CLI MCP Server setup',
+        path: 'ai/mcp',
+        contentPath: 'ai/mcp-server-setup',
+      },
+      {
+        label: 'Angular AI Tutor',
+        path: 'ai/ai-tutor',
+        contentPath: 'ai/ai-tutor',
+      },
+    ],
+  },
+  {
+    label: 'Developer Tools',
+    children: [
+      {
+        label: 'Angular CLI',
+        children: [
+          {
+            label: 'Overview',
+            path: 'tools/cli',
+            contentPath: 'tools/cli/overview',
+          },
+          {
+            label: 'Local set-up',
+            path: 'tools/cli/setup-local',
+            contentPath: 'tools/cli/setup-local',
+          },
+          {
+            label: 'Building Angular apps',
+            path: 'tools/cli/build',
+            contentPath: 'tools/cli/build',
+          },
+          {
+            label: 'Serving Angular apps for development',
+            path: 'tools/cli/serve',
+            contentPath: 'tools/cli/serve',
+          },
+          {
+            label: 'Deployment',
+            path: 'tools/cli/deployment',
+            contentPath: 'tools/cli/deployment',
+          },
+          {
+            label: 'End-to-End Testing',
+            path: 'tools/cli/end-to-end',
+            contentPath: 'tools/cli/end-to-end',
+          },
+          {
+            label: 'Migrating to new build system',
+            path: 'tools/cli/build-system-migration',
+            contentPath: 'tools/cli/build-system-migration',
+          },
+          {
+            label: 'Build environments',
+            path: 'tools/cli/environments',
+            contentPath: 'tools/cli/environments',
+          },
+          {
+            label: 'Angular CLI builders',
+            path: 'tools/cli/cli-builder',
+            contentPath: 'tools/cli/cli-builder',
+          },
+          {
+            label: 'Generating code using schematics',
+            path: 'tools/cli/schematics',
+            contentPath: 'tools/cli/schematics',
+          },
+          {
+            label: 'Authoring schematics',
+            path: 'tools/cli/schematics-authoring',
+            contentPath: 'tools/cli/schematics-authoring',
+          },
+          {
+            label: 'Schematics for libraries',
+            path: 'tools/cli/schematics-for-libraries',
+            contentPath: 'tools/cli/schematics-for-libraries',
+          },
+          {
+            label: 'Template type checking',
+            path: 'tools/cli/template-typecheck',
+            contentPath: 'tools/cli/template-typecheck',
+          },
+          {
+            label: 'Ahead-of-time (AOT) compilation',
+            path: 'tools/cli/aot-compiler',
+            contentPath: 'tools/cli/aot-compiler',
+          },
+          {
+            label: 'AOT metadata errors',
+            path: 'tools/cli/aot-metadata-errors',
+            contentPath: 'tools/cli/aot-metadata-errors',
+          },
+        ],
+      },
+      {
+        label: 'Libraries',
+        children: [
+          {
+            label: 'Overview',
+            path: 'tools/libraries',
+            contentPath: 'tools/libraries/overview',
+          },
+          {
+            label: 'Creating Libraries',
+            path: 'tools/libraries/creating-libraries',
+            contentPath: 'tools/libraries/creating-libraries',
+          },
+          {
+            label: 'Using Libraries',
+            path: 'tools/libraries/using-libraries',
+            contentPath: 'tools/libraries/using-libraries',
+          },
+          {
+            label: 'Angular Package Format',
+            path: 'tools/libraries/angular-package-format',
+            contentPath: 'tools/libraries/angular-package-format',
+          },
+        ],
+      },
+      {
+        label: 'DevTools',
+        children: [
+          {
+            label: 'Overview',
+            path: 'tools/devtools',
+            contentPath: 'tools/devtools/overview',
+          },
+          {
+            label: 'Components',
+            path: 'tools/devtools/component',
+            contentPath: 'tools/devtools/component',
+          },
+          {
+            label: 'Profiler',
+            path: 'tools/devtools/profiler',
+            contentPath: 'tools/devtools/profiler',
+          },
+          {
+            label: 'Injectors',
+            path: 'tools/devtools/injectors',
+            contentPath: 'tools/devtools/injectors',
+          },
+          // TODO: create those guides
+          // The signal debugging docs should also be added to the signal section
+          // {
+          //   label: 'Signals',
+          //   path: 'tools/devtools/signals',
+          //   contentPath: 'tools/devtools/signals',
+          // },
+          // {
+          //   label: 'Router',
+          //   path: 'tools/devtools/router',
+          //   contentPath: 'tools/devtools/router',
+          // }
+        ],
+      },
+      {
+        label: 'Language Service',
+        path: 'tools/language-service',
+        contentPath: 'tools/language-service',
+      },
+    ],
+  },
+  {
+    label: 'Best Practices',
+    children: [
+      {
+        label: 'Style Guide',
+        path: 'style-guide',
+        contentPath: 'best-practices/style-guide',
+        status: 'updated',
+      },
+      {
+        label: 'Security',
+        path: 'best-practices/security',
+        contentPath: 'guide/security', // Have not refactored due to build issues
+      },
+      {
+        label: 'Accessibility',
+        path: 'best-practices/a11y',
+        contentPath: 'best-practices/a11y',
+      },
+      {
+        label: 'Unhandled errors in Angular',
+        path: 'best-practices/error-handling',
+        contentPath: 'best-practices/error-handling',
+      },
+      {
+        label: 'Performance',
+        children: [
+          {
+            label: 'Overview',
+            path: 'best-practices/runtime-performance',
+            contentPath: 'best-practices/runtime-performance/overview',
+          },
+          {
+            label: 'Zone pollution',
+            path: 'best-practices/zone-pollution',
+            contentPath: 'best-practices/runtime-performance/zone-pollution',
+          },
+          {
+            label: 'Slow computations',
+            path: 'best-practices/slow-computations',
+            contentPath: 'best-practices/runtime-performance/slow-computations',
+          },
+          {
+            label: 'Skipping component subtrees',
+            path: 'best-practices/skipping-subtrees',
+            contentPath: 'best-practices/runtime-performance/skipping-subtrees',
+          },
+          {
+            label: 'Profiling with the Chrome DevTools',
+            path: 'best-practices/profiling-with-chrome-devtools',
+            contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools',
+          },
+          {label: 'Zoneless', path: 'guide/zoneless', contentPath: 'guide/zoneless'},
+        ],
+      },
+      {
+        label: 'Keeping up-to-date',
+        path: 'update',
+        contentPath: 'best-practices/update',
+      },
+    ],
+  },
+  {
+    label: 'Developer Events',
+    children: [
+      {
+        label: 'Angular v21 Release',
+        path: 'events/v21',
+        contentPath: 'events/v21',
+        status: 'new',
+      },
+    ],
+  },
+  {
+    label: 'Extended Ecosystem',
+    children: [
+      {
+        label: 'NgModules',
+        path: 'guide/ngmodules/overview',
+        contentPath: 'guide/ngmodules/overview',
+      },
+      {
+        label: 'Legacy Animations',
+        children: [
+          {
+            label: 'Overview',
+            path: 'guide/legacy-animations',
+            contentPath: 'guide/animations/overview',
+          },
+          {
+            label: 'Transition and Triggers',
+            path: 'guide/legacy-animations/transition-and-triggers',
+            contentPath: 'guide/animations/transition-and-triggers',
+          },
+          {
+            label: 'Complex Sequences',
+            path: 'guide/legacy-animations/complex-sequences',
+            contentPath: 'guide/animations/complex-sequences',
+          },
+          {
+            label: 'Reusable Animations',
+            path: 'guide/legacy-animations/reusable-animations',
+            contentPath: 'guide/animations/reusable-animations',
+          },
+          {
+            label: 'Migrating to Native CSS Animations',
+            path: 'guide/animations/migration',
+            contentPath: 'guide/animations/migration',
+          },
+        ],
+      },
+      {
+        label: 'Using RxJS with Angular',
+        children: [
+          {
+            label: 'Signals interop',
+            path: 'ecosystem/rxjs-interop',
+            contentPath: 'ecosystem/rxjs-interop/signals-interop',
+          },
+          {
+            label: 'Component output interop',
+            path: 'ecosystem/rxjs-interop/output-interop',
+            contentPath: 'ecosystem/rxjs-interop/output-interop',
+          },
+          {
+            label: 'Unsubscribing with takeUntilDestroyed',
+            path: 'ecosystem/rxjs-interop/take-until-destroyed',
+            contentPath: 'ecosystem/rxjs-interop/take-until-destroyed',
+          },
+        ],
+      },
+      {
+        label: 'Service Workers & PWAs',
+        children: [
+          {
+            label: 'Overview',
+            path: 'ecosystem/service-workers',
+            contentPath: 'ecosystem/service-workers/overview',
+          },
+          {
+            label: 'Getting started',
+            path: 'ecosystem/service-workers/getting-started',
+            contentPath: 'ecosystem/service-workers/getting-started',
+          },
+          {
+            label: 'Custom service worker scripts',
+            path: 'ecosystem/service-workers/custom-service-worker-scripts',
+            contentPath: 'ecosystem/service-workers/custom-service-worker-scripts',
+          },
+          {
+            label: 'Configuration file',
+            path: 'ecosystem/service-workers/config',
+            contentPath: 'ecosystem/service-workers/config',
+          },
+          {
+            label: 'Communicating with the service worker',
+            path: 'ecosystem/service-workers/communications',
+            contentPath: 'ecosystem/service-workers/communications',
+          },
+          {
+            label: 'Push notifications',
+            path: 'ecosystem/service-workers/push-notifications',
+            contentPath: 'ecosystem/service-workers/push-notifications',
+          },
+          {
+            label: 'Service worker devops',
+            path: 'ecosystem/service-workers/devops',
+            contentPath: 'ecosystem/service-workers/devops',
+          },
+          {
+            label: 'App shell pattern',
+            path: 'ecosystem/service-workers/app-shell',
+            contentPath: 'ecosystem/service-workers/app-shell',
+          },
+        ],
+      },
+      {
+        label: 'Web workers',
+        path: 'ecosystem/web-workers',
+        contentPath: 'ecosystem/web-workers',
+      },
+      {
+        label: 'Custom build pipeline',
+        path: 'ecosystem/custom-build-pipeline',
+        contentPath: 'ecosystem/custom-build-pipeline',
+      },
+      {
+        label: 'Tailwind',
+        path: 'guide/tailwind',
+        contentPath: 'guide/tailwind',
+        status: 'new',
+      },
+      {
+        label: 'Angular Fire',
+        path: 'https://github.com/angular/angularfire#readme',
+      },
+      {
+        label: 'Google Maps',
+        path: 'https://github.com/angular/components/tree/main/src/google-maps#readme',
+      },
+      {
+        label: 'Google Pay',
+        path: 'https://github.com/google-pay/google-pay-button#angular',
+      },
+      {
+        label: 'YouTube player',
+        path: 'https://github.com/angular/components/blob/main/src/youtube-player/README.md',
+      },
+      {
+        label: 'Angular CDK',
+        path: 'https://material.angular.dev/cdk/categories',
+      },
+      {
+        label: 'Angular Material',
+        path: 'https://material.angular.dev/',
+      },
+    ],
+  },
+  ...(isDevMode()
+    ? [
+        {
+          label: 'Adev Dev Guide',
+          children: [
+            {
+              label: 'Kitchen Sink',
+              path: 'kitchen-sink',
+              contentPath: 'kitchen-sink',
+            },
+          ],
+        },
+      ]
+    : []),
+];
+
+export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [
+  FIRST_APP_TUTORIAL_NAV_DATA,
+  LEARN_ANGULAR_TUTORIAL_NAV_DATA,
+  DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA,
+  SIGNALS_TUTORIAL_NAV_DATA,
+  SIGNAL_FORMS_TUTORIAL_NAV_DATA,
+  {
+    path: 'tutorials',
+    contentPath: 'tutorials/home',
+    label: 'Tutorials',
+  },
+];
+
+export const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
+  {
+    label: 'Roadmap',
+    path: 'roadmap',
+    contentPath: 'reference/roadmap',
+  },
+  {
+    label: 'Get involved',
+    path: 'https://github.com/angular/angular/blob/main/CONTRIBUTING.md',
+  },
+  {
+    label: 'API Reference',
+    preserveOtherCategoryOrder: true,
+    children: [
+      {
+        label: 'Overview',
+        path: 'api',
+      },
+      ...getApiNavigationItems(),
+    ],
+  },
+  {
+    label: 'CLI Reference',
+    children: [
+      {
+        label: 'Overview',
+        path: 'cli',
+        contentPath: 'reference/cli',
+      },
+      {
+        label: 'ng add',
+        path: 'cli/add',
+      },
+      {
+        label: 'ng analytics',
+        children: [
+          {
+            label: 'Overview',
+            path: 'cli/analytics',
+          },
+          {
+            label: 'disable',
+            path: 'cli/analytics/disable',
+          },
+          {
+            label: 'enable',
+            path: 'cli/analytics/enable',
+          },
+          {
+            label: 'info',
+            path: 'cli/analytics/info',
+          },
+          {
+            label: 'prompt',
+            path: 'cli/analytics/prompt',
+          },
+        ],
+      },
+      {
+        label: 'ng build',
+        path: 'cli/build',
+      },
+      {
+        label: 'ng cache',
+        children: [
+          {
+            label: 'Overview',
+            path: 'cli/cache',
+          },
+          {
+            label: 'clean',
+            path: 'cli/cache/clean',
+          },
+          {
+            label: 'disable',
+            path: 'cli/cache/disable',
+          },
+          {
+            label: 'enable',
+            path: 'cli/cache/enable',
+          },
+          {
+            label: 'info',
+            path: 'cli/cache/info',
+          },
+        ],
+      },
+      {
+        label: 'ng completion',
+        children: [
+          {
+            label: 'Overview',
+            path: 'cli/completion',
+          },
+          {
+            label: 'script',
+            path: 'cli/completion/script',
+          },
+        ],
+      },
+      {
+        label: 'ng config',
+        path: 'cli/config',
+      },
+      {
+        label: 'ng deploy',
+        path: 'cli/deploy',
+      },
+      {
+        label: 'ng e2e',
+        path: 'cli/e2e',
+      },
+      {
+        label: 'ng extract-i18n',
+        path: 'cli/extract-i18n',
+      },
+      {
+        label: 'ng generate',
+        children: [
+          {
+            label: 'Overview',
+            path: 'cli/generate',
+          },
+          {
+            label: 'ai-config',
+            path: 'cli/generate/ai-config',
+          },
+          {
+            label: 'app-shell',
+            path: 'cli/generate/app-shell',
+          },
+          {
+            label: 'application',
+            path: 'cli/generate/application',
+          },
+          {
+            label: 'class',
+            path: 'cli/generate/class',
+          },
+          {
+            label: 'component',
+            path: 'cli/generate/component',
+          },
+          {
+            label: 'config',
+            path: 'cli/generate/config',
+          },
+          {
+            label: 'directive',
+            path: 'cli/generate/directive',
+          },
+          {
+            label: 'enum',
+            path: 'cli/generate/enum',
+          },
+          {
+            label: 'environments',
+            path: 'cli/generate/environments',
+          },
+          {
+            label: 'guard',
+            path: 'cli/generate/guard',
+          },
+          {
+            label: 'interceptor',
+            path: 'cli/generate/interceptor',
+          },
+          {
+            label: 'interface',
+            path: 'cli/generate/interface',
+          },
+          {
+            label: 'library',
+            path: 'cli/generate/library',
+          },
+          {
+            label: 'module',
+            path: 'cli/generate/module',
+          },
+          {
+            label: 'pipe',
+            path: 'cli/generate/pipe',
+          },
+          {
+            label: 'resolver',
+            path: 'cli/generate/resolver',
+          },
+          {
+            label: 'service-worker',
+            path: 'cli/generate/service-worker',
+          },
+          {
+            label: 'service',
+            path: 'cli/generate/service',
+          },
+          {
+            label: 'web-worker',
+            path: 'cli/generate/web-worker',
+          },
+        ],
+      },
+      {
+        label: 'ng lint',
+        path: 'cli/lint',
+      },
+      {
+        label: 'ng new',
+        path: 'cli/new',
+      },
+      {
+        label: 'ng run',
+        path: 'cli/run',
+      },
+      {
+        label: 'ng serve',
+        path: 'cli/serve',
+      },
+      {
+        label: 'ng test',
+        path: 'cli/test',
+      },
+      {
+        label: 'ng update',
+        path: 'cli/update',
+      },
+      {
+        label: 'ng version',
+        path: 'cli/version',
+      },
+    ],
+  },
+  {
+    label: 'Error Encyclopedia',
+    children: [
+      {
+        label: 'Overview',
+        path: 'errors',
+        contentPath: 'reference/errors/overview',
+      },
+      ...ERRORS_NAV_DATA,
+    ],
+  },
+  {
+    label: 'Extended Diagnostics',
+    children: [
+      {
+        label: 'Overview',
+        path: 'extended-diagnostics',
+        contentPath: 'reference/extended-diagnostics/overview',
+      },
+      ...EXT_DIAGNOSTICS_NAV_DATA,
+    ],
+  },
+  {
+    label: 'Versioning and releases',
+    path: 'reference/releases',
+    contentPath: 'reference/releases',
+  },
+  {
+    label: 'Version compatibility',
+    path: 'reference/versions',
+    contentPath: 'reference/versions',
+  },
+  {
+    label: 'Update guide',
+    path: 'update-guide',
+  },
+  {
+    label: 'Configurations',
+    children: [
+      {
+        label: 'File structure',
+        path: 'reference/configs/file-structure',
+        contentPath: 'reference/configs/file-structure',
+      },
+      {
+        label: 'Workspace configuration',
+        path: 'reference/configs/workspace-config',
+        contentPath: 'reference/configs/workspace-config',
+      },
+      {
+        label: 'Angular compiler options',
+        path: 'reference/configs/angular-compiler-options',
+        contentPath: 'reference/configs/angular-compiler-options',
+      },
+      {
+        label: 'npm dependencies',
+        path: 'reference/configs/npm-packages',
+        contentPath: 'reference/configs/npm-packages',
+      },
+    ],
+  },
+  {
+    label: 'Migrations',
+    children: [
+      {
+        label: 'Overview',
+        path: 'reference/migrations',
+        contentPath: 'reference/migrations/overview',
+      },
+      {
+        label: 'Standalone',
+        path: 'reference/migrations/standalone',
+        contentPath: 'reference/migrations/standalone',
+      },
+      {
+        label: 'Control Flow Syntax',
+        path: 'reference/migrations/control-flow',
+        contentPath: 'reference/migrations/control-flow',
+      },
+      {
+        label: 'inject() Function',
+        path: 'reference/migrations/inject-function',
+        contentPath: 'reference/migrations/inject-function',
+      },
+      {
+        label: 'Lazy-loaded routes',
+        path: 'reference/migrations/route-lazy-loading',
+        contentPath: 'reference/migrations/route-lazy-loading',
+      },
+      {
+        label: 'Signal inputs',
+        path: 'reference/migrations/signal-inputs',
+        contentPath: 'reference/migrations/signal-inputs',
+      },
+      {
+        label: 'Outputs',
+        path: 'reference/migrations/outputs',
+        contentPath: 'reference/migrations/outputs',
+      },
+      {
+        label: 'Signal queries',
+        path: 'reference/migrations/signal-queries',
+        contentPath: 'reference/migrations/signal-queries',
+      },
+      {
+        label: 'Clean up unused imports',
+        path: 'reference/migrations/cleanup-unused-imports',
+        contentPath: 'reference/migrations/cleanup-unused-imports',
+      },
+      {
+        label: 'Self-closing tags',
+        path: 'reference/migrations/self-closing-tags',
+        contentPath: 'reference/migrations/self-closing-tags',
+      },
+      {
+        label: 'NgClass to Class',
+        path: 'reference/migrations/ngclass-to-class',
+        contentPath: 'reference/migrations/ngclass-to-class',
+        status: 'new',
+      },
+      {
+        label: 'NgStyle to Style',
+        path: 'reference/migrations/ngstyle-to-style',
+        contentPath: 'reference/migrations/ngstyle-to-style',
+        status: 'new',
+      },
+      {
+        label: 'Router Testing Module Migration',
+        path: 'reference/migrations/router-testing-module-migration',
+        contentPath: 'reference/migrations/router-testing-module-migration',
+        status: 'new',
+      },
+      {
+        label: 'CommonModule to Standalone',
+        path: 'reference/migrations/common-to-standalone',
+        contentPath: 'reference/migrations/common-to-standalone',
+        status: 'new',
+      },
+    ],
+  },
+];
+
+export const FOOTER_NAVIGATION_DATA: NavigationItem[] = [
+  {
+    label: 'Press Kit',
+    path: 'press-kit',
+    contentPath: 'reference/press-kit',
+  },
+  {
+    label: 'License',
+    path: 'license',
+    contentPath: 'reference/license',
+  },
+];
+
+export const ALL_ITEMS = [
+  ...DOCS_SUB_NAVIGATION_DATA,
+  ...REFERENCE_SUB_NAVIGATION_DATA,
+  ...FOOTER_NAVIGATION_DATA,
+  ...TUTORIALS_SUB_NAVIGATION_DATA,
+];
+
+function getApiNavigationItems(): NavigationItem[] {
+  const manifest = API_MANIFEST_JSON as any; // TODO(mri): Use proper type when the refactoring of #66252 gets in.
+
+  const apiNavigationItems: NavigationItem[] = [];
+
+  for (const packageEntry of manifest) {
+    const packageNavigationItem: NavigationItem = {
+      label: packageEntry.moduleLabel,
+      children: packageEntry.entries.map((api: any) => ({
+        path: getApiUrl(packageEntry, api.name),
+        label: api.name,
+        category: api.category,
+      })),
+    };
+
+    apiNavigationItems.push(packageNavigationItem);
+  }
+
+  return apiNavigationItems;
+}
+
+function getApiUrl(packageEntry: any, apiName: string): string {
+  const packageName = packageEntry.normalizedModuleName
+    // packages like `angular_core` should be `core`
+    // packages like `angular_animation_browser` should be `animation/browser`
+    .replace('angular_', '')
+    .replaceAll('_', '/');
+  return `api/${packageName}/${apiName}`;
+}
diff --git a/adev/src/app/routing/redirections.ts b/adev/src/app/routing/redirections.ts
index 19abc66c9300..2bc0a3250ccc 100644
--- a/adev/src/app/routing/redirections.ts
+++ b/adev/src/app/routing/redirections.ts
@@ -95,25 +95,21 @@ export const REDIRECT_ROUTES: Route[] = [
     path: 'guide/signals/inputs',
     redirectTo: '/guide/components/inputs',
   },
-  {
-    path: 'guide/ngmodules',
-    redirectTo: '/guide/ngmodules/overview',
-  },
   {
     path: 'guide/ngmodules/providers',
-    redirectTo: '/guide/ngmodules/overview',
+    redirectTo: '/guide/ngmodules',
   },
   {
     path: 'guide/ngmodules/singleton-services',
-    redirectTo: '/guide/ngmodules/overview',
+    redirectTo: '/guide/ngmodules',
   },
   {
     path: 'guide/ngmodules/lazy-loading',
-    redirectTo: '/guide/ngmodules/overview',
+    redirectTo: '/guide/ngmodules',
   },
   {
     path: 'guide/ngmodules/faq',
-    redirectTo: '/guide/ngmodules/overview',
+    redirectTo: '/guide/ngmodules',
   },
   {
     path: 'guide/components/anatomy-of-components',
diff --git a/adev/src/app/routing/sub-navigation-data.ts b/adev/src/app/routing/sub-navigation-data.ts
index 385d92aea432..43f27a2578a4 100644
--- a/adev/src/app/routing/sub-navigation-data.ts
+++ b/adev/src/app/routing/sub-navigation-data.ts
@@ -6,27 +6,14 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {isDevMode} from '@angular/core';
 import {NavigationItem} from '@angular/docs';
 
-// These imports are expected to be red because they are generated a build time
-// @ts-ignore
-import FIRST_APP_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/first-app/routes.json';
-// @ts-ignore
-import LEARN_ANGULAR_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/learn-angular/routes.json';
-// @ts-ignore
-import DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/deferrable-views/routes.json';
-// @ts-ignore
-import SIGNALS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signals/routes.json';
-// @ts-ignore
-import SIGNAL_FORMS_TUTORIAL_NAV_DATA from '../../../src/assets/tutorials/signal-forms/routes.json';
-// @ts-ignore
-import ERRORS_NAV_DATA from '../../../src/assets/content/reference/errors/routes.json';
-// @ts-ignore
-import EXT_DIAGNOSTICS_NAV_DATA from '../../../src/assets/content/reference/extended-diagnostics/routes.json';
-
-import {DEFAULT_PAGES} from '../core/constants/pages';
-import {getApiNavigationItems} from '../features/references/helpers/manifest.helper';
+import {
+  DOCS_SUB_NAVIGATION_DATA,
+  FOOTER_NAVIGATION_DATA,
+  REFERENCE_SUB_NAVIGATION_DATA,
+  TUTORIALS_SUB_NAVIGATION_DATA,
+} from './navigation-entries';
 
 interface SubNavigationData {
   docs: NavigationItem[];
@@ -35,1637 +22,6 @@ interface SubNavigationData {
   footer: NavigationItem[];
 }
 
-const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
-  {
-    label: 'Introduction',
-    children: [
-      {
-        label: 'What is Angular?',
-        path: 'overview',
-        contentPath: 'introduction/what-is-angular',
-      },
-      {
-        label: 'Installation',
-        path: 'installation',
-        contentPath: 'introduction/installation',
-      },
-      {
-        label: 'Essentials',
-        children: [
-          {
-            label: 'Overview',
-            path: 'essentials',
-            contentPath: 'introduction/essentials/overview',
-          },
-          {
-            label: 'Composition with components',
-            path: 'essentials/components',
-            contentPath: 'introduction/essentials/components',
-          },
-          {
-            label: 'Reactivity with signals',
-            path: 'essentials/signals',
-            contentPath: 'introduction/essentials/signals',
-          },
-          {
-            label: 'Dynamic interfaces with templates',
-            path: 'essentials/templates',
-            contentPath: 'introduction/essentials/templates',
-          },
-          {
-            label: 'Forms with signals',
-            path: 'essentials/signal-forms',
-            contentPath: 'introduction/essentials/signal-forms',
-            status: 'new',
-          },
-          {
-            label: 'Modular design with dependency injection',
-            path: 'essentials/dependency-injection',
-            contentPath: 'introduction/essentials/dependency-injection',
-          },
-          {
-            label: 'Next Steps',
-            path: 'essentials/next-steps',
-            contentPath: 'introduction/essentials/next-steps',
-          },
-        ],
-      },
-      {
-        label: 'Start coding! 🚀',
-        path: 'tutorials/learn-angular',
-      },
-    ],
-  },
-  {
-    label: 'In-depth Guides',
-    children: [
-      {
-        label: 'Signals',
-        status: 'updated',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/signals',
-            contentPath: 'guide/signals/overview',
-          },
-          {
-            label: 'Dependent state with linkedSignal',
-            path: 'guide/signals/linked-signal',
-            contentPath: 'guide/signals/linked-signal',
-          },
-          {
-            label: 'Async reactivity with resources',
-            path: 'guide/signals/resource',
-            contentPath: 'guide/signals/resource',
-          },
-          {
-            label: 'Side effects for non-reactives APIs',
-            path: 'guide/signals/effect',
-            contentPath: 'guide/signals/effect',
-            status: 'new',
-          },
-        ],
-      },
-      {
-        label: 'Components',
-        children: [
-          {
-            label: 'Anatomy of components',
-            path: 'guide/components',
-            contentPath: 'guide/components/anatomy-of-components',
-          },
-          {
-            label: 'Selectors',
-            path: 'guide/components/selectors',
-            contentPath: 'guide/components/selectors',
-          },
-          {
-            label: 'Styling',
-            path: 'guide/components/styling',
-            contentPath: 'guide/components/styling',
-          },
-          {
-            label: 'Accepting data with input properties',
-            path: 'guide/components/inputs',
-            contentPath: 'guide/components/inputs',
-          },
-          {
-            label: 'Custom events with outputs',
-            path: 'guide/components/outputs',
-            contentPath: 'guide/components/outputs',
-          },
-          {
-            label: 'Content projection with ng-content',
-            path: 'guide/components/content-projection',
-            contentPath: 'guide/components/content-projection',
-          },
-          {
-            label: 'Host elements',
-            path: 'guide/components/host-elements',
-            contentPath: 'guide/components/host-elements',
-          },
-          {
-            label: 'Lifecycle',
-            path: 'guide/components/lifecycle',
-            contentPath: 'guide/components/lifecycle',
-          },
-          {
-            label: 'Referencing component children with queries',
-            path: 'guide/components/queries',
-            contentPath: 'guide/components/queries',
-          },
-          {
-            label: 'Using DOM APIs',
-            path: 'guide/components/dom-apis',
-            contentPath: 'guide/components/dom-apis',
-          },
-          {
-            label: 'Inheritance',
-            path: 'guide/components/inheritance',
-            contentPath: 'guide/components/inheritance',
-          },
-          {
-            label: 'Programmatically rendering components',
-            path: 'guide/components/programmatic-rendering',
-            contentPath: 'guide/components/programmatic-rendering',
-          },
-          {
-            label: 'Advanced configuration',
-            path: 'guide/components/advanced-configuration',
-            contentPath: 'guide/components/advanced-configuration',
-          },
-          {
-            label: 'Custom Elements',
-            path: 'guide/elements',
-            contentPath: 'guide/elements',
-          },
-        ],
-      },
-      {
-        label: 'Templates',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/templates',
-            contentPath: 'guide/templates/overview',
-          },
-          {
-            label: 'Binding dynamic text, properties and attributes',
-            path: 'guide/templates/binding',
-            contentPath: 'guide/templates/binding',
-          },
-          {
-            label: 'Adding event listeners',
-            path: 'guide/templates/event-listeners',
-            contentPath: 'guide/templates/event-listeners',
-          },
-          {
-            label: 'Two-way binding',
-            path: 'guide/templates/two-way-binding',
-            contentPath: 'guide/templates/two-way-binding',
-          },
-          {
-            label: 'Control flow',
-            path: 'guide/templates/control-flow',
-            contentPath: 'guide/templates/control-flow',
-          },
-          {
-            label: 'Pipes',
-            path: 'guide/templates/pipes',
-            contentPath: 'guide/templates/pipes',
-          },
-          {
-            label: 'Slotting child content with ng-content',
-            path: 'guide/templates/ng-content',
-            contentPath: 'guide/templates/ng-content',
-          },
-          {
-            label: 'Create template fragments with ng-template',
-            path: 'guide/templates/ng-template',
-            contentPath: 'guide/templates/ng-template',
-          },
-          {
-            label: 'Grouping elements with ng-container',
-            path: 'guide/templates/ng-container',
-            contentPath: 'guide/templates/ng-container',
-          },
-          {
-            label: 'Variables in templates',
-            path: 'guide/templates/variables',
-            contentPath: 'guide/templates/variables',
-          },
-          {
-            label: 'Deferred loading with @defer',
-            path: 'guide/templates/defer',
-            contentPath: 'guide/templates/defer',
-          },
-          {
-            label: 'Expression syntax',
-            path: 'guide/templates/expression-syntax',
-            contentPath: 'guide/templates/expression-syntax',
-          },
-          {
-            label: 'Whitespace in templates',
-            path: 'guide/templates/whitespace',
-            contentPath: 'guide/templates/whitespace',
-          },
-        ],
-      },
-      {
-        label: 'Directives',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/directives',
-            contentPath: 'guide/directives/overview',
-          },
-          {
-            label: 'Attribute directives',
-            path: 'guide/directives/attribute-directives',
-            contentPath: 'guide/directives/attribute-directives',
-          },
-          {
-            label: 'Structural directives',
-            path: 'guide/directives/structural-directives',
-            contentPath: 'guide/directives/structural-directives',
-          },
-          {
-            label: 'Directive composition API',
-            path: 'guide/directives/directive-composition-api',
-            contentPath: 'guide/directives/directive-composition-api',
-          },
-          {
-            label: 'Optimizing images with NgOptimizedImage',
-            path: 'guide/image-optimization',
-            contentPath: 'guide/image-optimization',
-          },
-        ],
-      },
-      {
-        label: 'Dependency Injection',
-        status: 'updated',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/di',
-            contentPath: 'guide/di/overview',
-            status: 'updated',
-          },
-          {
-            label: 'Creating and using services',
-            path: 'guide/di/creating-and-using-services',
-            contentPath: 'guide/di/creating-and-using-services',
-            status: 'updated',
-          },
-          {
-            label: 'Defining dependency providers',
-            path: 'guide/di/defining-dependency-providers',
-            contentPath: 'guide/di/defining-dependency-providers',
-            status: 'updated',
-          },
-          {
-            label: 'Injection context',
-            path: 'guide/di/dependency-injection-context',
-            contentPath: 'guide/di/dependency-injection-context',
-          },
-          {
-            label: 'Hierarchical injectors',
-            path: 'guide/di/hierarchical-dependency-injection',
-            contentPath: 'guide/di/hierarchical-dependency-injection',
-          },
-          {
-            label: 'Optimizing injection tokens',
-            path: 'guide/di/lightweight-injection-tokens',
-            contentPath: 'guide/di/lightweight-injection-tokens',
-          },
-          {
-            label: 'DI in action',
-            path: 'guide/di/di-in-action',
-            contentPath: 'guide/di/di-in-action',
-          },
-        ],
-      },
-      {
-        label: 'Routing',
-        status: 'updated',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/routing',
-            contentPath: 'guide/routing/overview',
-          },
-          {
-            label: 'Define routes',
-            path: 'guide/routing/define-routes',
-            contentPath: 'guide/routing/define-routes',
-          },
-          {
-            label: 'Show routes with Outlets',
-            path: 'guide/routing/show-routes-with-outlets',
-            contentPath: 'guide/routing/show-routes-with-outlets',
-          },
-          {
-            label: 'Navigate to routes',
-            path: 'guide/routing/navigate-to-routes',
-            contentPath: 'guide/routing/navigate-to-routes',
-          },
-          {
-            label: 'Read route state',
-            path: 'guide/routing/read-route-state',
-            contentPath: 'guide/routing/read-route-state',
-          },
-          {
-            label: 'Redirecting routes',
-            path: 'guide/routing/redirecting-routes',
-            contentPath: 'guide/routing/redirecting-routes',
-          },
-          {
-            label: 'Control route access with guards',
-            path: 'guide/routing/route-guards',
-            contentPath: 'guide/routing/route-guards',
-          },
-          {
-            label: 'Route data resolvers',
-            path: 'guide/routing/data-resolvers',
-            contentPath: 'guide/routing/data-resolvers',
-          },
-          {
-            label: 'Lifecycle and events',
-            path: 'guide/routing/lifecycle-and-events',
-            contentPath: 'guide/routing/lifecycle-and-events',
-          },
-          {
-            label: 'Testing routing and navigation',
-            path: 'guide/routing/testing',
-            contentPath: 'guide/routing/testing',
-            status: 'new',
-          },
-          {
-            label: 'Other routing tasks',
-            path: 'guide/routing/common-router-tasks',
-            contentPath: 'guide/routing/common-router-tasks',
-          },
-          {
-            label: 'Creating custom route matches',
-            path: 'guide/routing/routing-with-urlmatcher',
-            contentPath: 'guide/routing/routing-with-urlmatcher',
-          },
-          {
-            label: 'Rendering strategies',
-            path: 'guide/routing/rendering-strategies',
-            contentPath: 'guide/routing/rendering-strategies',
-            status: 'new',
-          },
-          {
-            label: 'Customizing route behavior',
-            path: 'guide/routing/customizing-route-behavior',
-            contentPath: 'guide/routing/customizing-route-behavior',
-            status: 'new',
-          },
-          {
-            label: 'Router reference',
-            path: 'guide/routing/router-reference',
-            contentPath: 'guide/routing/router-reference',
-          },
-          {
-            label: 'Route transition animations',
-            path: 'guide/routing/route-transition-animations',
-            contentPath: 'guide/routing/route-transition-animations',
-          },
-        ],
-      },
-      {
-        label: 'Forms',
-        status: 'updated',
-        preserveOtherCategoryOrder: true,
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/forms',
-            contentPath: 'guide/forms/overview',
-          },
-
-          {
-            label: 'Overview',
-            path: 'guide/forms/signals/overview',
-            contentPath: 'guide/forms/signals/overview',
-            category: 'Signal Forms',
-            status: 'new',
-          },
-          {
-            label: 'Form models',
-            path: 'guide/forms/signals/models',
-            contentPath: 'guide/forms/signals/models',
-            category: 'Signal Forms',
-            status: 'new',
-          },
-          {
-            label: 'Form model design',
-            path: 'guide/forms/signals/model-design',
-            contentPath: 'guide/forms/signals/designing-your-form-model',
-            category: 'Signal Forms',
-            status: 'new',
-          },
-          {
-            label: 'Field state management',
-            path: 'guide/forms/signals/field-state-management',
-            contentPath: 'guide/forms/signals/field-state-management',
-            category: 'Signal Forms',
-            status: 'new',
-          },
-          {
-            label: 'Validation',
-            path: 'guide/forms/signals/validation',
-            contentPath: 'guide/forms/signals/validation',
-            category: 'Signal Forms',
-            status: 'new',
-          },
-          {
-            label: 'Custom controls',
-            path: 'guide/forms/signals/custom-controls',
-            contentPath: 'guide/forms/signals/custom-controls',
-            category: 'Signal Forms',
-            status: 'new',
-          },
-          {
-            label: 'Comparison with other form systems',
-            path: 'guide/forms/signals/comparison',
-            contentPath: 'guide/forms/signals/comparison',
-            category: 'Signal Forms',
-            status: 'new',
-          },
-          {
-            label: 'Migrating from Legacy Forms',
-            path: 'guide/forms/signals/migration',
-            contentPath: 'guide/forms/signals/migration',
-            category: 'Signal Forms',
-            status: 'new',
-          },
-          {
-            label: 'Reactive forms',
-            path: 'guide/forms/reactive-forms',
-            contentPath: 'guide/forms/reactive-forms',
-            category: 'Reactive Forms',
-          },
-          {
-            label: 'Strictly typed reactive forms',
-            path: 'guide/forms/typed-forms',
-            contentPath: 'guide/forms/typed-forms',
-            category: 'Reactive Forms',
-          },
-          {
-            label: 'Template-driven forms',
-            path: 'guide/forms/template-driven-forms',
-            contentPath: 'guide/forms/template-driven-forms',
-            category: 'Template driven Forms',
-          },
-          {
-            label: 'Validate form input',
-            path: 'guide/forms/form-validation',
-            contentPath: 'guide/forms/form-validation',
-            category: 'Reactive Forms',
-          },
-          {
-            label: 'Validate form input',
-            path: 'guide/forms/form-validation',
-            contentPath: 'guide/forms/form-validation',
-            category: 'Template driven Forms',
-          },
-          {
-            label: 'Building dynamic forms',
-            path: 'guide/forms/dynamic-forms',
-            contentPath: 'guide/forms/dynamic-forms',
-            category: 'Reactive Forms',
-          },
-        ],
-      },
-      {
-        label: 'HTTP Client',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/http',
-            contentPath: 'guide/http/overview',
-          },
-          {
-            label: 'Setting up HttpClient',
-            path: 'guide/http/setup',
-            contentPath: 'guide/http/setup',
-          },
-          {
-            label: 'Making requests',
-            path: 'guide/http/making-requests',
-            contentPath: 'guide/http/making-requests',
-          },
-          {
-            label: 'Reactive data fetching with httpResource',
-            path: 'guide/http/http-resource',
-            contentPath: 'guide/http/http-resource',
-          },
-          {
-            label: 'Intercepting requests and responses',
-            path: 'guide/http/interceptors',
-            contentPath: 'guide/http/interceptors',
-          },
-          {
-            label: 'Testing',
-            path: 'guide/http/testing',
-            contentPath: 'guide/http/testing',
-          },
-        ],
-      },
-      {
-        label: 'Server-side & hybrid-rendering',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/performance',
-            contentPath: 'guide/performance/overview',
-          },
-          {
-            label: 'Server-side and hybrid-rendering',
-            path: 'guide/ssr',
-            contentPath: 'guide/ssr',
-          },
-          {
-            label: 'Hydration',
-            path: 'guide/hydration',
-            contentPath: 'guide/hydration',
-          },
-          {
-            label: 'Incremental Hydration',
-            path: 'guide/incremental-hydration',
-            contentPath: 'guide/incremental-hydration',
-          },
-        ],
-      },
-      {
-        label: 'Testing',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/testing',
-            contentPath: 'guide/testing/overview',
-          },
-          {
-            label: 'Basics of testing components',
-            path: 'guide/testing/components-basics',
-            contentPath: 'guide/testing/components-basics',
-          },
-          {
-            label: 'Component testing scenarios',
-            path: 'guide/testing/components-scenarios',
-            contentPath: 'guide/testing/components-scenarios',
-          },
-          {
-            label: 'Testing services',
-            path: 'guide/testing/services',
-            contentPath: 'guide/testing/services',
-          },
-          {
-            label: 'Testing attribute directives',
-            path: 'guide/testing/attribute-directives',
-            contentPath: 'guide/testing/attribute-directives',
-          },
-          {
-            label: 'Testing pipes',
-            path: 'guide/testing/pipes',
-            contentPath: 'guide/testing/pipes',
-          },
-          {
-            label: 'Testing routing and navigation',
-            path: 'guide/routing/testing',
-            contentPath: 'guide/routing/testing',
-            status: 'new',
-          },
-          {
-            label: 'Debugging tests',
-            path: 'guide/testing/debugging',
-            contentPath: 'guide/testing/debugging',
-          },
-          {
-            label: 'Code coverage',
-            path: 'guide/testing/code-coverage',
-            contentPath: 'guide/testing/code-coverage',
-          },
-          {
-            label: 'Testing utility APIs',
-            path: 'guide/testing/utility-apis',
-            contentPath: 'guide/testing/utility-apis',
-          },
-          {
-            label: 'Component harnesses overview',
-            path: 'guide/testing/component-harnesses-overview',
-            contentPath: 'guide/testing/component-harnesses-overview',
-          },
-          {
-            label: 'Using component harnesses in tests',
-            path: 'guide/testing/using-component-harnesses',
-            contentPath: 'guide/testing/using-component-harnesses',
-          },
-          {
-            label: 'Creating harnesses for your components',
-            path: 'guide/testing/creating-component-harnesses',
-            contentPath: 'guide/testing/creating-component-harnesses',
-          },
-          {
-            label: 'Adding harness support for additional testing environments',
-            path: 'guide/testing/component-harnesses-testing-environments',
-            contentPath: 'guide/testing/component-harnesses-testing-environments',
-          },
-          {
-            label: 'Migrating from Karma to Vitest',
-            path: 'guide/testing/migrating-to-vitest',
-            contentPath: 'guide/testing/migrating-to-vitest',
-          },
-          {
-            label: 'Testing with Karma and Jasmine',
-            path: 'guide/testing/karma',
-            contentPath: 'guide/testing/karma',
-          },
-          {
-            label: 'Zone.js Testing Utilities',
-            path: 'guide/testing/zone-js-testing-utilities',
-            contentPath: 'guide/testing/zone-js-testing-utilities',
-          },
-        ],
-      },
-      {
-        label: 'Angular Aria',
-        status: 'new',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/aria/overview',
-            contentPath: 'guide/aria/overview',
-          },
-          {
-            label: 'Accordion',
-            path: 'guide/aria/accordion',
-            contentPath: 'guide/aria/accordion',
-          },
-          {
-            label: 'Autocomplete',
-            path: 'guide/aria/autocomplete',
-            contentPath: 'guide/aria/autocomplete',
-          },
-          {
-            label: 'Combobox',
-            path: 'guide/aria/combobox',
-            contentPath: 'guide/aria/combobox',
-          },
-          {
-            label: 'Grid',
-            path: 'guide/aria/grid',
-            contentPath: 'guide/aria/grid',
-          },
-          {
-            label: 'Listbox',
-            path: 'guide/aria/listbox',
-            contentPath: 'guide/aria/listbox',
-          },
-          {
-            label: 'Menu',
-            path: 'guide/aria/menu',
-            contentPath: 'guide/aria/menu',
-          },
-          {
-            label: 'Menubar',
-            path: 'guide/aria/menubar',
-            contentPath: 'guide/aria/menubar',
-          },
-          {
-            label: 'Multiselect',
-            path: 'guide/aria/multiselect',
-            contentPath: 'guide/aria/multiselect',
-          },
-          {
-            label: 'Select',
-            path: 'guide/aria/select',
-            contentPath: 'guide/aria/select',
-          },
-          {
-            label: 'Tabs',
-            path: 'guide/aria/tabs',
-            contentPath: 'guide/aria/tabs',
-          },
-          {
-            label: 'Toolbar',
-            path: 'guide/aria/toolbar',
-            contentPath: 'guide/aria/toolbar',
-          },
-          {
-            label: 'Tree',
-            path: 'guide/aria/tree',
-            contentPath: 'guide/aria/tree',
-          },
-        ],
-      },
-      {
-        label: 'Internationalization',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/i18n',
-            contentPath: 'guide/i18n/overview',
-          },
-          {
-            label: 'Add the localize package',
-            path: 'guide/i18n/add-package',
-            contentPath: 'guide/i18n/add-package',
-          },
-          {
-            label: 'Refer to locales by ID',
-            path: 'guide/i18n/locale-id',
-            contentPath: 'guide/i18n/locale-id',
-          },
-          {
-            label: 'Format data based on locale',
-            path: 'guide/i18n/format-data-locale',
-            contentPath: 'guide/i18n/format-data-locale',
-          },
-          {
-            label: 'Prepare component for translation',
-            path: 'guide/i18n/prepare',
-            contentPath: 'guide/i18n/prepare',
-          },
-          {
-            label: 'Work with translation files',
-            path: 'guide/i18n/translation-files',
-            contentPath: 'guide/i18n/translation-files',
-          },
-          {
-            label: 'Merge translations into the app',
-            path: 'guide/i18n/merge',
-            contentPath: 'guide/i18n/merge',
-          },
-          {
-            label: 'Deploy multiple locales',
-            path: 'guide/i18n/deploy',
-            contentPath: 'guide/i18n/deploy',
-          },
-          {
-            label: 'Import global variants of the locale data',
-            path: 'guide/i18n/import-global-variants',
-            contentPath: 'guide/i18n/import-global-variants',
-          },
-          {
-            label: 'Manage marked text with custom IDs',
-            path: 'guide/i18n/manage-marked-text',
-            contentPath: 'guide/i18n/manage-marked-text',
-          },
-          {
-            label: 'Example Angular application',
-            path: 'guide/i18n/example',
-            contentPath: 'guide/i18n/example',
-          },
-        ],
-      },
-      {
-        label: 'Animations',
-        status: 'updated',
-        children: [
-          {
-            label: 'Enter and Leave animations',
-            path: 'guide/animations',
-            contentPath: 'guide/animations/enter-and-leave',
-            status: 'new',
-          },
-          {
-            label: 'Complex Animations with CSS',
-            path: 'guide/animations/css',
-            contentPath: 'guide/animations/css',
-          },
-          {
-            label: 'Route transition animations',
-            path: 'guide/routing/route-transition-animations',
-            contentPath: 'guide/routing/route-transition-animations',
-          },
-        ],
-      },
-      {
-        label: 'Drag and drop',
-        path: 'guide/drag-drop',
-        contentPath: 'guide/drag-drop',
-      },
-    ],
-  },
-  {
-    label: 'Build with AI',
-    status: 'new',
-    children: [
-      {
-        label: 'Get Started',
-        path: 'ai',
-        contentPath: 'ai/overview',
-      },
-      {
-        label: 'LLM prompts and AI IDE setup',
-        path: 'ai/develop-with-ai',
-        contentPath: 'ai/develop-with-ai',
-      },
-      {
-        label: 'Design Patterns',
-        path: 'ai/design-patterns',
-        contentPath: 'ai/design-patterns',
-      },
-      {
-        label: 'Angular CLI MCP Server setup',
-        path: 'ai/mcp',
-        contentPath: 'ai/mcp-server-setup',
-      },
-      {
-        label: 'Angular AI Tutor',
-        path: 'ai/ai-tutor',
-        contentPath: 'ai/ai-tutor',
-      },
-    ],
-  },
-  {
-    label: 'Developer Tools',
-    children: [
-      {
-        label: 'Angular CLI',
-        children: [
-          {
-            label: 'Overview',
-            path: 'tools/cli',
-            contentPath: 'tools/cli/overview',
-          },
-          {
-            label: 'Local set-up',
-            path: 'tools/cli/setup-local',
-            contentPath: 'tools/cli/setup-local',
-          },
-          {
-            label: 'Building Angular apps',
-            path: 'tools/cli/build',
-            contentPath: 'tools/cli/build',
-          },
-          {
-            label: 'Serving Angular apps for development',
-            path: 'tools/cli/serve',
-            contentPath: 'tools/cli/serve',
-          },
-          {
-            label: 'Deployment',
-            path: 'tools/cli/deployment',
-            contentPath: 'tools/cli/deployment',
-          },
-          {
-            label: 'End-to-End Testing',
-            path: 'tools/cli/end-to-end',
-            contentPath: 'tools/cli/end-to-end',
-          },
-          {
-            label: 'Migrating to new build system',
-            path: 'tools/cli/build-system-migration',
-            contentPath: 'tools/cli/build-system-migration',
-          },
-          {
-            label: 'Build environments',
-            path: 'tools/cli/environments',
-            contentPath: 'tools/cli/environments',
-          },
-          {
-            label: 'Angular CLI builders',
-            path: 'tools/cli/cli-builder',
-            contentPath: 'tools/cli/cli-builder',
-          },
-          {
-            label: 'Generating code using schematics',
-            path: 'tools/cli/schematics',
-            contentPath: 'tools/cli/schematics',
-          },
-          {
-            label: 'Authoring schematics',
-            path: 'tools/cli/schematics-authoring',
-            contentPath: 'tools/cli/schematics-authoring',
-          },
-          {
-            label: 'Schematics for libraries',
-            path: 'tools/cli/schematics-for-libraries',
-            contentPath: 'tools/cli/schematics-for-libraries',
-          },
-          {
-            label: 'Template type checking',
-            path: 'tools/cli/template-typecheck',
-            contentPath: 'tools/cli/template-typecheck',
-          },
-          {
-            label: 'Ahead-of-time (AOT) compilation',
-            path: 'tools/cli/aot-compiler',
-            contentPath: 'tools/cli/aot-compiler',
-          },
-          {
-            label: 'AOT metadata errors',
-            path: 'tools/cli/aot-metadata-errors',
-            contentPath: 'tools/cli/aot-metadata-errors',
-          },
-        ],
-      },
-      {
-        label: 'Libraries',
-        children: [
-          {
-            label: 'Overview',
-            path: 'tools/libraries',
-            contentPath: 'tools/libraries/overview',
-          },
-          {
-            label: 'Creating Libraries',
-            path: 'tools/libraries/creating-libraries',
-            contentPath: 'tools/libraries/creating-libraries',
-          },
-          {
-            label: 'Using Libraries',
-            path: 'tools/libraries/using-libraries',
-            contentPath: 'tools/libraries/using-libraries',
-          },
-          {
-            label: 'Angular Package Format',
-            path: 'tools/libraries/angular-package-format',
-            contentPath: 'tools/libraries/angular-package-format',
-          },
-        ],
-      },
-      {
-        label: 'DevTools',
-        children: [
-          {
-            label: 'Overview',
-            path: 'tools/devtools',
-            contentPath: 'tools/devtools/overview',
-          },
-          {
-            label: 'Components',
-            path: 'tools/devtools/component',
-            contentPath: 'tools/devtools/component',
-          },
-          {
-            label: 'Profiler',
-            path: 'tools/devtools/profiler',
-            contentPath: 'tools/devtools/profiler',
-          },
-          {
-            label: 'Injectors',
-            path: 'tools/devtools/injectors',
-            contentPath: 'tools/devtools/injectors',
-          },
-          // TODO: create those guides
-          // The signal debugging docs should also be added to the signal section
-          // {
-          //   label: 'Signals',
-          //   path: 'tools/devtools/signals',
-          //   contentPath: 'tools/devtools/signals',
-          // },
-          // {
-          //   label: 'Router',
-          //   path: 'tools/devtools/router',
-          //   contentPath: 'tools/devtools/router',
-          // }
-        ],
-      },
-      {
-        label: 'Language Service',
-        path: 'tools/language-service',
-        contentPath: 'tools/language-service',
-      },
-    ],
-  },
-  {
-    label: 'Best Practices',
-    children: [
-      {
-        label: 'Style Guide',
-        path: 'style-guide',
-        contentPath: 'best-practices/style-guide',
-        status: 'updated',
-      },
-      {
-        label: 'Security',
-        path: 'best-practices/security',
-        contentPath: 'guide/security', // Have not refactored due to build issues
-      },
-      {
-        label: 'Accessibility',
-        path: 'best-practices/a11y',
-        contentPath: 'best-practices/a11y',
-      },
-      {
-        label: 'Unhandled errors in Angular',
-        path: 'best-practices/error-handling',
-        contentPath: 'best-practices/error-handling',
-      },
-      {
-        label: 'Performance',
-        children: [
-          {
-            label: 'Overview',
-            path: 'best-practices/runtime-performance',
-            contentPath: 'best-practices/runtime-performance/overview',
-          },
-          {
-            label: 'Zone pollution',
-            path: 'best-practices/zone-pollution',
-            contentPath: 'best-practices/runtime-performance/zone-pollution',
-          },
-          {
-            label: 'Slow computations',
-            path: 'best-practices/slow-computations',
-            contentPath: 'best-practices/runtime-performance/slow-computations',
-          },
-          {
-            label: 'Skipping component subtrees',
-            path: 'best-practices/skipping-subtrees',
-            contentPath: 'best-practices/runtime-performance/skipping-subtrees',
-          },
-          {
-            label: 'Profiling with the Chrome DevTools',
-            path: 'best-practices/profiling-with-chrome-devtools',
-            contentPath: 'best-practices/runtime-performance/profiling-with-chrome-devtools',
-          },
-          {label: 'Zoneless', path: 'guide/zoneless', contentPath: 'guide/zoneless'},
-        ],
-      },
-      {
-        label: 'Keeping up-to-date',
-        path: 'update',
-        contentPath: 'best-practices/update',
-      },
-    ],
-  },
-  {
-    label: 'Developer Events',
-    children: [
-      {
-        label: 'Angular v21 Release',
-        path: 'events/v21',
-        contentPath: 'events/v21',
-        status: 'new',
-      },
-    ],
-  },
-  {
-    label: 'Extended Ecosystem',
-    children: [
-      {
-        label: 'NgModules',
-        path: 'guide/ngmodules/overview',
-        contentPath: 'guide/ngmodules/overview',
-      },
-      {
-        label: 'Legacy Animations',
-        children: [
-          {
-            label: 'Overview',
-            path: 'guide/legacy-animations',
-            contentPath: 'guide/animations/overview',
-          },
-          {
-            label: 'Transition and Triggers',
-            path: 'guide/legacy-animations/transition-and-triggers',
-            contentPath: 'guide/animations/transition-and-triggers',
-          },
-          {
-            label: 'Complex Sequences',
-            path: 'guide/legacy-animations/complex-sequences',
-            contentPath: 'guide/animations/complex-sequences',
-          },
-          {
-            label: 'Reusable Animations',
-            path: 'guide/legacy-animations/reusable-animations',
-            contentPath: 'guide/animations/reusable-animations',
-          },
-          {
-            label: 'Migrating to Native CSS Animations',
-            path: 'guide/animations/migration',
-            contentPath: 'guide/animations/migration',
-          },
-        ],
-      },
-      {
-        label: 'Using RxJS with Angular',
-        children: [
-          {
-            label: 'Signals interop',
-            path: 'ecosystem/rxjs-interop',
-            contentPath: 'ecosystem/rxjs-interop/signals-interop',
-          },
-          {
-            label: 'Component output interop',
-            path: 'ecosystem/rxjs-interop/output-interop',
-            contentPath: 'ecosystem/rxjs-interop/output-interop',
-          },
-          {
-            label: 'Unsubscribing with takeUntilDestroyed',
-            path: 'ecosystem/rxjs-interop/take-until-destroyed',
-            contentPath: 'ecosystem/rxjs-interop/take-until-destroyed',
-          },
-        ],
-      },
-      {
-        label: 'Service Workers & PWAs',
-        children: [
-          {
-            label: 'Overview',
-            path: 'ecosystem/service-workers',
-            contentPath: 'ecosystem/service-workers/overview',
-          },
-          {
-            label: 'Getting started',
-            path: 'ecosystem/service-workers/getting-started',
-            contentPath: 'ecosystem/service-workers/getting-started',
-          },
-          {
-            label: 'Custom service worker scripts',
-            path: 'ecosystem/service-workers/custom-service-worker-scripts',
-            contentPath: 'ecosystem/service-workers/custom-service-worker-scripts',
-          },
-          {
-            label: 'Configuration file',
-            path: 'ecosystem/service-workers/config',
-            contentPath: 'ecosystem/service-workers/config',
-          },
-          {
-            label: 'Communicating with the service worker',
-            path: 'ecosystem/service-workers/communications',
-            contentPath: 'ecosystem/service-workers/communications',
-          },
-          {
-            label: 'Push notifications',
-            path: 'ecosystem/service-workers/push-notifications',
-            contentPath: 'ecosystem/service-workers/push-notifications',
-          },
-          {
-            label: 'Service worker devops',
-            path: 'ecosystem/service-workers/devops',
-            contentPath: 'ecosystem/service-workers/devops',
-          },
-          {
-            label: 'App shell pattern',
-            path: 'ecosystem/service-workers/app-shell',
-            contentPath: 'ecosystem/service-workers/app-shell',
-          },
-        ],
-      },
-      {
-        label: 'Web workers',
-        path: 'ecosystem/web-workers',
-        contentPath: 'ecosystem/web-workers',
-      },
-      {
-        label: 'Custom build pipeline',
-        path: 'ecosystem/custom-build-pipeline',
-        contentPath: 'ecosystem/custom-build-pipeline',
-      },
-      {
-        label: 'Tailwind',
-        path: 'guide/tailwind',
-        contentPath: 'guide/tailwind',
-        status: 'new',
-      },
-      {
-        label: 'Angular Fire',
-        path: 'https://github.com/angular/angularfire#readme',
-      },
-      {
-        label: 'Google Maps',
-        path: 'https://github.com/angular/components/tree/main/src/google-maps#readme',
-      },
-      {
-        label: 'Google Pay',
-        path: 'https://github.com/google-pay/google-pay-button#angular',
-      },
-      {
-        label: 'YouTube player',
-        path: 'https://github.com/angular/components/blob/main/src/youtube-player/README.md',
-      },
-      {
-        label: 'Angular CDK',
-        path: 'https://material.angular.dev/cdk/categories',
-      },
-      {
-        label: 'Angular Material',
-        path: 'https://material.angular.dev/',
-      },
-    ],
-  },
-  ...(isDevMode()
-    ? [
-        {
-          label: 'Adev Dev Guide',
-          children: [
-            {
-              label: 'Kitchen Sink',
-              path: 'kitchen-sink',
-              contentPath: 'kitchen-sink',
-            },
-          ],
-        },
-      ]
-    : []),
-];
-
-export const TUTORIALS_SUB_NAVIGATION_DATA: NavigationItem[] = [
-  FIRST_APP_TUTORIAL_NAV_DATA,
-  LEARN_ANGULAR_TUTORIAL_NAV_DATA,
-  DEFERRABLE_VIEWS_TUTORIAL_NAV_DATA,
-  SIGNALS_TUTORIAL_NAV_DATA,
-  SIGNAL_FORMS_TUTORIAL_NAV_DATA,
-  {
-    path: DEFAULT_PAGES.TUTORIALS,
-    contentPath: 'tutorials/home',
-    label: 'Tutorials',
-  },
-];
-
-const REFERENCE_SUB_NAVIGATION_DATA: NavigationItem[] = [
-  {
-    label: 'Roadmap',
-    path: 'roadmap',
-    contentPath: 'reference/roadmap',
-  },
-  {
-    label: 'Get involved',
-    path: 'https://github.com/angular/angular/blob/main/CONTRIBUTING.md',
-  },
-  {
-    label: 'API Reference',
-    preserveOtherCategoryOrder: true,
-    children: [
-      {
-        label: 'Overview',
-        path: 'api',
-      },
-      ...getApiNavigationItems(),
-    ],
-  },
-  {
-    label: 'CLI Reference',
-    children: [
-      {
-        label: 'Overview',
-        path: 'cli',
-        contentPath: 'reference/cli',
-      },
-      {
-        label: 'ng add',
-        path: 'cli/add',
-      },
-      {
-        label: 'ng analytics',
-        children: [
-          {
-            label: 'Overview',
-            path: 'cli/analytics',
-          },
-          {
-            label: 'disable',
-            path: 'cli/analytics/disable',
-          },
-          {
-            label: 'enable',
-            path: 'cli/analytics/enable',
-          },
-          {
-            label: 'info',
-            path: 'cli/analytics/info',
-          },
-          {
-            label: 'prompt',
-            path: 'cli/analytics/prompt',
-          },
-        ],
-      },
-      {
-        label: 'ng build',
-        path: 'cli/build',
-      },
-      {
-        label: 'ng cache',
-        children: [
-          {
-            label: 'Overview',
-            path: 'cli/cache',
-          },
-          {
-            label: 'clean',
-            path: 'cli/cache/clean',
-          },
-          {
-            label: 'disable',
-            path: 'cli/cache/disable',
-          },
-          {
-            label: 'enable',
-            path: 'cli/cache/enable',
-          },
-          {
-            label: 'info',
-            path: 'cli/cache/info',
-          },
-        ],
-      },
-      {
-        label: 'ng completion',
-        children: [
-          {
-            label: 'Overview',
-            path: 'cli/completion',
-          },
-          {
-            label: 'script',
-            path: 'cli/completion/script',
-          },
-        ],
-      },
-      {
-        label: 'ng config',
-        path: 'cli/config',
-      },
-      {
-        label: 'ng deploy',
-        path: 'cli/deploy',
-      },
-      {
-        label: 'ng e2e',
-        path: 'cli/e2e',
-      },
-      {
-        label: 'ng extract-i18n',
-        path: 'cli/extract-i18n',
-      },
-      {
-        label: 'ng generate',
-        children: [
-          {
-            label: 'Overview',
-            path: 'cli/generate',
-          },
-          {
-            label: 'ai-config',
-            path: 'cli/generate/ai-config',
-          },
-          {
-            label: 'app-shell',
-            path: 'cli/generate/app-shell',
-          },
-          {
-            label: 'application',
-            path: 'cli/generate/application',
-          },
-          {
-            label: 'class',
-            path: 'cli/generate/class',
-          },
-          {
-            label: 'component',
-            path: 'cli/generate/component',
-          },
-          {
-            label: 'config',
-            path: 'cli/generate/config',
-          },
-          {
-            label: 'directive',
-            path: 'cli/generate/directive',
-          },
-          {
-            label: 'enum',
-            path: 'cli/generate/enum',
-          },
-          {
-            label: 'environments',
-            path: 'cli/generate/environments',
-          },
-          {
-            label: 'guard',
-            path: 'cli/generate/guard',
-          },
-          {
-            label: 'interceptor',
-            path: 'cli/generate/interceptor',
-          },
-          {
-            label: 'interface',
-            path: 'cli/generate/interface',
-          },
-          {
-            label: 'library',
-            path: 'cli/generate/library',
-          },
-          {
-            label: 'module',
-            path: 'cli/generate/module',
-          },
-          {
-            label: 'pipe',
-            path: 'cli/generate/pipe',
-          },
-          {
-            label: 'resolver',
-            path: 'cli/generate/resolver',
-          },
-          {
-            label: 'service-worker',
-            path: 'cli/generate/service-worker',
-          },
-          {
-            label: 'service',
-            path: 'cli/generate/service',
-          },
-          {
-            label: 'web-worker',
-            path: 'cli/generate/web-worker',
-          },
-        ],
-      },
-      {
-        label: 'ng lint',
-        path: 'cli/lint',
-      },
-      {
-        label: 'ng new',
-        path: 'cli/new',
-      },
-      {
-        label: 'ng run',
-        path: 'cli/run',
-      },
-      {
-        label: 'ng serve',
-        path: 'cli/serve',
-      },
-      {
-        label: 'ng test',
-        path: 'cli/test',
-      },
-      {
-        label: 'ng update',
-        path: 'cli/update',
-      },
-      {
-        label: 'ng version',
-        path: 'cli/version',
-      },
-    ],
-  },
-  {
-    label: 'Error Encyclopedia',
-    children: [
-      {
-        label: 'Overview',
-        path: 'errors',
-        contentPath: 'reference/errors/overview',
-      },
-      ...ERRORS_NAV_DATA,
-    ],
-  },
-  {
-    label: 'Extended Diagnostics',
-    children: [
-      {
-        label: 'Overview',
-        path: 'extended-diagnostics',
-        contentPath: 'reference/extended-diagnostics/overview',
-      },
-      ...EXT_DIAGNOSTICS_NAV_DATA,
-    ],
-  },
-  {
-    label: 'Versioning and releases',
-    path: 'reference/releases',
-    contentPath: 'reference/releases',
-  },
-  {
-    label: 'Version compatibility',
-    path: 'reference/versions',
-    contentPath: 'reference/versions',
-  },
-  {
-    label: 'Update guide',
-    path: 'update-guide',
-  },
-  {
-    label: 'Configurations',
-    children: [
-      {
-        label: 'File structure',
-        path: 'reference/configs/file-structure',
-        contentPath: 'reference/configs/file-structure',
-      },
-      {
-        label: 'Workspace configuration',
-        path: 'reference/configs/workspace-config',
-        contentPath: 'reference/configs/workspace-config',
-      },
-      {
-        label: 'Angular compiler options',
-        path: 'reference/configs/angular-compiler-options',
-        contentPath: 'reference/configs/angular-compiler-options',
-      },
-      {
-        label: 'npm dependencies',
-        path: 'reference/configs/npm-packages',
-        contentPath: 'reference/configs/npm-packages',
-      },
-    ],
-  },
-  {
-    label: 'Migrations',
-    children: [
-      {
-        label: 'Overview',
-        path: 'reference/migrations',
-        contentPath: 'reference/migrations/overview',
-      },
-      {
-        label: 'Standalone',
-        path: 'reference/migrations/standalone',
-        contentPath: 'reference/migrations/standalone',
-      },
-      {
-        label: 'Control Flow Syntax',
-        path: 'reference/migrations/control-flow',
-        contentPath: 'reference/migrations/control-flow',
-      },
-      {
-        label: 'inject() Function',
-        path: 'reference/migrations/inject-function',
-        contentPath: 'reference/migrations/inject-function',
-      },
-      {
-        label: 'Lazy-loaded routes',
-        path: 'reference/migrations/route-lazy-loading',
-        contentPath: 'reference/migrations/route-lazy-loading',
-      },
-      {
-        label: 'Signal inputs',
-        path: 'reference/migrations/signal-inputs',
-        contentPath: 'reference/migrations/signal-inputs',
-      },
-      {
-        label: 'Outputs',
-        path: 'reference/migrations/outputs',
-        contentPath: 'reference/migrations/outputs',
-      },
-      {
-        label: 'Signal queries',
-        path: 'reference/migrations/signal-queries',
-        contentPath: 'reference/migrations/signal-queries',
-      },
-      {
-        label: 'Clean up unused imports',
-        path: 'reference/migrations/cleanup-unused-imports',
-        contentPath: 'reference/migrations/cleanup-unused-imports',
-      },
-      {
-        label: 'Self-closing tags',
-        path: 'reference/migrations/self-closing-tags',
-        contentPath: 'reference/migrations/self-closing-tags',
-      },
-      {
-        label: 'NgClass to Class',
-        path: 'reference/migrations/ngclass-to-class',
-        contentPath: 'reference/migrations/ngclass-to-class',
-        status: 'new',
-      },
-      {
-        label: 'NgStyle to Style',
-        path: 'reference/migrations/ngstyle-to-style',
-        contentPath: 'reference/migrations/ngstyle-to-style',
-        status: 'new',
-      },
-      {
-        label: 'Router Testing Module Migration',
-        path: 'reference/migrations/router-testing-module-migration',
-        contentPath: 'reference/migrations/router-testing-module-migration',
-        status: 'new',
-      },
-      {
-        label: 'CommonModule to Standalone',
-        path: 'reference/migrations/common-to-standalone',
-        contentPath: 'reference/migrations/common-to-standalone',
-        status: 'new',
-      },
-    ],
-  },
-];
-
-const FOOTER_NAVIGATION_DATA: NavigationItem[] = [
-  {
-    label: 'Press Kit',
-    path: 'press-kit',
-    contentPath: 'reference/press-kit',
-  },
-  {
-    label: 'License',
-    path: 'license',
-    contentPath: 'reference/license',
-  },
-];
-
 // Docs navigation data structure, it's used to display structure in
 // navigation-list component And build the routing table for content pages.
 export const SUB_NAVIGATION_DATA: SubNavigationData = {
diff --git a/adev/src/content/BUILD.bazel b/adev/src/content/BUILD.bazel
index 92a1848c877e..7b59635d52b1 100644
--- a/adev/src/content/BUILD.bazel
+++ b/adev/src/content/BUILD.bazel
@@ -7,7 +7,6 @@ generate_guides(
         "error.md",
         "kitchen-sink.md",
     ],
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:components.svg",
         "//adev/src/content/examples",
@@ -19,11 +18,15 @@ generate_guides(
 js_library(
     name = "guide_files",
     srcs = [
+        "//adev/src/content/ai:guide_files",
         "//adev/src/content/best-practices:guide_files",
         "//adev/src/content/ecosystem:guide_files",
+        "//adev/src/content/events:guide_files",
         "//adev/src/content/guide:guide_files",
         "//adev/src/content/introduction:guide_files",
         "//adev/src/content/reference:guide_files",
+        "//adev/src/content/tools:guide_files",
+        "//adev/src/content/tutorials:guide_files",
     ] + glob(["**/*.md"]),
     visibility = ["//visibility:public"],
 )
diff --git a/adev/src/content/ai/BUILD.bazel b/adev/src/content/ai/BUILD.bazel
index 0ed43c77fbe5..ee7fe691f65d 100644
--- a/adev/src/content/ai/BUILD.bazel
+++ b/adev/src/content/ai/BUILD.bazel
@@ -1,3 +1,4 @@
+load("//adev/shared-docs:defaults.bzl", "js_library")
 load("//adev/shared-docs:index.bzl", "generate_guides")
 
 generate_guides(
@@ -5,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:what_is_angular.svg",
         "//adev/src/context",
@@ -13,3 +13,9 @@ generate_guides(
     ],
     visibility = ["//adev:__subpackages__"],
 )
+
+js_library(
+    name = "guide_files",
+    srcs = glob(["**/*.md"]),
+    visibility = ["//adev/src/content:__pkg__"],
+)
diff --git a/adev/src/content/best-practices/BUILD.bazel b/adev/src/content/best-practices/BUILD.bazel
index d232e52bd2d4..3703f24d4e74 100644
--- a/adev/src/content/best-practices/BUILD.bazel
+++ b/adev/src/content/best-practices/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:components.svg",
         "//adev/src/content/examples",
@@ -16,6 +15,8 @@ generate_guides(
 
 js_library(
     name = "guide_files",
-    srcs = glob(["**/*.md"]),
+    srcs = [
+        "//adev/src/content/best-practices/runtime-performance:guide_files",
+    ] + glob(["**/*.md"]),
     visibility = ["//adev:__subpackages__"],
 )
diff --git a/adev/src/content/best-practices/error-handling.md b/adev/src/content/best-practices/error-handling.md
index d9cb07d367c9..8f88da54ddc4 100644
--- a/adev/src/content/best-practices/error-handling.md
+++ b/adev/src/content/best-practices/error-handling.md
@@ -52,7 +52,7 @@ Errors that are caught neither by the application code nor by the framework's ap
 
 ### Client-side rendering
 
-Adding [`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners) to the [ApplicationConfig](guide/di/dependency-injection#at-the-application-root-level-using-applicationconfig) adds the `'error'` and `'unhandledrejection'` listeners to the browser window and forwards those errors to `ErrorHandler`. The Angular CLI generates new applications with this provider by default. The Angular team recommends handling these global errors for most applications, either with the framework's built-in listeners or with your own custom listeners. If you provide custom listeners, you can remove `provideBrowserGlobalErrorListeners`.
+Adding [`provideBrowserGlobalErrorListeners()`](/api/core/provideBrowserGlobalErrorListeners) to the [ApplicationConfig](guide/di/defining-dependency-providers#application-bootstrap) adds the `'error'` and `'unhandledrejection'` listeners to the browser window and forwards those errors to `ErrorHandler`. The Angular CLI generates new applications with this provider by default. The Angular team recommends handling these global errors for most applications, either with the framework's built-in listeners or with your own custom listeners. If you provide custom listeners, you can remove `provideBrowserGlobalErrorListeners`.
 
 ### Server-side and hybrid rendering
 
diff --git a/adev/src/content/best-practices/runtime-performance/BUILD.bazel b/adev/src/content/best-practices/runtime-performance/BUILD.bazel
index 116394e9ca7d..896c1b4eaf48 100644
--- a/adev/src/content/best-practices/runtime-performance/BUILD.bazel
+++ b/adev/src/content/best-practices/runtime-performance/BUILD.bazel
@@ -1,3 +1,4 @@
+load("//adev/shared-docs:defaults.bzl", "js_library")
 load("//adev/shared-docs:index.bzl", "generate_guides")
 
 generate_guides(
@@ -5,7 +6,12 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     mermaid_blocks = True,
     visibility = ["//adev:__subpackages__"],
 )
+
+js_library(
+    name = "guide_files",
+    srcs = glob(["**/*.md"]),
+    visibility = ["//adev/src/content/best-practices:__pkg__"],
+)
diff --git a/adev/src/content/best-practices/runtime-performance/slow-computations.md b/adev/src/content/best-practices/runtime-performance/slow-computations.md
index 744080ee3daa..b13506998597 100644
--- a/adev/src/content/best-practices/runtime-performance/slow-computations.md
+++ b/adev/src/content/best-practices/runtime-performance/slow-computations.md
@@ -19,7 +19,7 @@ For example, in the preceding screenshot, the second recorded change detection c
 Here are several techniques to remove slow computations:
 
 - **Optimizing the underlying algorithm**. This is the recommended approach. If you can speed up the algorithm that is causing the problem, you can speed up the entire change detection mechanism.
-- **Caching using pure pipes**. You can move the heavy computation to a pure [pipe](guide/pipes). Angular reevaluates a pure pipe only if it detects that its inputs have changed, compared to the previous time Angular called it.
+- **Caching using pure pipes**. You can move the heavy computation to a pure [pipe](guide/templates/pipes). Angular reevaluates a pure pipe only if it detects that its inputs have changed, compared to the previous time Angular called it.
 - **Using memoization**. [Memoization](https://en.wikipedia.org/wiki/Memoization) is a similar technique to pure pipes, with the difference that pure pipes preserve only the last result from the computation where memoization could store multiple results.
 - **Avoid repaints/reflows in lifecycle hooks**. Certain [operations](https://web.dev/avoid-large-complex-layouts-and-layout-thrashing/) cause the browser to either synchronously recalculate the layout of the page or re-render it. Since reflows and repaints are generally slow, you want to avoid performing them in every change detection cycle.
 
diff --git a/adev/src/content/ecosystem/BUILD.bazel b/adev/src/content/ecosystem/BUILD.bazel
index 7ea156f41ef4..06ff1d1afb6c 100644
--- a/adev/src/content/ecosystem/BUILD.bazel
+++ b/adev/src/content/ecosystem/BUILD.bazel
@@ -6,12 +6,14 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     visibility = ["//adev:__subpackages__"],
 )
 
 js_library(
     name = "guide_files",
-    srcs = ["//adev/src/content/ecosystem/rxjs-interop:guide_files"] + glob(["**/*.md"]),
+    srcs = [
+        "//adev/src/content/ecosystem/rxjs-interop:guide_files",
+        "//adev/src/content/ecosystem/service-workers:guide_files",
+    ] + glob(["**/*.md"]),
     visibility = ["//adev:__subpackages__"],
 )
diff --git a/adev/src/content/ecosystem/rxjs-interop/BUILD.bazel b/adev/src/content/ecosystem/rxjs-interop/BUILD.bazel
index 21fd7e33ee0d..67d73e8c92c4 100644
--- a/adev/src/content/ecosystem/rxjs-interop/BUILD.bazel
+++ b/adev/src/content/ecosystem/rxjs-interop/BUILD.bazel
@@ -4,7 +4,6 @@ load("//adev/shared-docs:index.bzl", "generate_guides")
 generate_guides(
     name = "rxjs-interop",
     srcs = glob(["*.md"]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     visibility = ["//adev:__subpackages__"],
 )
 
diff --git a/adev/src/content/ecosystem/service-workers/BUILD.bazel b/adev/src/content/ecosystem/service-workers/BUILD.bazel
index 2993a28125cc..ce532f312e2f 100644
--- a/adev/src/content/ecosystem/service-workers/BUILD.bazel
+++ b/adev/src/content/ecosystem/service-workers/BUILD.bazel
@@ -1,3 +1,4 @@
+load("//adev/shared-docs:defaults.bzl", "js_library")
 load("//adev/shared-docs:index.bzl", "generate_guides")
 
 generate_guides(
@@ -5,9 +6,14 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/content/examples",
     ],
     visibility = ["//adev:__subpackages__"],
 )
+
+js_library(
+    name = "guide_files",
+    srcs = glob(["**/*.md"]),
+    visibility = ["//adev/src/content/ecosystem:__pkg__"],
+)
diff --git a/adev/src/content/events/BUILD.bazel b/adev/src/content/events/BUILD.bazel
index ce4f96ff5432..d4ffb51e9548 100644
--- a/adev/src/content/events/BUILD.bazel
+++ b/adev/src/content/events/BUILD.bazel
@@ -1,3 +1,4 @@
+load("//adev/shared-docs:defaults.bzl", "js_library")
 load("//adev/shared-docs:index.bzl", "generate_guides")
 
 generate_guides(
@@ -5,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images/v21-event:v21-event-images",
         "//adev/src/assets/others:angular-v21-release.ics",
@@ -13,3 +13,9 @@ generate_guides(
     ],
     visibility = ["//adev:__subpackages__"],
 )
+
+js_library(
+    name = "guide_files",
+    srcs = glob(["**/*.md"]),
+    visibility = ["//adev/src/content:__pkg__"],
+)
diff --git a/adev/src/content/guide/BUILD.bazel b/adev/src/content/guide/BUILD.bazel
index baaba0422f66..be31c881ff05 100644
--- a/adev/src/content/guide/BUILD.bazel
+++ b/adev/src/content/guide/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/content/examples",
     ],
@@ -25,6 +24,7 @@ copy_to_bin(
         "//adev/src/content/guide/forms/signals:guide_files",
         "//adev/src/content/guide/http:guide_files",
         "//adev/src/content/guide/i18n:guide_files",
+        "//adev/src/content/guide/ngmodules:guide_files",
         "//adev/src/content/guide/performance:guide_files",
         "//adev/src/content/guide/routing:guide_files",
         "//adev/src/content/guide/signals:guide_files",
diff --git a/adev/src/content/guide/animations/BUILD.bazel b/adev/src/content/guide/animations/BUILD.bazel
index 64926046863a..49a50ad1c6b8 100644
--- a/adev/src/content/guide/animations/BUILD.bazel
+++ b/adev/src/content/guide/animations/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/content/examples",
     ],
diff --git a/adev/src/content/guide/animations/complex-sequences.md b/adev/src/content/guide/animations/complex-sequences.md
index 2b0aab5cf64c..4070303ceeed 100644
--- a/adev/src/content/guide/animations/complex-sequences.md
+++ b/adev/src/content/guide/animations/complex-sequences.md
@@ -1,6 +1,6 @@
 # Complex animation sequences
 
-IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
+IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](/guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
 
 So far, we've learned simple animations of single HTML elements.
 Angular also lets you animate coordinated sequences, such as an entire grid or list of elements as they enter and leave a page.
diff --git a/adev/src/content/guide/animations/overview.md b/adev/src/content/guide/animations/overview.md
index 9871859ffc1c..ec2ee0d7c0d2 100644
--- a/adev/src/content/guide/animations/overview.md
+++ b/adev/src/content/guide/animations/overview.md
@@ -1,6 +1,6 @@
 # Introduction to Angular animations
 
-IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
+IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
 
 Animation provides the illusion of motion: HTML elements change styling over time.
 Well-designed animations can make your application more fun and straightforward to use, but they aren't just cosmetic.
diff --git a/adev/src/content/guide/animations/reusable-animations.md b/adev/src/content/guide/animations/reusable-animations.md
index c2fee0af08c4..b1519edfe809 100644
--- a/adev/src/content/guide/animations/reusable-animations.md
+++ b/adev/src/content/guide/animations/reusable-animations.md
@@ -1,6 +1,6 @@
 # Reusable animations
 
-IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
+IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
 
 This topic provides some examples of how to create reusable animations.
 
diff --git a/adev/src/content/guide/animations/transition-and-triggers.md b/adev/src/content/guide/animations/transition-and-triggers.md
index dc5b9167e527..1e03b72ed953 100644
--- a/adev/src/content/guide/animations/transition-and-triggers.md
+++ b/adev/src/content/guide/animations/transition-and-triggers.md
@@ -1,6 +1,6 @@
 # Animation transitions and triggers
 
-IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations/enter-and-leave). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
+IMPORTANT: The `@angular/animations` package is now deprecated. The Angular team recommends using native CSS with `animate.enter` and `animate.leave` for animations for all new code. Learn more at the new enter and leave [animation guide](guide/animations). Also see [Migrating away from Angular's Animations package](guide/animations/migration) to learn how you can start migrating to pure CSS animations in your apps.
 
 This guide goes into depth on special transition states such as the `*` wildcard and `void`. It shows how these special states are used for elements entering and leaving a view.
 This section also explores multiple animation triggers, animation callbacks, and sequence-based animation using keyframes.
diff --git a/adev/src/content/guide/aria/BUILD.bazel b/adev/src/content/guide/aria/BUILD.bazel
index 0404e4f11507..2aa462faedde 100644
--- a/adev/src/content/guide/aria/BUILD.bazel
+++ b/adev/src/content/guide/aria/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/content/examples",
     ],
diff --git a/adev/src/content/guide/components/BUILD.bazel b/adev/src/content/guide/components/BUILD.bazel
index 83596c30911d..aee1573dc856 100644
--- a/adev/src/content/guide/components/BUILD.bazel
+++ b/adev/src/content/guide/components/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:components.svg",
     ],
diff --git a/adev/src/content/guide/components/anatomy-of-components.md b/adev/src/content/guide/components/anatomy-of-components.md
index bcc27696bea7..590b0651ccf0 100644
--- a/adev/src/content/guide/components/anatomy-of-components.md
+++ b/adev/src/content/guide/components/anatomy-of-components.md
@@ -70,7 +70,7 @@ import {ProfilePhoto} from './profile-photo';
 export class UserProfile {}
 ```
 
-By default, Angular components are _standalone_, meaning that you can directly add them to the `imports` array of other components. Components created with an earlier version of Angular may instead specify `standalone: false` in their `@Component` decorator. For these components, you instead import the `NgModule` in which the component is defined. See the full [`NgModule` guide](guide/ngmodules) for details.
+By default, Angular components are _standalone_, meaning that you can directly add them to the `imports` array of other components. Components created with an earlier version of Angular may instead specify `standalone: false` in their `@Component` decorator. For these components, you instead import the `NgModule` in which the component is defined. See the full [`NgModule` guide](guide/ngmodules/overview) for details.
 
 Important: In Angular versions before 19.0.0, the `standalone` option defaults to `false`.
 
diff --git a/adev/src/content/guide/components/inputs.md b/adev/src/content/guide/components/inputs.md
index ab2acbe09cce..18f93ed75413 100644
--- a/adev/src/content/guide/components/inputs.md
+++ b/adev/src/content/guide/components/inputs.md
@@ -273,7 +273,7 @@ See [Custom events with outputs](guide/components/outputs) for more details on o
 
 ### Customizing model inputs
 
-You can mark a model input as required or provide an alias in the same way as a [standard input](guide/signals/inputs).
+You can mark a model input as required or provide an alias in the same way as a [standard input](guide/components/inputs).
 
 Model inputs do not support input transforms.
 
diff --git a/adev/src/content/guide/components/selectors.md b/adev/src/content/guide/components/selectors.md
index 8539c7f18c38..a04926ba085b 100644
--- a/adev/src/content/guide/components/selectors.md
+++ b/adev/src/content/guide/components/selectors.md
@@ -140,7 +140,7 @@ without extra work. This is especially valuable for ARIA attributes such as `ari
 Angular does not report errors when it encounters custom attributes that don't match an available
 component. When using components with attribute selectors, consumers may forget to import the
 component or its NgModule, resulting in the component not rendering.
-See [Importing and using components](guide/components/importing) for more information.
+See [Importing and using components](guide/components#imports-in-the-component-decorator) for more information.
 
 Components that define attribute selectors should use lowercase, dash-case attributes. You can
 follow the same prefixing recommendation described above.
diff --git a/adev/src/content/guide/di/BUILD.bazel b/adev/src/content/guide/di/BUILD.bazel
index fd7c2fada68b..ece84845336c 100644
--- a/adev/src/content/guide/di/BUILD.bazel
+++ b/adev/src/content/guide/di/BUILD.bazel
@@ -6,8 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest =
-        "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:dependency_injection.svg",
         "//adev/src/content/examples",
diff --git a/adev/src/content/guide/di/creating-injectable-service.md b/adev/src/content/guide/di/creating-injectable-service.md
index 2ad24db3fbc7..30123b8a65ea 100644
--- a/adev/src/content/guide/di/creating-injectable-service.md
+++ b/adev/src/content/guide/di/creating-injectable-service.md
@@ -155,6 +155,6 @@ In this example, the `getHeroes()` method uses the `Logger` service by logging a
 ## What's next
 
 
-  
-  
+  
+  
 
diff --git a/adev/src/content/guide/di/hierarchical-dependency-injection.md b/adev/src/content/guide/di/hierarchical-dependency-injection.md
index c83aba1dc72d..13a096813884 100644
--- a/adev/src/content/guide/di/hierarchical-dependency-injection.md
+++ b/adev/src/content/guide/di/hierarchical-dependency-injection.md
@@ -106,7 +106,7 @@ All requests forward up to the root injector, whether you configured it with the
 If you configure an app-wide provider in the `ApplicationConfig` of `bootstrapApplication`, it overrides one configured for `root` in the `@Injectable()` metadata.
 You can do this to configure a non-default provider of a service that is shared with multiple applications.
 
-Here is an example of the case where the component router configuration includes a non-default [location strategy](guide/routing#location-strategy) by listing its provider in the `providers` list of the `ApplicationConfig`.
+Here is an example of the case where the component router configuration includes a non-default [location strategy](guide/routing/common-router-tasks#locationstrategy-and-browser-url-styles) by listing its provider in the `providers` list of the `ApplicationConfig`.
 
 ```ts
 providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}];
@@ -1170,5 +1170,5 @@ style RootInjector fill:#BDD7EE,color:#000
 ## More on dependency injection
 
 
-  
+  
 
diff --git a/adev/src/content/guide/di/lightweight-injection-tokens.md b/adev/src/content/guide/di/lightweight-injection-tokens.md
index a4f13143db0a..3949a7a73d3c 100644
--- a/adev/src/content/guide/di/lightweight-injection-tokens.md
+++ b/adev/src/content/guide/di/lightweight-injection-tokens.md
@@ -91,7 +91,7 @@ Although tokens used only as type specifiers are removed when converted to JavaS
 When using `inject(CustomOther)`, `CustomOther` is passed as a value argument.
 The token is now in a value position, which causes the tree-shaker to keep the reference.
 
-HELPFUL: Libraries should use [tree-shakable providers](guide/di/dependency-injection#providing-dependency) for all services, providing dependencies at the root level rather than in components or modules.
+HELPFUL: Libraries should use [tree-shakable providers](guide/di/defining-dependency-providers) for all services, providing dependencies at the root level rather than in components or modules.
 
 ## Using lightweight injection tokens
 
diff --git a/adev/src/content/guide/directives/BUILD.bazel b/adev/src/content/guide/directives/BUILD.bazel
index 24325441f4d9..a16a99e80e88 100644
--- a/adev/src/content/guide/directives/BUILD.bazel
+++ b/adev/src/content/guide/directives/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:directives.svg",
         "//adev/src/content/examples",
diff --git a/adev/src/content/guide/directives/overview.md b/adev/src/content/guide/directives/overview.md
index ed218a3f1cb1..287f986e2813 100644
--- a/adev/src/content/guide/directives/overview.md
+++ b/adev/src/content/guide/directives/overview.md
@@ -32,7 +32,7 @@ HELPFUL: Built-in directives use only public APIs. They do not have special acce
 
 Add or remove multiple CSS classes simultaneously with `ngClass`.
 
-HELPFUL: To add or remove a _single_ class, use [class binding](guide/templates/class-binding) rather than `NgClass`.
+HELPFUL: To add or remove a _single_ class, use [class binding](/guide/templates/binding#css-class-and-style-property-bindings) rather than `NgClass`.
 
 ### Import `NgClass` in the component
 
diff --git a/adev/src/content/guide/forms/BUILD.bazel b/adev/src/content/guide/forms/BUILD.bazel
index 6478ace4e0da..9572e4985edb 100644
--- a/adev/src/content/guide/forms/BUILD.bazel
+++ b/adev/src/content/guide/forms/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:overview.svg",
         "//adev/src/content/examples",
diff --git a/adev/src/content/guide/forms/signals/BUILD.bazel b/adev/src/content/guide/forms/signals/BUILD.bazel
index 10dda7163987..820df5d45c16 100644
--- a/adev/src/content/guide/forms/signals/BUILD.bazel
+++ b/adev/src/content/guide/forms/signals/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:signals.svg",
         "//adev/src/content/examples",
diff --git a/adev/src/content/guide/forms/signals/field-state-management.md b/adev/src/content/guide/forms/signals/field-state-management.md
index 3d5e7579272f..7f0fac41d04a 100644
--- a/adev/src/content/guide/forms/signals/field-state-management.md
+++ b/adev/src/content/guide/forms/signals/field-state-management.md
@@ -47,7 +47,7 @@ In this example, the template checks `registrationForm.email().invalid()` to det
 
 ### Field state signals
 
-The most commonly used signal is `value()`, a [writable signal](guide/forms/signals/models#updating-models) that provides access to the field's current value:
+The most commonly used signal is `value()`, a `WritableSignal` that provides access to the field's current value:
 
 ```ts
 const emailValue = registrationForm.email().value();
diff --git a/adev/src/content/guide/forms/signals/overview.md b/adev/src/content/guide/forms/signals/overview.md
index 9f469de37313..903fb578fbe7 100644
--- a/adev/src/content/guide/forms/signals/overview.md
+++ b/adev/src/content/guide/forms/signals/overview.md
@@ -51,7 +51,7 @@ To learn more about how Signal Forms work, check out the following guides:
 
   
   
-  
+  
   
   
   
diff --git a/adev/src/content/guide/http/BUILD.bazel b/adev/src/content/guide/http/BUILD.bazel
index 7260009c6baa..37a76b6749a0 100644
--- a/adev/src/content/guide/http/BUILD.bazel
+++ b/adev/src/content/guide/http/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     visibility = ["//adev:__subpackages__"],
 )
 
diff --git a/adev/src/content/guide/i18n/BUILD.bazel b/adev/src/content/guide/i18n/BUILD.bazel
index 7ef2eef51c75..8e72afff8bf8 100644
--- a/adev/src/content/guide/i18n/BUILD.bazel
+++ b/adev/src/content/guide/i18n/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/content/examples",
     ],
diff --git a/adev/src/content/guide/incremental-hydration.md b/adev/src/content/guide/incremental-hydration.md
index dab1cb49b85f..7fd2d166aa56 100644
--- a/adev/src/content/guide/incremental-hydration.md
+++ b/adev/src/content/guide/incremental-hydration.md
@@ -31,7 +31,7 @@ Incremental Hydration depends on and enables [event replay](guide/hydration#capt
 
 ## How does incremental hydration work?
 
-Incremental hydration builds on top of full-application [hydration](guide/hydration), [deferrable views](guide/defer), and [event replay](guide/hydration#capturing-and-replaying-events). With incremental hydration, you can add additional triggers to `@defer` blocks that define incremental hydration boundaries. Adding a `hydrate` trigger to a defer block tells Angular that it should load that defer block's dependencies during server-side rendering and render the main template rather than the `@placeholder`. When client-side rendering, the dependencies are still deferred, and the defer block content stays dehydrated until its `hydrate` trigger fires. That trigger tells the defer block to fetch its dependencies and hydrate the content. Any browser events, specifically those that match listeners registered in your component, that are triggered by the user prior to hydration are queued up and replayed once the hydration process is complete.
+Incremental hydration builds on top of full-application [hydration](guide/hydration), [deferrable views](/guide/templates/defer), and [event replay](guide/hydration#capturing-and-replaying-events). With incremental hydration, you can add additional triggers to `@defer` blocks that define incremental hydration boundaries. Adding a `hydrate` trigger to a defer block tells Angular that it should load that defer block's dependencies during server-side rendering and render the main template rather than the `@placeholder`. When client-side rendering, the dependencies are still deferred, and the defer block content stays dehydrated until its `hydrate` trigger fires. That trigger tells the defer block to fetch its dependencies and hydrate the content. Any browser events, specifically those that match listeners registered in your component, that are triggered by the user prior to hydration are queued up and replayed once the hydration process is complete.
 
 ## Controlling hydration of content with triggers
 
diff --git a/adev/src/content/guide/ngmodules/BUILD.bazel b/adev/src/content/guide/ngmodules/BUILD.bazel
index a27b92af5d86..9edd58730755 100644
--- a/adev/src/content/guide/ngmodules/BUILD.bazel
+++ b/adev/src/content/guide/ngmodules/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
     ],
     visibility = ["//adev:__subpackages__"],
diff --git a/adev/src/content/guide/ngmodules/overview.md b/adev/src/content/guide/ngmodules/overview.md
index 76739afcee51..40fa91769d1f 100644
--- a/adev/src/content/guide/ngmodules/overview.md
+++ b/adev/src/content/guide/ngmodules/overview.md
@@ -1,6 +1,6 @@
 # NgModules
 
-IMPORTANT: The Angular team recommends using [standalone components](guide/components/anatomy-of-components#-imports-in-the-component-decorator) instead of `NgModule` for all new code. Use this guide to understand existing code built with `@NgModule`.
+IMPORTANT: The Angular team recommends using [standalone components](guide/components) instead of `NgModule` for all new code. Use this guide to understand existing code built with `@NgModule`.
 
 An NgModule is a class marked by the `@NgModule` decorator. This decorator accepts _metadata_ that tells Angular how to compile component templates and configure dependency injection.
 
diff --git a/adev/src/content/guide/performance/BUILD.bazel b/adev/src/content/guide/performance/BUILD.bazel
index 1366781714a3..26bec5dd8961 100644
--- a/adev/src/content/guide/performance/BUILD.bazel
+++ b/adev/src/content/guide/performance/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:overview.svg",
     ],
diff --git a/adev/src/content/guide/routing/BUILD.bazel b/adev/src/content/guide/routing/BUILD.bazel
index 9622b8a6fc92..904ae8c64233 100644
--- a/adev/src/content/guide/routing/BUILD.bazel
+++ b/adev/src/content/guide/routing/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:routing.svg",
         "//adev/src/content/examples",
diff --git a/adev/src/content/guide/routing/common-router-tasks.md b/adev/src/content/guide/routing/common-router-tasks.md
index 61c29c5ead78..1a08426e1dae 100644
--- a/adev/src/content/guide/routing/common-router-tasks.md
+++ b/adev/src/content/guide/routing/common-router-tasks.md
@@ -62,7 +62,7 @@ If you want to use the parent components route info you will need to set the rou
 
 ## Displaying a 404 page
 
-To display a 404 page, set up a [wildcard route](guide/routing/common-router-tasks#setting-up-wildcard-routes) with the `component` property set to the component you'd like to use for your 404 page as follows:
+To display a 404 page, set up a [wildcard route](guide/routing/define-routes#wildcards) with the `component` property set to the component you'd like to use for your 404 page as follows:
 
 ```ts
 const routes: Routes = [
@@ -184,4 +184,4 @@ The router supports both styles with two `LocationStrategy` providers:
 The `RouterModule.forRoot()` function sets the `LocationStrategy` to the `PathLocationStrategy`, which makes it the default strategy.
 You also have the option of switching to the `HashLocationStrategy` with an override during the bootstrapping process.
 
-HELPFUL: For more information on providers and the bootstrap process, see [Dependency Injection](guide/di/dependency-injection-providers).
+HELPFUL: For more information on providers and the bootstrap process, see [Dependency Injection](guide/di/defining-dependency-providers).
diff --git a/adev/src/content/guide/routing/route-transition-animations.md b/adev/src/content/guide/routing/route-transition-animations.md
index bacb0b8e12ae..dd995f273db9 100644
--- a/adev/src/content/guide/routing/route-transition-animations.md
+++ b/adev/src/content/guide/routing/route-transition-animations.md
@@ -1,6 +1,6 @@
 # Route transition animations
 
-Route transition animations enhance user experience by providing smooth visual transitions when navigating between different views in your Angular application. [Angular Router](/guide/routing/overview) includes built-in support for the browser's View Transitions API, enabling seamless animations between route changes in supported browsers.
+Route transition animations enhance user experience by providing smooth visual transitions when navigating between different views in your Angular application. [Angular Router](/guide/routing) includes built-in support for the browser's View Transitions API, enabling seamless animations between route changes in supported browsers.
 
 HELPFUL: The Router's native View Transitions integration is currently in [developer preview](/reference/releases#developer-preview). Native View Transitions are a relatively new browser feature with limited support across all browsers.
 
@@ -27,7 +27,7 @@ For more details about the browser API, see the [Chrome Explainer](https://devel
 
 Angular Router integrates view transitions into the navigation lifecycle to create seamless route changes. During navigation, the Router:
 
-1. **Completes navigation preparation** - Route matching, [lazy loading](/guide/routing/define-routes#lazily-loaded-components), [guards](/guide/routing/route-guards), and [resolvers](/guide/routing/data-resolvers) execute
+1. **Completes navigation preparation** - Route matching, [lazy loading](/guide/routing/define-routes#lazily-loaded-components-and-routes), [guards](/guide/routing/route-guards), and [resolvers](/guide/routing/data-resolvers) execute
 2. **Initiates the view transition** - Router calls `startViewTransition` when routes are ready for activation
 3. **Updates the DOM** - Router activates new routes and deactivates old ones within the transition callback
 4. **Finalizes the transition** - The transition Promise resolves when Angular completes rendering
@@ -104,7 +104,7 @@ Here's an example that adds a rotation effect to a counter element:
 }
 ```
 
-IMPORTANT: Define view transition animations in your global styles file, not in component styles. Angular's [view encapsulation](/guide/components/styling#view-encapsulation) scopes component styles, which prevents them from targeting the transition pseudo-elements correctly.
+IMPORTANT: Define view transition animations in your global styles file, not in component styles. Angular's [view encapsulation](/guide/components/styling#style-scoping) scopes component styles, which prevents them from targeting the transition pseudo-elements correctly.
 
 [Try the updated “count” example on StackBlitz](https://stackblitz.com/edit/stackblitz-starters-fwn4i7?file=src%2Fmain.ts)
 
diff --git a/adev/src/content/guide/routing/router-reference.md b/adev/src/content/guide/routing/router-reference.md
index 2038c2c4c4ac..86db0c70bd59 100644
--- a/adev/src/content/guide/routing/router-reference.md
+++ b/adev/src/content/guide/routing/router-reference.md
@@ -56,7 +56,7 @@ The in-application URLs can be indistinguishable from server URLs.
 Modern HTML5 browsers were the first to support `pushState` which is why many people refer to these URLs as "HTML5 style" URLs.
 
 HELPFUL: HTML5 style navigation is the router default.
-In the [LocationStrategy and browser URL styles](common-router-tasks#locationstrategy-and-browser-url-styles) section, learn why HTML5 style is preferable, how to adjust its behavior, and how to switch to the older hash \(`#`\) style, if necessary.
+In the [LocationStrategy and browser URL styles](guide/routing/common-router-tasks#locationstrategy-and-browser-url-styles) section, learn why HTML5 style is preferable, how to adjust its behavior, and how to switch to the older hash \(`#`\) style, if necessary.
 
 You must add a [`` element](https://developer.mozilla.org/docs/Web/HTML/Element/base 'base href') to the application's `index.html` for `pushState` routing to work.
 The browser uses the `` value to prefix relative URLs when referencing CSS files, scripts, and images.
diff --git a/adev/src/content/guide/signals/BUILD.bazel b/adev/src/content/guide/signals/BUILD.bazel
index 2ec5d8a9043c..42857642d81b 100644
--- a/adev/src/content/guide/signals/BUILD.bazel
+++ b/adev/src/content/guide/signals/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:signals.svg",
     ],
diff --git a/adev/src/content/guide/templates/BUILD.bazel b/adev/src/content/guide/templates/BUILD.bazel
index 6788c1c96c26..d9b2a3ec45ef 100644
--- a/adev/src/content/guide/templates/BUILD.bazel
+++ b/adev/src/content/guide/templates/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:templates.svg",
     ],
diff --git a/adev/src/content/guide/templates/defer.md b/adev/src/content/guide/templates/defer.md
index 79abd393001d..0a52b22acc4c 100644
--- a/adev/src/content/guide/templates/defer.md
+++ b/adev/src/content/guide/templates/defer.md
@@ -33,7 +33,7 @@ Angular's compiler produces a [dynamic import](https://developer.mozilla.org/en-
 
 ### `@defer`
 
-This is the primary block that defines the section of content that is lazily loaded. It is not rendered initially– deferred content loads and renders once the specified [trigger](/guide/templates/defer#triggers) occurs or the `when` condition is met.
+This is the primary block that defines the section of content that is lazily loaded. It is not rendered initially– deferred content loads and renders once the specified [trigger](#controlling-deferred-content-loading-with-triggers) occurs or the `when` condition is met.
 
 By default, a `@defer` block is triggered when the browser state becomes [idle](/guide/templates/defer#idle).
 
@@ -57,7 +57,7 @@ The `@placeholder` is an optional block that declares what content to show befor
 }
 ```
 
-While optional, certain triggers may require the presence of either a `@placeholder` or a [template reference variable](/guide/templates/variables#template-reference-variables) to function. See the [Triggers](/guide/templates/defer#triggers) section for more details.
+While optional, certain triggers may require the presence of either a `@placeholder` or a [template reference variable](/guide/templates/variables#template-reference-variables) to function. See the [Triggers](#controlling-deferred-content-loading-with-triggers) section for more details.
 
 Angular replaces placeholder content with the main content once loading is complete. You can use any content in the placeholder section including plain HTML, components, directives, and pipes. Keep in mind the _dependencies of the placeholder block are eagerly loaded_.
 
diff --git a/adev/src/content/guide/templates/two-way-binding.md b/adev/src/content/guide/templates/two-way-binding.md
index f102f3dd79d0..c318f21c6741 100644
--- a/adev/src/content/guide/templates/two-way-binding.md
+++ b/adev/src/content/guide/templates/two-way-binding.md
@@ -38,7 +38,7 @@ To use two-way binding with native form controls, you need to:
 
 Once that is set up, Angular will ensure that any updates in the text input will reflect correctly inside of the component state!
 
-Learn more about [`NgModel`](guide/directives#displaying-and-updating-properties-with-ngmodel) in the official docs.
+Learn more about [`NgModel`](/api/forms/NgModel) in the official docs.
 
 ## Two-way binding between components
 
diff --git a/adev/src/content/guide/templates/variables.md b/adev/src/content/guide/templates/variables.md
index 986058179515..b6eb0aca5ac3 100644
--- a/adev/src/content/guide/templates/variables.md
+++ b/adev/src/content/guide/templates/variables.md
@@ -8,7 +8,7 @@ Angular's `@let` syntax allows you to define a local variable and re-use it acro
 
 ### Using `@let`
 
-Use `@let` to declare a variable whose value is based on the result of a template expression. Angular automatically keeps the variable's value up-to-date with the given expression, similar to [bindings](./templates/bindings).
+Use `@let` to declare a variable whose value is based on the result of a template expression. Angular automatically keeps the variable's value up-to-date with the given expression, similar to [bindings](/guide/templates/binding).
 
 ```angular-html
 @let name = user.name;
diff --git a/adev/src/content/guide/testing/BUILD.bazel b/adev/src/content/guide/testing/BUILD.bazel
index e3b37e879145..fdab5e1a62ab 100644
--- a/adev/src/content/guide/testing/BUILD.bazel
+++ b/adev/src/content/guide/testing/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/content/examples",
     ],
diff --git a/adev/src/content/guide/testing/components-scenarios.md b/adev/src/content/guide/testing/components-scenarios.md
index a2699bd4b3d4..0797e9c22fc1 100644
--- a/adev/src/content/guide/testing/components-scenarios.md
+++ b/adev/src/content/guide/testing/components-scenarios.md
@@ -1176,8 +1176,8 @@ Focus on the `overrideComponent` method.
 });
 ```
 
-It takes two arguments: the component type to override (`HeroDetail`) and an override metadata object.
-The [override metadata object](guide/testing/utility-apis#metadata-override-object) is a generic defined as follows:
+It takes two arguments: the component type to override \(`HeroDetail`\) and an override metadata object.
+The [override metadata object](/guide/testing/utility-apis#testbed-class-summary) is a generic defined as follows:
 
 ```ts
 type MetadataOverride = {
diff --git a/adev/src/content/guide/testing/karma.md b/adev/src/content/guide/testing/karma.md
index 7e640a7b6447..95293d793c26 100644
--- a/adev/src/content/guide/testing/karma.md
+++ b/adev/src/content/guide/testing/karma.md
@@ -186,7 +186,7 @@ If your tests aren't working as you expect, you can inspect and debug them in th
 
 To debug an application with the Karma test runner:
 
-1.  Reveal the Karma browser window. See [Set up for testing](guide/testing/overview#set-up-for-testing) if you need help with this step.
+1.  Reveal the Karma browser window. See [Set up for testing](guide/testing#set-up-for-testing) if you need help with this step.
 2.  Click the **DEBUG** button to open a new browser tab and re-run the tests.
 3.  Open the browser's **Developer Tools**. On Windows, press `Ctrl-Shift-I`. On macOS, press `Command-Option-I`.
 4.  Pick the **Sources** section.
diff --git a/adev/src/content/guide/testing/services.md b/adev/src/content/guide/testing/services.md
index 2e7a8c11f4c5..d09cda9a243e 100644
--- a/adev/src/content/guide/testing/services.md
+++ b/adev/src/content/guide/testing/services.md
@@ -47,9 +47,9 @@ As a service _tester_, you must at least think about the first level of service
 ## Angular `TestBed`
 
 The `TestBed` is the most important of the Angular testing utilities.
-The `TestBed` creates a dynamically-constructed Angular _test_ module that emulates an Angular [@NgModule](guide/ngmodules).
+The `TestBed` creates a dynamically-constructed Angular _test_ module that emulates an Angular [@NgModule](guide/ngmodules/overview).
 
-The `TestBed.configureTestingModule()` method takes a metadata object that can have most of the properties of an [@NgModule](guide/ngmodules).
+The `TestBed.configureTestingModule()` method takes a metadata object that can have most of the properties of an [@NgModule](guide/ngmodules/overview).
 
 To test a service, you set the `providers` metadata property with an array of the services that you'll test or mock.
 
diff --git a/adev/src/content/guide/testing/utility-apis.md b/adev/src/content/guide/testing/utility-apis.md
index 6ba33f834ca9..65aae0ebb83f 100644
--- a/adev/src/content/guide/testing/utility-apis.md
+++ b/adev/src/content/guide/testing/utility-apis.md
@@ -111,22 +111,22 @@ From the test root component's `DebugElement` returned by `fixture.debugElement`
 
 Here are the most useful `DebugElement` members for testers, in approximate order of utility:
 
-| Members               | Details                                                                                                                                                                                                                                                                                                                                                                                                |
-| :-------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `nativeElement`       | The corresponding DOM element in the browser                                                                                                                                                                                                                                                                                                                                                           |
-| `query`               | Calling `query(predicate: Predicate)` returns the first `DebugElement` that matches the predicate at any depth in the subtree.                                                                                                                                                                                                                                                           |
-| `queryAll`            | Calling `queryAll(predicate: Predicate)` returns all `DebugElements` that matches the predicate at any depth in subtree.                                                                                                                                                                                                                                                                 |
-| `injector`            | The host dependency injector. For example, the root element's component instance injector.                                                                                                                                                                                                                                                                                                             |
-| `componentInstance`   | The element's own component instance, if it has one.                                                                                                                                                                                                                                                                                                                                                   |
-| `context`             | An object that provides parent context for this element. Often an ancestor component instance that governs this element. 
 When an element is repeated within `@for` block, the context is an `RepeaterContext` whose `$implicit` property is the value of the row instance value. For example, the `hero` in `@for(hero of heroes; ...)`.                                                        |
-| `children`            | The immediate `DebugElement` children. Walk the tree by descending through `children`. `DebugElement` also has `childNodes`, a list of `DebugNode` objects. `DebugElement` derives from `DebugNode` objects and there are often more nodes than elements. Testers can usually ignore plain nodes.                                                                                                      |
-| `parent`              | The `DebugElement` parent. Null if this is the root element.                                                                                                                                                                                                                                                                                                                                           |
-| `name`                | The element tag name, if it is an element.                                                                                                                                                                                                                                                                                                                                                             |
-| `triggerEventHandler` | Triggers the event by its name if there is a corresponding listener in the element's `listeners` collection. The second parameter is the _event object_ expected by the handler. See [triggerEventHandler](guide/testing/components-scenarios#trigger-event-handler). 
 If the event lacks a listener or there's some other problem, consider calling `nativeElement.dispatchEvent(eventObject)`. |
-| `listeners`           | The callbacks attached to the component's `@Output` properties and/or the element's event properties.                                                                                                                                                                                                                                                                                                  |
-| `providerTokens`      | This component's injector lookup tokens. Includes the component itself plus the tokens that the component lists in its `providers` metadata.                                                                                                                                                                                                                                                           |
-| `source`              | Where to find this element in the source component template.                                                                                                                                                                                                                                                                                                                                           |
-| `references`          | Dictionary of objects associated with template local variables \(for example, `#foo`\), keyed by the local variable name.                                                                                                                                                                                                                                                                              |
+| Members               | Details                                                                                                                                                                                                                                                                                                                                         |
+| :-------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `nativeElement`       | The corresponding DOM element in the browser                                                                                                                                                                                                                                                                                                    |
+| `query`               | Calling `query(predicate: Predicate)` returns the first `DebugElement` that matches the predicate at any depth in the subtree.                                                                                                                                                                                                    |
+| `queryAll`            | Calling `queryAll(predicate: Predicate)` returns all `DebugElements` that matches the predicate at any depth in subtree.                                                                                                                                                                                                          |
+| `injector`            | The host dependency injector. For example, the root element's component instance injector.                                                                                                                                                                                                                                                      |
+| `componentInstance`   | The element's own component instance, if it has one.                                                                                                                                                                                                                                                                                            |
+| `context`             | An object that provides parent context for this element. Often an ancestor component instance that governs this element. 
 When an element is repeated within `@for` block, the context is an `RepeaterContext` whose `$implicit` property is the value of the row instance value. For example, the `hero` in `@for(hero of heroes; ...)`. |
+| `children`            | The immediate `DebugElement` children. Walk the tree by descending through `children`. `DebugElement` also has `childNodes`, a list of `DebugNode` objects. `DebugElement` derives from `DebugNode` objects and there are often more nodes than elements. Testers can usually ignore plain nodes.                                               |
+| `parent`              | The `DebugElement` parent. Null if this is the root element.                                                                                                                                                                                                                                                                                    |
+| `name`                | The element tag name, if it is an element.                                                                                                                                                                                                                                                                                                      |
+| `triggerEventHandler` | Triggers the event by its name if there is a corresponding listener in the element's `listeners` collection. The second parameter is the _event object_ expected by the handler. 
 If the event lacks a listener or there's some other problem, consider calling `nativeElement.dispatchEvent(eventObject)`.                               |
+| `listeners`           | The callbacks attached to the component's `@Output` properties and/or the element's event properties.                                                                                                                                                                                                                                           |
+| `providerTokens`      | This component's injector lookup tokens. Includes the component itself plus the tokens that the component lists in its `providers` metadata.                                                                                                                                                                                                    |
+| `source`              | Where to find this element in the source component template.                                                                                                                                                                                                                                                                                    |
+| `references`          | Dictionary of objects associated with template local variables \(for example, `#foo`\), keyed by the local variable name.                                                                                                                                                                                                                       |
 
 The `DebugElement.query(predicate)` and `DebugElement.queryAll(predicate)` methods take a predicate that filters the source element's subtree for matching `DebugElement`.
 
diff --git a/adev/src/content/guide/testing/zone-js-testing-utilities.md b/adev/src/content/guide/testing/zone-js-testing-utilities.md
index d22cae86eee6..ce459dc873e0 100644
--- a/adev/src/content/guide/testing/zone-js-testing-utilities.md
+++ b/adev/src/content/guide/testing/zone-js-testing-utilities.md
@@ -6,10 +6,10 @@ For general Angular testing utilities, including `TestBed` and `ComponentFixture
 
 Here's a summary of Zone.js-specific functions:
 
-| Function               | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| :--------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `waitForAsync`         | Tracks async tasks and completes the tests only once there are no longer any micro or macrotasks remaining in the test zone. See [waitForAsync](guide/testing/components-scenarios#waitForAsync).                                                                                                                                                                                                                                                                                                                                                                                               |
-| `fakeAsync`            | Runs the body of a test \(`it`\) within a special _fakeAsync test zone_, enabling a linear control flow coding style. See [fakeAsync](guide/testing/components-scenarios#fake-async).                                                                                                                                                                                                                                                                                                                                                                                                           |
-| `tick`                 | Simulates the passage of time and the completion of pending asynchronous activities by flushing both _timer_ and _micro-task_ queues within the _fakeAsync test zone_. The curious, dedicated reader might enjoy this lengthy blog post, ["_Tasks, microtasks, queues and schedules_"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules). Accepts an optional argument that moves the virtual clock forward by the specified number of milliseconds, clearing asynchronous activities scheduled within that timeframe. See [tick](guide/testing/components-scenarios#tick). |
-| `discardPeriodicTasks` | Discards any periodic tasks (e.g. `setInterval`) that were created inside the `fakeAsync` Zone.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| `flushMicrotasks`      | When a `fakeAsync()` test ends with pending _micro-tasks_ such as unresolved promises, the test fails with a clear error message. 
 In general, a test should wait for micro-tasks to finish. When pending microtasks are expected, call `flushMicrotasks` to flush the _micro-task_ queue and avoid the error.                                                                                                                                                                                                                                                                            |
+| Function               | Details                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| :--------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `waitForAsync`         | Tracks async tasks and completes the tests only once there are no longer any micro or macrotasks remaining in the test zone.                                                                                                                                                                                                                                                                                                                                                                                                               |
+| `fakeAsync`            | Runs the body of a test \(`it`\) within a special _fakeAsync test zone_, enabling a linear control flow coding style.                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| `tick`                 | Simulates the passage of time and the completion of pending asynchronous activities by flushing both _timer_ and _micro-task_ queues within the _fakeAsync test zone_. The curious, dedicated reader might enjoy this lengthy blog post, ["_Tasks, microtasks, queues and schedules_"](https://jakearchibald.com/2015/tasks-microtasks-queues-and-schedules). Accepts an optional argument that moves the virtual clock forward by the specified number of milliseconds, clearing asynchronous activities scheduled within that timeframe. |
+| `discardPeriodicTasks` | Discards any periodic tasks (e.g. `setInterval`) that were created inside the `fakeAsync` Zone.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `flushMicrotasks`      | When a `fakeAsync()` test ends with pending _micro-tasks_ such as unresolved promises, the test fails with a clear error message. 
 In general, a test should wait for micro-tasks to finish. When pending microtasks are expected, call `flushMicrotasks` to flush the _micro-task_ queue and avoid the error.                                                                                                                                                                                                                       |
diff --git a/adev/src/content/introduction/BUILD.bazel b/adev/src/content/introduction/BUILD.bazel
index 3884defca06c..f09f3aeeee89 100644
--- a/adev/src/content/introduction/BUILD.bazel
+++ b/adev/src/content/introduction/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/icons:cli.svg",
         "//adev/src/assets/icons:components.svg",
diff --git a/adev/src/content/introduction/essentials/BUILD.bazel b/adev/src/content/introduction/essentials/BUILD.bazel
index 92710491604d..98c1d3c0a31c 100644
--- a/adev/src/content/introduction/essentials/BUILD.bazel
+++ b/adev/src/content/introduction/essentials/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:components.svg",
         "//adev/src/assets/images:dependency_injection.svg",
diff --git a/adev/src/content/introduction/essentials/next-steps.md b/adev/src/content/introduction/essentials/next-steps.md
index 2c5c92149efb..fbdbbab606b1 100644
--- a/adev/src/content/introduction/essentials/next-steps.md
+++ b/adev/src/content/introduction/essentials/next-steps.md
@@ -25,7 +25,7 @@ Put these main concepts into practice with our in-browser tutorial or build your
 Here are some in-depth guides you might be interested in reading:
 
 
-  
+  
   
   
 
diff --git a/adev/src/content/reference/BUILD.bazel b/adev/src/content/reference/BUILD.bazel
index d054509f5651..1d33379ff698 100644
--- a/adev/src/content/reference/BUILD.bazel
+++ b/adev/src/content/reference/BUILD.bazel
@@ -6,7 +6,6 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/assets/images:roadmap.svg",
     ],
@@ -15,6 +14,14 @@ generate_guides(
 
 js_library(
     name = "guide_files",
-    srcs = glob(["**/*.md"]),
+    srcs = glob(["**/*.md"]) + [
+        "//adev/src/content/reference/concepts:guide_files",
+        "//adev/src/content/reference/configs:guide_files",
+        "//adev/src/content/reference/errors:guide_files",
+        "//adev/src/content/reference/errors:route-nav-items",
+        "//adev/src/content/reference/extended-diagnostics:guide_files",
+        "//adev/src/content/reference/extended-diagnostics:route-nav-items",
+        "//adev/src/content/reference/migrations:guide_files",
+    ],
     visibility = ["//adev:__subpackages__"],
 )
diff --git a/adev/src/content/reference/concepts/BUILD.bazel b/adev/src/content/reference/concepts/BUILD.bazel
index 1b59222cf0ce..9490bfbb46dd 100644
--- a/adev/src/content/reference/concepts/BUILD.bazel
+++ b/adev/src/content/reference/concepts/BUILD.bazel
@@ -1,3 +1,4 @@
+load("//adev/shared-docs:defaults.bzl", "js_library")
 load("//adev/shared-docs:index.bzl", "generate_guides")
 
 generate_guides(
@@ -5,6 +6,11 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
+    visibility = ["//adev:__subpackages__"],
+)
+
+js_library(
+    name = "guide_files",
+    srcs = glob(["**/*.md"]),
     visibility = ["//adev:__subpackages__"],
 )
diff --git a/adev/src/content/reference/configs/BUILD.bazel b/adev/src/content/reference/configs/BUILD.bazel
index 6121c7470cd1..fdf0b8f97aea 100644
--- a/adev/src/content/reference/configs/BUILD.bazel
+++ b/adev/src/content/reference/configs/BUILD.bazel
@@ -1,3 +1,4 @@
+load("//adev/shared-docs:defaults.bzl", "js_library")
 load("//adev/shared-docs:index.bzl", "generate_guides")
 
 generate_guides(
@@ -5,9 +6,14 @@ generate_guides(
     srcs = glob([
         "*.md",
     ]),
-    api_manifest = "//adev/src/assets:docs_api_manifest",
     data = [
         "//adev/src/content/examples",
     ],
     visibility = ["//adev:__subpackages__"],
 )
+
+js_library(
+    name = "guide_files",
+    srcs = glob(["**/*.md"]),
+    visibility = ["//adev:__subpackages__"],
+)
diff --git a/adev/src/content/reference/configs/angular-compiler-options.md b/adev/src/content/reference/configs/angular-compiler-options.md
index 539383d5cbd4..4fccf7bef1b1 100644
--- a/adev/src/content/reference/configs/angular-compiler-options.md
+++ b/adev/src/content/reference/configs/angular-compiler-options.md
@@ -132,7 +132,7 @@ The `module` field of the library's `package.json` would be `"index.js"` and the
 
 ### `fullTemplateTypeCheck`
 
-When `true`, the recommended value, enables the [binding expression validation](tools/cli/aot-compiler#binding-expression-validation) phase of the template compiler. This phase uses TypeScript to verify binding expressions.
+When `true`, the recommended value, enables the binding expression validation phase of the template compiler. This phase uses TypeScript to verify binding expressions.
 For more information, see [Template type checking](tools/cli/template-typecheck).
 
 Default is `false`, but when you use the Angular CLI command `ng new --strict`, it is set to `true` in the new project's configuration.
@@ -151,7 +151,7 @@ Do this when using factory summaries.
 When `false`, the default, removes blank text nodes from compiled templates, which results in smaller emitted template factory modules.
 Set to `true` to preserve blank text nodes.
 
-HELPFUL: When using hydration, it is recommended that you use `preserveWhitespaces: false`, which is the default value. If you choose to enable preserving whitespaces by adding `preserveWhitespaces: true` to your tsconfig, it is possible you may encounter issues with hydration. This is not yet a fully supported configuration. Ensure this is also consistently set between the server and client tsconfig files. See the [hydration guide](guide/hydration#preserve-whitespaces) for more details.
+HELPFUL: When using hydration, it is recommended that you use `preserveWhitespaces: false`, which is the default value. If you choose to enable preserving whitespaces by adding `preserveWhitespaces: true` to your tsconfig, it is possible you may encounter issues with hydration. This is not yet a fully supported configuration. Ensure this is also consistently set between the server and client tsconfig files. See the [hydration guide](guide/hydration#preserve-whitespaces-configuration) for more details.
 
 ### `skipMetadataEmit`
 
diff --git a/adev/src/content/reference/configs/workspace-config.md b/adev/src/content/reference/configs/workspace-config.md
index 1757ff391dce..53e2156aa3ae 100644
--- a/adev/src/content/reference/configs/workspace-config.md
+++ b/adev/src/content/reference/configs/workspace-config.md
@@ -208,16 +208,16 @@ In this example, if both `staging` and `french` configurations set the output pa
 The configurable options for a default or targeted build generally correspond to the options available for the [`ng build`](cli/build), and [`ng test`](cli/test) commands.
 For details of those options and their possible values, see the [Angular CLI Reference](cli).
 
-| Options properties         | Details                                                                                                                                                                                                                                                                |
-| :------------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `assets`                   | An object containing paths to static assets to serve with the application. The default paths point to the project's `public` directory. See more in the [Assets configuration](#assets-configuration) section.                                                         |
-| `styles`                   | An array of CSS files to add to the global context of the project. Angular CLI supports CSS imports and all major CSS preprocessors. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.                                    |
-| `stylePreprocessorOptions` | An object containing option-value pairs to pass to style preprocessors. See more in the [Styles and scripts configuration](#styles-and-scripts-configuration) section.                                                                                                 |
-| `scripts`                  | An object containing JavaScript files to add to the application. The scripts are loaded exactly as if you had added them in a `

Error

Error

Warning

Warning

Warning

Shipping Details

PLACEHOLDER

Resources

Languages

Community translations

Community translations

{name}

Auto Height Example

Insert Element Example

Open / Close Example

Remove Element Example

Reordering List Example

Stagger Example