angular / angular/components

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

Ouverte
#27,358 4 commentaires 1 réaction 0 personnes assignées Voir sur GitHub
area: cdk/scrolling P3
Langage dominant
TypeScript
Étoiles
25k
Forks
6.8k
Merge moyen
1 j 8 h
PR mergées (30 j)
91

Description

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



Imagine a header here











{{ item }}


`,
})
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
```

Guide de contribution

Ouvrir le guide de contribution

Piste de recherche

Commencez par la reproduction dans src/main.ts et exécutez le StackBlitz lié ou l’exemple joint. Suivez la manière dont CdkVirtualScrollViewport est injecté via les templates ngTemplateOutlet et cdkVirtualFor, puis vérifiez que l’application démarre sans le NullInjectorError et que my-test signale toujours un viewport.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Évaluation

Stack technique
angular, typescript
Domaine
frontend
Type d'issue
Bug
Difficulté
4/5
Temps estimé
3-5 jours
Activité
À l'abandon
Clarté
Plutôt claire
Accessibilité débutants
35/100

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.