Repository navigation
overlay: support Angular 12 to 19 (Ivy) by detecting which debug APIs exist #386
Description
The problem
The package declares @angular/core >=20 as a peer dependency, so apps on Angular 12 to 19 can't use Pangular Inspector at all. Many production apps are still on those versions, and that is often where people most need a debugging tool, for example during a migration. Every one of those versions runs on Ivy, so most of what the collectors read is already there.
What you'd like to see
The overlay should work on any Ivy version of Angular, starting at 12, which is also the floor of Google's own Angular DevTools. Each inspector should show the data its Angular version provides. When the API it needs doesn't exist, the inspector should show a clear "not available on Angular X" state instead of failing or showing empty data.
Rough plan:
- Inventory. For every Angular API the collectors read, record the first version that ships it, and check that its shape and behaviour stay the same up to 22.
- Feature detection. Put each API behind a capability check in the overlay, and send the capabilities to the panel with the page data so each view can say why it has no data.
- Panel and agent tools. Add an unavailable state for each inspector and its agent tools. Tools should return a clear "unsupported on this Angular version" result, not an error or an empty list.
- Peer range. Lower
@angular/coreand@angular/commoninpackages/devtools/package.jsonto the floor that is actually tested. - CI. Run the page-side tests or a smoke app against a few versions, for example 12, 15, 17 and 19, so the declared range is really tested. See Router detection fails on Angular 20.0 to 20.3.4, and CI never tests the declared peer range #100, where the declared range was never run in CI.
- Setup. Check that the Vite plugin,
initPangularHuband the standalone CLI work with the builders older versions use (webpack-based@angular-devkit/build-angular, older Node). Where a path can't work, document the extension or the standalone CLI as the way in.
Angular APIs involved
Public debug APIs. These should exist on all Ivy versions, but each one still needs checking:
ng.getComponent,ng.getDirectives,ng.getHostElement,ng.getInjector,ng.applyChanges__ngContext__, andɵcmp/ɵdiron component and directive types
Newer private hooks. These are expected to be missing on older versions, and the first version for each still needs to be found:
| API | Used by | Likely result on older versions |
|---|---|---|
ɵgetSignalGraph, SIGNAL |
signal-graph.ts, signal peeks |
Signals inspector unavailable. Signals themselves only exist from 16. |
ɵgetDeferBlocks |
defer-blocks.ts |
@defer view hidden. @defer only exists from 17. |
ɵgetControlFlowBlocks |
for-blocks.ts, rpc/for-blocks-tools.ts |
@for diagnostics hidden. |
ɵgetInjectorProviders, ɵgetInjectorResolutionPath, ɵgetInjectorMetadata, ɵgetDependenciesFromInjectable |
injector-tree.ts |
Injector tree reduced to what ng.getInjector gives, or unavailable. |
ɵgetRouterInstance |
router.ts, router-setup.ts, rpc/router-config-tools.ts |
Fall back to finding Router through the root injector. |
ɵsetProfiler, ng.enableProfiling |
change-detection.ts |
Change detection profiler unavailable, or limited. |
Other files that reference ɵ APIs and need the same check: devframe.ts, ngrx-collector.ts, forms-webmcp.ts, ssr-navigation.ts, analog-runtime.ts, rpc/component-tools.ts, types.ts.
Out of scope
- View Engine (Angular 2 to 8, and opt-out apps up to 11). It has no
ng.getComponent-style APIs, onlyng.probe, so it would need a second set of collectors. - AngularJS 1.x.
Docs impact
- Setup or options: the supported Angular range in the getting-started and setup pages.
- Each inspector page: what it shows on older versions.
Activity
feat(overlay): detect Angular features at runtime and explain what ol…
feat(overlay): support Angular 12.2 and later (pangular-inspector#394)