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

Question

I am facing issue when i want to compile my current project in AOT with following package version :

• @ngtools/[email protected]
• @angular@latest (6.0.2)
• [email protected]

my webpack and tsconfig.json configuration can be find here

I have facing some issue related to private / protected scope used on template and some extract parameter gived to some functions who doesn't really need it (Exemple $event who are not used on EventBinding).

Now i have this following list where i can't find where is my issue :

/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.

my main-header.component.html file contain : // 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     }; 

And my TableOfContentComponent does not contain any @Input property.

@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.

my hamburger-menu.component.html is close to above presented code :

<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; 

And my SliderComponent looks like :

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.

Really close to previous one, i thinks issue is same.

/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.

Here we don't have any input on InfinityPageScrollComponent and tag is call like this <ps-infinity-page-scroll></ps-infinity-page-scroll>

I precise, when i disable AOT on my webpack everything work like charm.

i have try to find solution on AoT Do's and Don'ts without any result.

I have also notice if i disable fullTemplateTypeCheck i am facing around 18 000 errors with some implicit any type and more strange, undefined property for my service declared on the constructor.

--- EDIT 1 : Provide code for Abstract 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);     } } 

Code for abstract 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

Well I have prepared here a minimal, complete, and verifiable example

I have noticed a missing parameter with @HostListner

sample of issue bellow :

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

simply remove '$event' and it works great.

In conclusion this two options work properly :

// 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 {      } 

Thanks to @trichetriche for your help.