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

时间:2018-05-18 07:23:47

标签: angular webpack angular-aot ngtools

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

  • @ ngtools /的WebPack @ 6.0.3
  • @ angular @ latest(6.0.2)
  • Webpack@4.0.0

my webpack and tsconfig.json configuration can be find here

我遇到了一些与模板上使用的private / protected范围相关的问题,并且某些提取参数提供给了一些并不真正需要它的函数(Exemple $ 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)::指令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);
    }
}

4 个答案:

答案 0 :(得分:36)

我已经准备好了minimal, complete, and verifiable example

我注意到@HostListner

缺少参数

问题样本如下:

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

}

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

感谢@trichetriche的帮助。

答案 1 :(得分:4)

我遇到了一些类似的错误,称为 ERROR in (1,1): : Directive SomeComponent, Expected 0 arguments, but got 1. 如该评论https://stackoverflow.com/a/50409526/9026103中所述, 但是现在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 {
  ...
}

答案 2 :(得分:1)

我要添加一个附加答案,希望可以帮助其他人搜索相同的错误消息,但有不同的问题。

在我的情况下,对于在基类中重写的方法,我的签名有所不同。

export class Foo extends BaseFoo {

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

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

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

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

答案 3 :(得分:0)

我在角度8中遇到了相同的错误

1 >>我将其升级到9,并在项目中进行了许多配置更改无法解决

2 >>我在stackOverflow和github上进行了所有更改,但nothig正常工作无法解决

对我来说,是一个在内部跨越 @HostListener 的图书馆,即 angular2-multiselect-下拉列表(您可以在npm上轻松找到它)

出现类似错误 指令ɵc,预期有2个参数,但有1个

(有时AOT会编译它,但大多数时候不是) 但是每次我运行命令 npm运行build:ssr

最后花了一天多的时间后,我才删除了这个库( angular2-multiselect-dropdown ),一切正常