Add support for `@defer`-only blocks (previously, they weren't rendered in the component tree at all); Fix declared blocks section in the details
PR Close#66546
Convert the signal graph to a Devtools-FE-specific signal graph that supports clusters; Add support for `resource` clusters; Introduce some improvements to the signal graph viz
Previously there is no feedback when clicking this button in Angular DevTools itself, which can produce some confusion if the user does not have the browser console open as well, or if they accidentally turned on some filtering in the browser console.
Now Angular Devtools uses mat snack bar to inform the user that the task was successful
Each tree-visualizer render cycle resets the snapped node in an effort to not end up with a non-existent snapped node. However, each render cycle doesn't constitute a completely different tree. This change retains the snapped node as long as it exists in the tree.
Introduce an equality function for transformed injector trees in order to omit redundant D3 tree visualization render cycles when the tree hasn't been changed.
Do not call `getSupportedApis` in a prod app since it throws an error due to the absence of `ng`, which prevents the FE from getting the `ngAvailability` message and, respectively, the proper info screen that DevTools cannot be used on a prod app.
Convert the `TreeVisualizer` to a signal, in the `TreeVisualizerComponent`, to ensure that the router tree render effect is always called; Use explicit `afterNextRender` phases.
Show the signal graph button only when a signal-graph-eligible node from the directive explorer is selected; Fix client app error when a `defer` node is selected (related)
- Removed unused code and imports
- Migrated to signal-based input() APIs
- Added readonly to Angular-initialized inputs and removed explicit type annotations
- Updated templates to use self-closing tags for consistency
Refactors the logic that disables the action button for lazy-loaded routes.
Now relies on the isLazy property from the route data instead of string comparisons on the component field.
From my investigation what I know for sure:
- when the graph pans or zooms it updates the transform property on the g element, which in turn causes the browser to repaint the visible space in the g element
- stroke-dasharray is the cause of major performance issues in large graphs.
What I suspect:
- When the g element repaints, it also has to repaint all of the child svg elements. When the dashed line path svgs repaint, the stroke-dasharray calculation is not GPU accelerated, but instead occurs on the CPU, causing extreme lag whenever the svg graph is panned or zoomed.
Temporary solution: remove this dashed edge functionality. We can investigate alternatives for communicated that a path is lazy loaded.
Future long term solution: migrate to canvas based graph renderer for router tree and injector graph.
PR Close#64532
Improves user experience by displaying UI notifications when attempting to view source for unsupported routes, replacing developer-only console warnings with visible snackbars
PR Close#64458
