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

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

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

推荐答案

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.

Angular相关问答推荐

HTTP Get请求未发送到提供的URL

Angular 类型的表单不能分配给分部类型

从、管道和映射可观察到的逻辑?

带独立零部件的TranslateLoader[Angular 16]

如何将表单作为Angular 分量输入传递?

区分material 手风琴

具有两个订阅方法的 Angular 16 takeUntilDestroyed 运算符

Summernote 文本区域的输入字段文本验证失败

TypeError:this.restoreDialogRef.afterClosed 不是函数

console.log 返回 api 数据但 ERROR TypeError: Cannot read properties of undefined reading 'name'

我想将一个对象传递给一个子组件.我做了一切,但没有任何效果. (Angular )

在 Angular material表上调用 renderRows()

如何在 ngFor 循环中创建变量?

Angular 2 - 什么是Root Scope?

当父组件上的变量发生变化时重新加载子组件

如何从组件模板将数组作为 Input() 传递?

请求 http.GET 时发送的 Angular2 OPTIONS 方法

Angular 4 设置下拉菜单中的选定选项

ng-template 上的 *ngFor 不输出任何内容

Angular 9 引入了需要加载的全局$localize()函数