Skip to content

Standalone injectors do not seem to be completely isolated #53369

@simpleman383

Description

@simpleman383

Which @angular/* package(s) are the source of the bug?

core

Is this a regression?

No

Description

Actually, this is more like a Stackoverflow question. But I'd appreciate if someone could help me and shed some light on this topic 😅

Just getting familiar with the concept of standalone components and now I'm a little curious about standalone injectors.

The official documentation says that such injectors are created in order to isolate the providers imported by a standalone component from the rest of an application. Indeed, that sounds right to me - especially in terms of "self-contained components".

However, It seems that different standalone injectors are not fully isolated from each other in some cases (stackblitz).

In the provided example the optional presense of providers at the routing configuration level deeply affects the entire tree of environment injectors.

  1. When you define the "providers" property in the routing config (even if you leave it empty), Angular creates the corresponding EnvironmentInjector for a router scope and the outcome hierarchy has the following shape. As we can see, Standalone[_AppComponent] and Standalone[_ChildComponent] injectors are completely isolated and cannot affect each other.

image
(isolated injectors)

  1. However, if you don't define providers in the routing configuration, the hierarchy looks completely different. Now Standalone[_AppComponent] and Standalone[_ChildComponent] injectors are chained one by one and dependencies from Standalone[_AppComponent] are suddenly available inside the scope of ChildComponent. This looks like quite the opposite thing to what the official documentation initially states.

image
(not isolated injectors)

Is this correct behaviour? And if it was added intentionally - what was supposed to be achieved?

I admit that I may be misunderstanding the concept of standalone injectors. But for me it looks like that some dependencies provided in parent standalone components might unexpectedly leak to its child component injector's scope. Please explain me if I'm wrong 😅

Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/stackblitz-starters-zgv74k

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.0.5
Node: 20.10.0
Package Manager: yarn 1.22.21
OS: darwin arm64

Angular: 17.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.5
@angular-devkit/build-angular   17.0.5
@angular-devkit/core            17.0.5
@angular-devkit/schematics      17.0.5
@schematics/angular             17.0.5
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentarea: routerbugcross-cutting: standaloneIssues related to the NgModule-less world

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions