Skip to content

overlay: support Angular 12 to 19 (Ivy) by detecting which debug APIs exist #386

Closed

Description

@erkamyaman

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:

  1. 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.
  2. 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.
  3. 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.
  4. Peer range. Lower @angular/core and @angular/common in packages/devtools/package.json to the floor that is actually tested.
  5. 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.
  6. Setup. Check that the Vite plugin, initPangularHub and 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 / ɵdir on 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, only ng.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

  1. added
    featureA feature request or a pull request that adds one
    needs triageNot looked at by a maintainer yet
    on Oct 12, 2026
  2. self-assigned this
    on Oct 12, 2026
  3. added a commit that references this issue on Oct 13, 2026
    22c8819
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

featureA feature request or a pull request that adds oneneeds triageNot looked at by a maintainer yet

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions