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
```

Bắt đầu với việc tái hiện trong src/main.ts và chạy StackBlitz được liên kết hoặc ví dụ đính kèm. Truy vết cách CdkVirtualScrollViewport được inject thông qua các template ngTemplateOutlet và cdkVirtualFor, sau đó xác minh rằng ứng dụng khởi động mà không có NullInjectorError và my-test vẫn báo cáo một viewport.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.