web-dev-qa-db-fra.com

AOT - Angular 6 - Directive SomeComponent, 0 argument attendu, mais 1 obtenu pour le composant auto-fabriqué

Je suis confronté à un problème lorsque je veux compiler mon projet actuel dans AOT avec la version de package suivante:

ma configuration webpack et tsconfig.json peut être trouvée ici

J'ai rencontré un problème lié à la portée de private/protected utilisée sur le modèle et à certains paramètres d'extraction donnés à certaines fonctions qui n'en ont pas vraiment besoin (Exemple $ event qui n'est pas utilisé sur EventBinding) .

Maintenant, j'ai cette liste suivante où je ne peux pas trouver où est mon problème:

/path/to/app/header/main-header/main-header.component.html(85,7):: Directive TableOfContentComponent, Arguments attendus 0, mais obtenu 1. (1,1):: Directive TableOfContentComponent, Attendu 0 arguments, mais a obtenu 1.

mon main-header.component.html le fichier contient: // 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    
};

Et mon TableOfContentComponent ne contient pas de @Input propriété.

@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, attendu 0 argument, mais obtenu 1. (1,1):: directive SliderComponent, Expected 0 arguments, mais got 1.

mon hamburger-menu.component.html est proche du code présenté ci-dessus:

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

Et mon SliderComponent ressemble à:

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, attendu 0 argument, mais obtenu 1. (1,1):: directive CarouselComponent, attendu 0 arguments, mais obtenu 1.

Vraiment proche de la précédente, je pense que le problème est le même.

/path/to/app/document/page/page.component.html(7,9):: Directive InfinityPageScrollComponent, Arguments 0 attendus, mais obtenu 1. (1,1):: Directive InfinityPageScrollComponent, Arguments 0 prévus, mais obtenus 1.

Ici, nous n'avons aucune entrée sur InfinityPageScrollComponent et la balise est appelée comme ceci <ps-infinity-page-scroll></ps-infinity-page-scroll>

Je précise, lorsque je désactive AOT sur mon webpack, tout fonctionne comme par enchantement.

j'ai essayé de trouver une solution sur AoT Do's and Don'ts sans aucun résultat.

J'ai également remarqué que si je désactive fullTemplateTypeCheck je fais face à environ 18 000 erreurs avec des types implicites de tout type et plus étranges et non définis pour mon service déclarés sur le constructeur.

--- EDIT 1: Fournissez le code pour la classe Abstract: 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 pour la classe abstraite 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

Eh bien, j'ai préparé ici un exemple minimal, complet et vérifiable

J'ai remarqué un paramètre manquant avec @HostListner

échantillon de problème ci-dessous:

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

}

supprimez simplement '$event' et ça marche très bien.

Merci à @trichetriche pour votre aide.

69
Yanis-git

J'ajoute une réponse supplémentaire qui, espérons-le, aidera les autres à rechercher ce même message d'erreur mais avec un problème différent.

Dans ma situation, j'avais une différence de signature pour une méthode étant surchargée dans la classe de base.

export class Foo extends BaseFoo {

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

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

Ensuite, dans le même composant, il me manquait le paramètre dans le modèle:

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

Je rencontre une erreur similaire appelée ERROR in (1,1): : Directive SomeComponent, Expected 0 arguments, but got 1. comme décrit dans ce commentaire https://stackoverflow.com/a/50409526/90261 , mais maintenant c'est arrivé avec window:scroll

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

Ce n'est pas si évident, car la directive définie à l'intérieur du composant (@HostListener) est comme une directive anonyme ici dans le message, et pas si claire où je devais la rechercher. Je résous ce message avec logique: si nous fournissons $ event à la fonction appelée onScroll - nous devons définir ici l'argument event comme onScroll(event), donc il n'y a pas d'argument dans le gestionnaire de fonctions de la directive HostListener, et nous recevons cette erreur. Mais c'est arrivé dans mon cas à la ligne 1, comme décrit dans le message d'erreur, mais @HostListener a été déclaré sous toutes les fonctions, et par le levage et les optimisations peut-être, il est apparu à la ligne 1.

Code résolu:

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