This field defaults to `version`, so there's no need to have it when it's exactly the same. This is one less number to bump during release PRs.
PR Close#62351
Use the packaged versions of the packages instead of the local ts_project dependencies to prevent multiple versions of the deps to enter test bundles
PR Close#62413
The serialization of route data does not support cyclic data objects. We sanitize nested route data object by replacing invalid values with a placeholder string.
PR Close#62339
Abstract the injector tree visualizer so it can be used for both the Injector Tree and Router Tree tabs without having to rely on separate identical implementations.
PR Close#62264
1. Fix node coordinates origin – now X and Y represent the exact center of the node
2. Improve links – they now start and end precisely at the nodes' edges
3. Fix node click to zoom/focus/snap (thanks to 1.)
4. Fix vertical orientation links
PR Close#62048
Previously these tests would run automatically when Angular DevTools lived in another repo. These files have continued to live here but have not been running automatically on each PR.
Now, these test files have been revived to run properly with our changes since the repo merge. This is a first step to reviving our e2e testing.
Next steps include writing cypress tests for new features like Injector Graph, Router tree, signals visualizations, etc.
PR Close#61972
Fixes: #61900
Previously in DevTools we would read signal values to display preview values in the UI without safely catching any errors thrown in their evaluations.
Now those signal functions are run in a safe context, their errors are caught and handled in the UI as well as replayed in the console.
PR Close#61911
Errors:
- Attempting to translate SVGs when the tab is not on focus (Regression from #61241)
- Null injector node focus error
Extra:
- Improve scoping of the injector-tree component class members
PR Close#62029
Add overrides for the default background colors of some the Material components currently in use by Devtools. Most likely a regression by a recent Material version bump.
PR Close#61969
Commit 3e70d64 introduced cdk version 20.0.0-rc2 which introduced a change to how the cdk virtual scroll sets some internal state.
Previously in DevTools we were using a computed incorrectly to respond to changes in the directive forest and apply them to the underlying datasource. With the change to the CDK shown above, this incorrect usage caused us to attempt to update underlying signals in the virtual scroll directive while within a computed callback, throwing an error.
This commit corrects our usage by swapping from a computed to an effect, allowing the underlying signals in the scroll directive to be updated without error.
PR Close#61812
On clicking a route in the router tree, the route details panel is displayed.
- The panel shows the details of the selected route, including the path, component, providers, guards etc.
- Clicking on a chip will navigate to the corresponding source file in the editor.
- Clicking on the path will navigate to the corresponding route in the router tree.
Demo Application Source: https://github.com/sumitarora/angular-routes-demo
Demo Application Deployed: https://sumitarora.github.io/angular-routes-demo/#/
PR Close#59999
This commit adds the support for defer block in the Angular DevTools.
@defer block are now visible in the directive tree and give access to defer & hydration details.
This feature also brings support of incrementation hydration.
PR Close#60629
- Highlight only the matched part of the text
- Select the first match by default
- Show the matches count along with the currently selected one
- Minor UI fixes and performance optimizations
PR Close#60672
`ng.getDirectiveMetadata` receives the component instance, not the raw DOM element.
This assumes that `ng.getComponent` is implemented in all environments and that the root element itself is a component.
PR Close#60991
Currently, highlighting works only when a directive explorer node is hovered. The change enables this feature on node selection as well.
PR Close#60744
Previously the `frameUrl` option in `chrome.devtools.inspectedWindow.eval` would throw errors when used in Firefox, preventing inspect source functionality for firefox users even if they don't need to target a particular frame on the page (they are on the top level frame with Angular DevTools).
Now this behaviour is as follows:
Firefox user that has the top level frame selected -> DevTools inspect functionality works as expected.
Firefox user that has a non-top level frame selected -> DevTools now renders a snackbar message informing the user of the limitation.
PR Close#60430
This updates the DevTools protocol to send Wiz/ACX metadata in addition to Angular metadata. Fortunately we don't need to worry about backwards compatibility here (`framework` is required for example), but the design roughly mirrors `DirectiveDebugMetadata` in `@angular/core`.
Beyond that, this is mostly plumbing through an extra data slice in the form of `props` provided by Wiz. An earlier version implemented `events` as their own slice as well, but was removed as there is currently no generic way to disambiguate events from any other form of callback passed in as a prop. Instead, event callbacks are visualized as functions under the "Props" category.
Working with `DirectiveMetadata` as a union is unfortunately a bit annoying since it requires casting to more specific `{Angular,Acx,Wiz}DirectiveMetadata` types for TS to allow property access, even when the properties are optional anyways.
This commit is mostly for adding Wiz, but does add a bit of ACX functionality which is not fully tested.
PR Close#60475
This type was incorrect, as only components have `encapsulation` and `onPush` values. `ng.getDirectiveMetadata` does not return these properties for directive inputs.
Unfortunately the `| Partial<AngularComponentDebugMetadata>` is necessary to reference these properties or else TypeScript will reject their usage.
PR Close#60475
This allows `ng.getDirectiveMetadata` to be implemented by Wiz and ACX with subtly different shapes to match the nuances of those frameworks.
Existing usage of `{Component,Directive}DebugMetadata` was moved over to `Angular{Component,Directive}DebugMetadata` as appropriate, since the implementation of `ng` in `@angular/core` is specific to Angular. Only the types support Wiz and ACX.
I opted to merge `ComponentDebugMetadata` and `DirectiveDebugMetadata` into a single type of all the frameworks including both components and directives (recall that components extend directives). The reasoning for this is because Wiz does not support directives (you can kind of think of "Wiz Directive" as an abstract class extended by "Wiz Components"). I felt that a `DirectiveDebugMetadata` containing only Angular and ACX types would be a bit of a trap and lead to bugs when used. It's safer to just have the single type containing all the possible results from `ng.getDirectiveMetadata`.
I also chose to leave the `ng` type as is internally, since `@angular/core` implements a specific concrete version of it narrowed to Angular types. Separately I defined an expanded `FrameworkAgnosticGlobalUtils` which redefines `ng.getDirectiveMetadata` to include Wiz and ACX. We want this type to exist in the Angular GitHub repo so it can be referenced as a common primitive across all three frameworks. This is sufficient for now, however longer term we will likely want to actually manually define the function types in this framework-agnostic interface and make Angular's version properly implement it rather than extend and overwrite Angular's type.
PR Close#60475
