bug(CdkVirtualScrollViewport): Using cdkVirtualFor in a template does not find CdkVirtualScrollViewport

### Is this a regression?

- [ ] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

I want to create a component that does support virtual scrolling but can be turned off.
To do so, I want to use some ng-templates so I do not have to redefine things like headers, item template, etc.

The code for that (minimalistic, without turn on/off virtual scrolling) looks like:

```ts
import { Component, Directive, inject, Injector, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';
import {
CdkVirtualScrollViewport,
ScrollingModule,
} from '@angular/cdk/scrolling';

@Component({
selector: 'my-test',
template: `I have a viewport? {{ !!cdkVirtualScrollViewport }}`,
})
export class MyTest {
cdkVirtualScrollViewport = inject(CdkVirtualScrollViewport);
}

@Directive({
selector: '[myProvider]',
exportAs: 'myProvider',
})
export class MyProvider {
private readonly myInjector = inject(Injector);
@Input() myProvider!: CdkVirtualScrollViewport;

get injector(): Injector {
return Injector.create({
parent: this.myInjector,
providers: [
{
provide: CdkVirtualScrollViewport,
useValue: this.myProvider,
},
],
});
}
}

@Component({
selector: 'my-app',
template: `
Woop

`,
})
export class AppComponent {
data = ['hello', 'world'];
}
```

As you can see, I have

1. AppComponent: Defines all the templates and the virtual scrolling.
2. MyProvider: A directive to create a new injector containing the existing CdkVirtualScrollViewport
3. MyTest: a simple test component to see if injection works as it should

### Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-sjp7es?file=src%2Fmain.ts

I've also attached a Zip-File with a working sample, because for whatever reason the StackBlitz does not load the DevServer sometimes, maybe they have a hiccup.

Steps to reproduce:
1. Either download the example or open the stackblitz link
2. You will see an error when starting the app, that there is no provider for CdkVirtualScrollViewport
3. If you comment out the `ng-container` containing the `cdkVirtualFor` you will see, that `my-test` components outputs true, because it has an injector containing a CdkVirtualScrollViewport

[Example.zip](https://github.com/angular/components/files/11855930/Example.zip)

### Expected Behavior

I would expect it to work and CdkVirtualFor actually sees the CdkVirtualScrollViewport, because it is in the Injector, as `my-test` component reports.

### Actual Behavior

Error pops up with:

```
[CdkVirtualScrollViewport -> CdkVirtualScrollViewport -> CdkVirtualScrollViewport -> CdkVirtualScrollViewport]:
NullInjectorError: No provider for CdkVirtualScrollViewport!
```

### Environment

```
Angular CLI: 16.1.1
Node: 18.16.0
Package Manager: npm 9.5.1
OS: darwin arm64

Angular: 16.1.2
... animations, cdk, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1601.1
@angular-devkit/build-angular 16.1.1
@angular-devkit/core 16.1.1
@angular-devkit/schematics 16.1.1
@angular/cli 16.1.1
@schematics/angular 16.1.1
rxjs 7.8.1
typescript 5.1.3
```

src/main.ts で再現を開始し、リンク先の StackBlitz または添付された例を実行します。CdkVirtualScrollViewport が ngTemplateOutlet および cdkVirtualFor テンプレートを通じてどのように注入されるかを追跡し、アプリケーションが NullInjectorError なしで起動すること、そして my-test が引き続き viewport を報告することを確認します。

索引モデルが issue の本文から書いたものです。