Repository: angular
Issue: Service provided in Wrapped Component but can´t be resolved, if wrappercomponent is used in template
Labels: area: core,core: di,P3

### Which @angular/* package(s) are the source of the bug?

common

### Is this a regression?

No

### Description

In principal the Bug can be described the easiest in the following way:
The minimal reproduction of the bug contains of 3 components:

- **HostParentComponent:** Does not provide a flowerservice. In its template is the HostComponent and the content is forwarded to the content of the HostComponent via `<ng-content></ng-content>`. Template = `<app-host><ng-content></ng-content></app-host>`

- **HostComponent:** Provides the flowerservice. In its template the emoji property of the service is shown and the ng-content is displayed afterwards. Template = `<p>Flower emoji: {{flower.emoji}}</p><ng-content></ng-content>`
- **HostChildComponent**: Does not provide a flowerservice, but tries to resolve the provided flowerservice and displays the emoji in the template. Template = `<p>Flower emoji: {{flower ? flower.emoji : 'not resolvable as service is null !!!'}}</p>`


Now the following two cases pointed out:
1.) Use of the HostParentComponent with the HostChildComponent as Content:
Template:
`<app-host-parent>
    <app-host-child>
    </app-host-child>
</app-host-parent>`
Expected behaviour: As app-host-parent includes the HostComponent in its template, which provides the flowerservice, also the HostChildComponent should have access to this service.
Actual behaviour: The HostChildComponent can´t resolve the service !

2.) Use of the HostComponent with the HostChildComponent as Content:
Template: 
`<app-host>
  <app-host-child></app-host-child>
</app-host>`
Expected = Actual bahaviour: As the HostComponent provides the flowerservice, also the HostChildComponent has access to this instance of the service.

![image](https://user-images.githubusercontent.com/54977949/128180117-6b740476-9e08-4fbb-915e-d8f98d438989.png)

The attached figure illustrates the behavior just described.



### Please provide a link to a minimal reproduction of the bug

https://stackblitz.com/edit/angular-omarrt?file=src/app/host-child/host-child.component.ts

### Please provide the exception or error you saw

```true
ERROR
Error: R3InjectorError(AppModule)[FlowerService -> FlowerService -> FlowerService]:
NullInjectorError: No provider for FlowerService!

Unhandled Promise rejection:
R3InjectorError(AppModule)[FlowerService -> FlowerService -> FlowerService]:
NullInjectorError: No provider for FlowerService!
; Zone:
<root>
; Task:
Promise.then
; Value:
Error: R3InjectorError(AppModule)[FlowerService -> FlowerService -> FlowerService]:
NullInjectorError: No provider for FlowerService!
NullInjectorError: R3InjectorError(AppModule)[FlowerService -> FlowerService -> FlowerService]:
NullInjectorError: No provider for FlowerService!
at NullInjector.get (https://angular-omarrt.stackblitz.io/turbo_modules/@angular/core@12.0.5/__ivy_ngcc__/bundles/core.umd.js:11586:29)
at R3Injector.get (https://angular-omarrt.stackblitz.io/turbo_modules/@angular/core@12.0.5/__ivy_ngcc__/bundles/core.umd.js:11758:37)
at R3Injector.get (https://angular-omarrt.stackblitz.io/turbo_modules/@angular/core@12.0.5/__ivy_ngcc__/bundles/core.umd.js:11758:37)
at R3Injector.get (https://angular-omarrt.stackblitz.io/turbo_modules/@angular/core@12.0.5/__ivy_ngcc__/bundles/core.umd.js:11758:37)
at NgModuleRef$1.get (https://angular-omarrt.stackblitz.io/turbo_modules/@angular/core@12.0.5/__ivy_ngcc__/bundles/core.umd.js:26035:37)
at Object.get (https://angular-omarrt.stackblitz.io/turbo_modules/@angular/core@12.0.5/__ivy_ngcc__/bundles/core.umd.js:25736:39)
at lookupTokenUsingModuleInjector (https://angular-omarrt.stackblitz.io/turbo_modules/@angular/core@12.0.5/__ivy_ngcc__/bundles/core.umd.js:3628:43)
at getOrCreateInjectable (https://angular-omarrt.stackblitz.io/turbo_modules/@angular/core@12.0.5/__ivy_ngcc__/bundles/core.umd.js:3741:16)
at Object.ɵɵdirectiveInject (https://angular-omarrt.stackblitz.io/turbo_modules/@angular/core@12.0.5/__ivy_ngcc__/bundles/core.umd.js:15255:16)
at NodeInjectorFactory.HostChildComponent_Factory [as factory] (https://angular-omarrt.stackblitz.io/~/src/app/host-child/host-child.component.ts:16:108)
```


### Please provide the environment you discovered this bug in

```true
package.json:

{
  "name": "ollxxdjmryo.angular",
  "version": "0.0.0",
  "private": true,
  "dependencies": {
    "rxjs": "6.6.7",
    "tslib": "2.3.0",
    "zone.js": "0.11.4",
    "jasmine-core": "3.7.1",
    "@angular/core": "12.0.5",
    "@angular/forms": "12.0.5",
    "@angular/common": "12.0.5",
    "@angular/router": "12.0.5",
    "@angular/compiler": "12.0.5",
    "@angular/animations": "12.0.5",
    "@angular/platform-browser": "12.0.5",
    "angular-in-memory-web-api": "0.11.0",
    "@angular/platform-browser-dynamic": "12.0.5"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1100.4",
    "@angular/cli": "~11.0.4",
    "@angular/compiler-cli": "~11.0.4",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}
```


### Anything else?

In the link for the minimal reproduction of the Bug, the error has been avoided as an `@Optional` has been written for the serviceinjection. To show the error again, just remove the `@Optional` in the HostChildComponent.