AOT - Angular 6 - 指令 SomeComponent，预期 0 个参数，但得到 1 个。对于自制组件

Question

当我想使用以下包版本在 AOT 中编译我当前的项目时，我遇到了问题：

@ngtools/webpack@6.0.3
@angular@最新 (6.0.2)
Webpack@4.0.0

my webpack and tsconfig.json configuration can be find here

我遇到了一些与模板上使用的 private / protected 范围相关的问题，以及一些提取参数提供给了一些并不真正需要它的函数（例如未使用的 $event在 EventBinding 上）。

现在我有以下列表，但我找不到我的问题所在：

/path/to/app/header/main-header/main-header.component.html(85,7): : Directive TableOfContentComponent, Expected 0 arguments, but got 1. (1,1): : Directive TableOfContentComponent, Expected 0 arguments, but got 1.

我的 main-header.component.html 文件包含： // 主要-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, Expected 0 arguments, but got 1. (1,1): : Directive SliderComponent, Expected 0 arguments, but got 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): : Directive CarouselComponent, Expected 0 arguments, but got 1. (1,1): : Directive CarouselComponent, Expected 0 arguments, but got 1.

非常接近上一个，我认为问题是一样的。

/path/to/app/document/page/page.component.html(7,9): : Directive InfinityPageScrollComponent, Expected 0 arguments, but got 1. (1,1): : Directive InfinityPageScrollComponent, Expected 0 arguments, but got 1.

这里我们在 InfinityPageScrollComponent 上没有任何输入，标签是这样调用的 <ps-infinity-page-scroll></ps-infinity-page-scroll>

我很准确，当我在我的 webpack 上禁用 AOT 时，一切都像 charm 一样工作。

我已经尝试在 AoT Do's and Don'ts 上找到解决方案，但没有任何结果。

我还注意到，如果我禁用 fullTemplateTypeCheck，我将面临大约 18 000 个错误，其中包含一些隐含的 any 类型和更奇怪的未定义属性我在构造函数中声明的服务。

--- 编辑 1：为摘要 class 提供代码：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);
    }
}

摘要代码 class UnsubscribeHelper :

export abstract class UnsubscribeHelper implements OnDestroy {

    subscriptions: Subscription[] = [];

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

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

Answer 1

嗯我这里准备了一份minimal, complete, and verifiable example

我注意到 @HostListner

缺少一个参数

问题示例如下：

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

只需删除 '$event'，效果很好。

总之，这两个选项工作正常：

// When you need the Event variable, you can use following syntax.
@HostListener('window:resize', ['$event'])
onResize($event: Event): void {
    
}

// When you do not need the Event variable, you can use following syntax.
@HostListener('window:resize')
onResize(): void {
    
}

感谢@trichetriche 的帮助。

Answer 2

我正在添加一个额外的答案，希望能帮助其他人搜索同样的错误消息但遇到不同的问题。

在我的情况下，我在基础 class 中重写的方法的签名不同。

export class Foo extends BaseFoo {

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

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

然后在同一个组件中我缺少模板中的参数：

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

Answer 3

我遇到了一些类似的错误 ERROR in (1,1): : Directive SomeComponent, Expected 0 arguments, but got 1. 如本评论中所述，但现在 window:scroll

发生了

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

不是很明显，因为在组件（@HostListener）中定义的指令就像消息中的匿名指令一样，并且不太清楚我必须在哪里搜索它。我用逻辑解决了这条消息：如果我们向名为 onScroll 的函数提供 $event - 我们需要在此处设置参数 event，如 onScroll(event)，因此 HostListener 指令的函数处理程序中没有参数，我们收到这个错误。但它发生在我的第 1 行，如错误消息中所述，但@HostListener 是在所有函数下方声明的，并且可能通过提升和优化，它出现在第 1 行。

已解决的代码：

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

Answer 4

我在 angular 8

中遇到同样的错误

1>> 我将它升级到 9 并在项目中做了很多配置更改 NOT RESOLVE

2>> 我在 Whosebug & github 上进行了所有更改，但没有任何效果 NOT RESOLVE

对我来说，图书馆内部交叉 @HostListener 即 angular2-multiselect-dropdown（你可以很容易地在 npm 上找到它）

这是错误的 指令 ɵc，需要 2 个参数，但得到 1 个

（有时 AOT 编译它，但大多数时候不是）但每次我运行命令 npm 运行 build:ssr

在花了一天多的时间后，我终于删除了这个库（angular2-multiselect-dropdown）并且一切正常

AOT - Angular 6 - 指令 SomeComponent，预期 0 个参数，但得到 1 个。对于自制组件

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

webpack

angular

angular-aot

ngtools