Компиляция Angular AOT завершается неудачно из-за 'Не удается создать запрос для свойства ..'

Question

Я пытаюсь динамически заполнить таблицу пользовательскими компонентами, которые прекрасно работают с JIT-компиляцией, но выдает ошибку при использовании AOT.

Я также пытался использовать forwardRef на декораторе ViewChildren (), но, похоже, это не дает никакого эффекта. Я предполагаю, что служба, используемая для выбора определенных элементов DOM, в данный момент недоступна.

Какие-нибудь подсказки или предложения?

Ошибка:

> ./node_modules/.bin/ng serve --aot

ERROR in : Can't construct a query for the property "cellList" 
of "ListComponent in example-angular-app/dist/table/table.d.ts" 
since the query selector wasn't defined.

Код:

export class ListComponent implements OnInit, AfterViewChecked, OnDestroy {
    isAlive = true;

    @ViewChildren(CellContainerDirective, { read: ViewContainerRef }) cellList: QueryList<ViewContainerRef>;

    config: Config;
    isLoading: boolean;

    constructor(
        private componentFactoryResolver: ComponentFactoryResolver,
        private cdRef: ChangeDetectorRef
    ) { }

    ngAfterViewChecked() {
        this.cdRef.detectChanges();

        this.cellList.changes
            .pipe(takeWhile(() => this.isAlive))
            .subscribe((list) => {
                list.forEach((cellContainer: ViewContainerRef, index: number) => {
                    cellContainer.clear();

                    const columnIndex = index % this.config.columns.length;

                    const componentFactory = this.componentFactoryResolver
                        .resolveComponentFactory(this.config.columns[columnIndex].cellComponentType);

                    const componentRef = cellContainer
                        .createComponent(componentFactory);

                    const component = <ICellComponent>componentRef.instance;

                    Object.assign(component, {
                        data: this.list.results[columnIndex],
                        column: this.config.columns[columnIndex]
                    });
                });
            });
    }
}

Шаблон:

    <tbody *ngIf="list?.total > 0">
        <ng-container *ngFor="let item of list.results;">
            <tr>
                <td *ngFor="let col of config.columns;">
                    <ng-container cell-container></ng-container>
                </td>
            </tr>
        </ng-container>

        <ng-template #whenEmpty>
            <tr class="empty">
                {{ config?.texts?.table.noData | async }}
            </tr>
        </ng-template>
    </tbody>

Answer 1

Исправлена ​​ошибка, вместо использования директивы cell-container, я создал пользовательский компонент для работы в качестве контейнера и непосредственно выбрал указанный компонент с помощью @ViewChildren(ContainerComponent) вместо @ViewChildren(CellContainerDirective)