angular elements components can't inherit dependencies

[fr0]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Having a component inject a service via @Component({providers: [...], ...}) doesn't trickle down to child elements, if the elements are instantiated as web-components via Angular Elements.

Expected behavior

Elements created via Angular Elements should inherit the provided dependencies.

Minimal reproduction of the problem with instructions

Full repo: https://github.com/fr0/angular-elements-test

Summary:

FooComponent is registered with Angular Elements as custom-foo.
BarComponent is registered with Angular Elements as custom-bar.

FooComponent provides a service, ContextProvider. BarComponent needs this service.

The components are instantiated dynamically via web-components in the following manner:

<custom-foo>
  <custom-bar></custom-bar>
</custom-foo>

However, this doesn't work. At runtime, you get an error:

Uncaught Error: StaticInjectorError(AppModule)[BarComponent -> ContextProvider]: 
  StaticInjectorError(Platform: core)[BarComponent -> ContextProvider]: 
    NullInjectorError: No provider for ContextProvider!

What is the motivation / use case for changing the behavior?

I'm using Angular Elements as a way to get dynamic component generation. Having Element Injectors work in this environment is essential for this use case.

Environment

Angular version: 6.0.7


Browser:
- [x] Chrome (desktop) version 67.0.3396.87 (Official Build) (64-bit)
 

[robwormald]

This is works as intended (or more accurately, this is not possible with Elements) - Elements will share the NgModule injector, but they will not share injectors hierarchically (effectively, each element is a completely isolated island, and it's parent is the NgModule injector (or whatever injector you pass into createCustomElement)

you could implement a custom strategy (see: https://github.com/angular/angular/blob/master/packages/elements/src/element-strategy.ts#L27-L44) -that walked up the DOM to grab the parent element/injector before constructing the child component, but in general you should avoid depending on hierarchical DI for Elements.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}