web-dev-qa-db-ja.com

AOT-Angular 6-Directive SomeComponent、Expected 0 arguments、but get get 1. for self made Component

現在のプロジェクトをAOTで次のパッケージバージョンでコンパイルしたい場合、問題に直面しています。

私のwebpackとtsconfig.jsonの設定はここにあります

テンプレートで使用されるprivate/protectedスコープに関連するいくつかの問題と、実際にそれを必要としない関数に与えられるいくつかの抽出パラメーターに直面しています（EventBindingで使用されない$ eventの例） 。

今、私は私の問題がどこにあるかを見つけることができない次のリストを持っています：

/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）：：Directive SliderComponent、引数は0ですが、1を取得しました（1,1）：：Directive 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）：：ディレクティブInfinityPageScrollComponent、引数は0であるが、1を得た（1,1）：：ディレクティブInfinityPageScrollComponent、引数が0であるが、得られた1。

ここではInfinityPageScrollComponentに入力がなく、タグはこの<ps-infinity-page-scroll></ps-infinity-page-scroll>

私は正確に、私のWebpackでAOTを無効にすると、すべてが魅力的に機能します。

AoT Do's and Don'ts で解決策を見つけようとしましたが、結果はありません。

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);
    }
}
angularwebpackangular-aotngtools
15
Yanis-git

さて、ここで 最小限の、完全な、検証可能な例 を用意しました。

@HostListnerのパラメーターが欠落していることに気付きました

以下の問題のサンプル：

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

}

単に'$event'を削除するだけでうまく機能します。

あなたの助けを@trichetricheに感謝します。

69
Yanis-git

私は、この同じエラーメッセージを検索しているが、別の問題を抱えている他の人を助けることができるように、追加の回答を追加しています。

私の状況では、基本クラスでオーバーライドされるメソッドのシグネチャに違いがありました。

export class Foo extends BaseFoo {

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

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

次に、同じコンポーネントで、テンプレートのパラメーターが欠落していました。

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

このコメントの中で説明されているERROR in (1,1): : Directive SomeComponent, Expected 0 arguments, but got 1.と呼ばれる同様のエラーに遭遇します https://stackoverflow.com/a/50409526/90261 ですが、今では_window:scroll_で発生しました

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

コンポーネント（@HostListener）内で定義されたディレクティブは、ここではメッセージ内の匿名ディレクティブに似ており、どこで検索する必要があるかはそれほど明確ではないため、それほど明白ではありません。このメッセージをロジックで解決します：onScrollという関数に$ eventを提供する場合、onScroll(event)のような引数eventをここに設定する必要があるため、HostListenerディレクティブの関数ハンドラー内に引数はありません。このエラーが発生します。しかし、エラーメッセージで説明されているように、私の場合は1行目で発生しましたが、@ HostListenerはすべての関数の下で宣言されており、おそらく巻き上げと最適化によって1行目に現れました。

解決されたコード：

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