AOT - Угловая 6 - Директива SomeComponent, Ожидаемые 0 аргументов, но получила 1. для самодельного компонента - программирование
Подтвердить что ты не робот

AOT - Угловая 6 - Директива SomeComponent, Ожидаемые 0 аргументов, но получила 1. для самодельного компонента

Я сталкиваюсь с проблемой, когда хочу скомпилировать свой текущий проект в AOT со следующей версией пакета:

мою конфигурацию webpack и tsconfig.json можно найти здесь

Я столкнулся с некоторой проблемой, связанной с private/protected областью, используемой в шаблоне, и некоторым параметром извлечения, передаваемым некоторым функциям, которые на самом деле в этом не нуждаются (например, $ event, которые не используются в EventBinding)

Теперь у меня есть следующий список, где я не могу найти, где моя проблема:

/path/to/app/header/main-header/main-header.component.html(85,7):: директива TableOfContentComponent, ожидается 0 аргументов, но получено 1. (1,1):: директива TableOfContentComponent, ожидается 0 аргументов, но получил 1.

мой файл main-header.component.html содержит://main-header.component.html

// main-header.component.ts
@ViewChildren('headerItems') public headerItems: QueryList<HeaderItemAbstract>;
mainMenuStates = {
    hamburger: false,
    bookmarks: false,
    search: false,
    toc: false,
    medias: false,
    article: false,
    language: false    
};

И мой TableOfContentComponent не содержит никакого свойства @Input.

@Component({
    selector: 'ps-table-of-content-template',
    templateUrl: './table-of-content.component.html',
    animations: [slideUpAndDownAnimation]
})
export class TableOfContentComponent extends HeaderItemAbstract implements OnInit {

    toc: TableOfContentModel[];

    devices: DevicesModel;

    tocContentHeight: number;
    tocContentMargin: number;
    menuHeight: string;


    constructor(private tableOfContentService: TableOfContentService,
                private deviceService: DeviceService,
                private elemRef: ElementRef) {
        super();
        this.toc = this.tableOfContentService.tableOfContent;
    }
}

/path/to/app/header/main-header/hamburger-menu/hamburger-menu.component.html(125,5):: директива SliderComponent, ожидается 0 аргументов, но получено 1. (1,1):: директива SliderComponent, ожидал 0 аргументов, но получил 1.

мой hamburger-menu.component.html близок к представленному выше коду:

<ps-slider-component [template]="slidable" [countItems]="associatedDocuments.length">
    <ng-template #slidable>
        <ul class="clearfix">
            <li class="ps-hmt-associated-item-wrapper pull-left slider-item"
                *ngFor="let document of associatedDocuments">
                <a href="{{ document.link }}" target="_blank" class="btn-nostyle">
                    <div class="ps-hmt-image">
                        <img src="{{ document.images.thumbnail }}" alt="">
                    </div>
                    <p class="ps-hmt-title slider-text"
                        [matTooltip]="isArticleView ? null : document.title"
                        [matTooltipPosition]="'above'"
                        [matTooltipClass]="['ps-mat-tooltip', 'ps-mat-tooltip-doc']"
                    >
                        {{ document.title }}
                    </p>
                </a>
            </li>
        </ul>
    </ng-template>
</ps-slider-component>
// On ts side
associatedDocuments: Array<AssociatedDocumentModel>;
@ViewChild('slidable') slidable: ElementRef;

И мой SliderComponent выглядит так:

export class SliderComponent extends UnsubscribeHelper implements OnInit, OnChanges {

    @Input() template: ElementRef;
    @Input() countItems: number;
    @Input() resetSlide ?: null;
    @Input() fixedHeight?: null;
    @Input() isVariableWidth?: null;
    @Input() isBookmarks?: null;
    @Input() hasSkeleton?: boolean = false;

/path/to/app/header/main-header/medias/dialogs/image-dialog.component.html(34,5):: директива CarouselComponent, ожидается 0 аргументов, но получено 1. (1,1):: директива CarouselComponent, ожидал 0 аргументов, но получил 1.

Очень близко к предыдущему, я думаю, что проблема та же.

/path/to/app/document/page/page.component.html(7,9):: Directive InfinityPageScrollComponent, ожидается 0 аргументов, но получено 1. (1,1):: Directive InfinityPageScrollComponent, ожидается 0 аргументов, но получено 1.

Здесь у нас нет никаких входных данных для InfinityPageScrollComponent и тег вызывается как этот <ps-infinity-page-scroll></ps-infinity-page-scroll>

Я точно, когда я отключаю AOT в моем веб-пакете, все работает как шарм.

Я пытаюсь найти решение по AoT Do и Donts, но безрезультатно.

Я также заметил, что если я отключаю fullTemplateTypeCheck я сталкиваюсь с около 18 000 ошибок с некоторыми неявными любыми типами и более странным, неопределенным свойством для моей службы, объявленной в конструкторе.

--- РЕДАКТИРОВАТЬ 1: Предоставить код для абстрактного класса: UnsubscribeHelper ---

export abstract class HeaderItemAbstract extends UnsubscribeHelper implements AfterViewInit {
    public toggleItem: string = 'out';
    public ANIMATION_DURATION = slideUpAndDownAnimationDuration;

    constructor() {
        super();
    }

    // [Some other method]
    /**
     * Self animate after loading on DOM
     */
    ngAfterViewInit()
    {
        // Wait next to to avoid error :
        // ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked
        setTimeout(() => {
            this.toggleAnimation();
        },100);
    }
}

Код для абстрактного класса UnsubscribeHelper:

export abstract class UnsubscribeHelper implements OnDestroy {

    subscriptions: Subscription[] = [];

    ngOnDestroy() {
        this.subscriptions.forEach(sub => sub.unsubscribe());
    }

    addSubscription(subscription: Subscription) {
        this.subscriptions.push(subscription);
    }
}
4b9b3361

Ответ 1

Ну, я подготовил здесь минимальный, полный и проверяемый пример

Я заметил пропущенный параметр в @HostListner

образец выпуска ниже:

@HostListener('window:resize', ['$event'])
onResize(): void {

}

просто удалите '$event' и это прекрасно работает.

Спасибо @trichetriche за вашу помощь.

Ответ 2

Я добавляю дополнительный ответ, который, надеюсь, поможет другим, ищущим это же сообщение об ошибке, но с другой проблемой.

В моей ситуации у меня была разница в подписи для метода, переопределяемого в базовом классе.

export class Foo extends BaseFoo {

   // NOTE: Missing (parameter)
   onBlur() {
      this.touched();
   }
}

export class BaseFoo {
    onBlur(target: any) {
        ...
    }
 }

Затем в том же компоненте мне не хватало параметра в шаблоне:

<div tabindex="0" (blur)="onBlur()>...</>

Ответ 3

Я встречаю похожую ошибку ERROR in (1,1): : Directive SomeComponent, Expected 0 arguments, but got 1. как описано в этом комментарии fooobar.com/info/15702455/..., но теперь это случилось с window:scroll

@HostListener('window:scroll', ['$event']) public onScroll(): void {
  ...
}

Это не так очевидно, потому что директива, определенная внутри компонента (@HostListener), похожа на анонимную директиву здесь, в сообщении, и не очень понятно, где мне пришлось ее искать. Я решаю это сообщение с помощью логики: если мы предоставляем $ event для функции с именем onScroll - нам нужно установить здесь аргумент event, например, onScroll(event), поэтому внутри обработчика функции директивы HostListener нет аргументов, и мы получаем эту ошибку. Но это произошло в моем случае в строке 1, как описано в сообщении об ошибке, но @HostListener был объявлен ниже всех функций, и, возможно, путем поднятия и оптимизации он появился в строке 1.

Решенный код:

@HostListener('window:scroll', ['$event']) public onScroll(event /*provide $event to method here */): void {
  ...
}