The problem
Angular Native (by @ashley-hunter) runs Angular components as real iOS and Android views on React Native's Fabric renderer. There is no DOM and no WebView, so the browser overlay can't see the app, and its docs currently say Angular DevTools does not attach on a device. That leaves no way to inspect components, signals or DI in an Angular Native app.
What you'd like to see
An overlay for Angular Native, built the same way as the NativeScript one in #16:
- A
HostTree over Angular Native's nodes (roots, children, parent, tag, selector), so the component, signal, injector and NgRx collectors run unchanged.
- An entry point such as
@santoshyadavdev/ng-devtools/overlay-angular-native that reports to the devtools server over a WebSocket, with reconnection.
- Highlight that outlines the native view.
- An example app under
examples/angular-native, and a setup section in the docs.
Angular Native should need fewer workarounds than NativeScript:
- It bootstraps through
ɵcreateOrReusePlatformInjector, which calls publishDefaultGlobalUtils() in dev mode, so ng.getComponent and the rest should be on globalThis.
- React Native defines
window, so Angular should set up the injector profiler on its own.
WebSocket is built into React Native, so no plugin is needed.
These still need checking on a device, along with whether Metro bundles the overlay as published.
Angular APIs involved
ng.getComponent, ng.getDirectives, ng.getInjector and the injector profiler, the same as #16. The work builds on #16's HostTree refactor.
Docs impact
Setup or options
Contributing
The problem
Angular Native (by @ashley-hunter) runs Angular components as real iOS and Android views on React Native's Fabric renderer. There is no DOM and no WebView, so the browser overlay can't see the app, and its docs currently say Angular DevTools does not attach on a device. That leaves no way to inspect components, signals or DI in an Angular Native app.
What you'd like to see
An overlay for Angular Native, built the same way as the NativeScript one in #16:
HostTreeover Angular Native's nodes (roots, children, parent, tag, selector), so the component, signal, injector and NgRx collectors run unchanged.@santoshyadavdev/ng-devtools/overlay-angular-nativethat reports to the devtools server over a WebSocket, with reconnection.examples/angular-native, and a setup section in the docs.Angular Native should need fewer workarounds than NativeScript:
ɵcreateOrReusePlatformInjector, which callspublishDefaultGlobalUtils()in dev mode, song.getComponentand the rest should be onglobalThis.window, so Angular should set up the injector profiler on its own.WebSocketis built into React Native, so no plugin is needed.These still need checking on a device, along with whether Metro bundles the overlay as published.
Angular APIs involved
ng.getComponent,ng.getDirectives,ng.getInjectorand the injector profiler, the same as #16. The work builds on #16'sHostTreerefactor.Docs impact
Setup or options
Contributing