AOT - Angular 6 - Директива SomeComponent, ожидал 0 аргументов, но получил 1. для самодельного компонента
Я сталкиваюсь с проблемой, когда хочу скомпилировать свой текущий проект в AOT со следующей версией пакета:
- @ Ngtools / WebPack @ 6.0.3
- @ angular @ последний (6.0.2)
- Webpack@4.0.0
мою конфигурацию webpack и tsconfig.json можно найти здесь
Я столкнулся с проблемой, связанной с private / protected область действия, используемая в шаблоне, и некоторый параметр extract, предоставляемый некоторым функциям, которые в действительности не нуждаются в этом (например, $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):: Directive InfinityPageScrollComponent, ожидается 0 аргументов, но получено 1. (1,1):: Directive InfinityPageScrollComponent, ожидается 0 аргументов, но получено 1.
Здесь мы не имеем никакой информации о InfinityPageScrollComponent и тег это вызов, как это <ps-infinity-page-scroll></ps-infinity-page-scroll>
Я точно, когда я отключаю AOT в моем веб-пакете, все работает как шарм.
Я пытался найти решение по AoT, что можно и чего нельзя делать без какого-либо результата.
Я также заметил, если я отключу 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);
}
}
1 ответ
Ну, я подготовил здесь минимальный, полный и проверяемый пример
Я заметил пропущенный параметр с @HostListner
образец выпуска ниже:
@HostListener('window:resize', ['$event'])
onResize(): void {
}
просто удалите '$event' и это прекрасно работает.
Спасибо @trichetriche за вашу помощь.
Я встречаю похожую ошибку под названием
ERROR in (1,1): : Directive SomeComponent, Expected 0 arguments, but got 1.как описано в этом комментарии /questions/45835108/aot-angular-6-direktiva-somecomponent-ozhidal-0-argumentov-no-poluchil-1-dlya-samodelnogo-komponenta/45835122#45835122, но теперь это произошло сwindow:scroll
@HostListener('window:scroll', ['$event']) public onScroll(): void {
...
}
Это не так очевидно, потому что директива, определенная внутри компонента (@HostListener), похожа на анонимную директиву здесь, в сообщении, и не так ясно, где мне нужно было ее искать. Я решаю это сообщение с помощью логики: если мы предоставим $event функции с именем onScroll - нам нужно указать здесь аргументevent нравиться onScroll(event), поэтому внутри обработчика функции директивы HostListener нет аргументов, и мы получаем эту ошибку. Но в моем случае это произошло в строке 1, как описано в сообщении об ошибке, но @HostListener был объявлен под всеми функциями, и, возможно, путем подъема и оптимизации он появился в строке 1.
Решенный код:
@HostListener('window:scroll', ['$event']) public onScroll(event /*provide $event to method here */): void {
...
}
Я добавляю дополнительный ответ, который, надеюсь, поможет другим, ищущим это же сообщение об ошибке, но с другой проблемой.
В моей ситуации у меня была разница в подписи для метода, переопределяемого в базовом классе.
export class Foo extends BaseFoo {
// NOTE: Missing (parameter)
onBlur() {
this.touched();
}
}
export class BaseFoo {
onBlur(target: any) {
...
}
}
Затем в том же компоненте мне не хватало параметра в шаблоне:
<div tabindex="0" (blur)="onBlur()>...</>
Я получаю ту же ошибку в angular 8
1 >> Я обновляю его до 9 и делаю много изменений конфигурации в проекте НЕ РАЗРЕШАЮ
2>> Я вношу все изменения в stackOverflow и github, но ничего не работает НЕ РАЗРЕШИТЬ
для меня внутренняя библиотека @HostListener, то есть angular2-multiselect-dropdown (вы можете легко найти ее на npm)
который выдает ошибку, такую как Директива ɵc, ожидаемых 2 аргумента, но получил 1
(иногда AOT компилирует его, но в большинстве случаев нет), но каждый раз, когда я запускаю команду npm run build:ssr
наконец, потратив больше дня, я удаляю эту библиотеку (angular2-multiselect-dropdown), и у меня все работает нормально