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

Start with the reproduction in src/main.ts and run the linked StackBlitz or attached example. Trace how CdkVirtualScrollViewport is injected through the ngTemplateOutlet and cdkVirtualFor templates, then verify that the application starts without the NullInjectorError and that my-test still reports a viewport.

Written by the indexing model from the issue text.