angular - Angular 10 - 基于元素位置构建错误

问题描述

在 Angular 10 中，运行“ng serve”或“ng build”时出现以下构建错误。

ERROR in projects/project-navigator/src/app/modals/building-permissions.component.html:89:61 - error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'button'.

    89         <button type="button" (click)="doneButtonClicked()" [ngClass]="{ 'inactive-button': !permissionsHaveChanged || noOwner || (customMessageContainsHyperlinks && !allTogglesOff) }" twgTooltip [ttTextOnly]="doneDisabledTooltip" [ttDontShowIf]="permissionsHaveChanged && !noOwner && (!customMessageContainsHyperlinks || allTogglesOff)">
                                                                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      projects/project-navigator/src/app/modals/building-permissions.component.ts:18:16
        18   templateUrl: './building-permissions.component.html',
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component BuildingPermissionsComponent.
    projects/project-navigator/src/app/modals/building-permissions.component.html:89:197 - error NG8002: Can't bind to 'ttTextOnly' since it isn't a known property of 'button'.

    89         <button type="button" (click)="doneButtonClicked()" [ngClass]="{ 'inactive-button': !permissionsHaveChanged || noOwner || (customMessageContainsHyperlinks && !allTogglesOff) }" twgTooltip [ttTextOnly]="doneDisabledTooltip" [ttDontShowIf]="permissionsHaveChanged && !noOwner && (!customMessageContainsHyperlinks || allTogglesOff)">
                                                                                                                                                                                                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      projects/project-navigator/src/app/modals/building-permissions.component.ts:18:16
        18   templateUrl: './building-permissions.component.html',
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component BuildingPermissionsComponent.
    projects/project-navigator/src/app/modals/building-permissions.component.html:89:232 - error NG8002: Can't bind to 'ttDontShowIf' since it isn't a known property of 'button'.

    89         <button type="button" (click)="doneButtonClicked()" [ngClass]="{ 'inactive-button': !permissionsHaveChanged || noOwner || (customMessageContainsHyperlinks && !allTogglesOff) }" twgTooltip [ttTextOnly]="doneDisabledTooltip" [ttDontShowIf]="permissionsHaveChanged && !noOwner && (!customMessageContainsHyperlinks || allTogglesOff)">
                                                                                                                                                                                                                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

      projects/project-navigator/src/app/modals/building-permissions.component.ts:18:16
        18   templateUrl: './building-permissions.component.html',
                          ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
        Error occurs in the template of component BuildingPermissionsComponent.

错误引用此按钮：

<button type="button" (click)="doneButtonClicked()" [ngClass]="{ 'inactive-button': !permissionsHaveChanged || noOwner || (customMessageContainsHyperlinks && !allTogglesOff) }" twgTooltip [ttTextOnly]="doneDisabledTooltip" [ttDontShowIf]="permissionsHaveChanged && !noOwner && (!customMessageContainsHyperlinks || allTogglesOff)">
          {{continueToNotifications && !showNotificationForm ? "Continue" : "Apply Changes" }}
        </button>

但是，鉴于以下事实，这些错误是不正确的：

我已经验证了为按钮引用的所有变量确实存在于组件 ts 文件中。另外，如果是变量，错误会这样说。
我一直在寻找 html 问题，例如缺少结束标记或引用未终止...什么也没找到
同一组件模板中的其他元素（包括按钮）使用 ngClass、ttTextOnly 和 ttDontShowIf 的方式完全相同，没有错误。
如果将按钮剪切并粘贴到模板的不同部分，它构建得很好，验证这里实际上没有语法错误。
如果我删除按钮并添加一个跨度来代替它，它也会出错：<span [ngClass]="{'woot': true}">my span
如果我将 *ngIf="true" 添加到按钮的父元素中，则不会出现构建错误。

所以，这似乎没有任何意义。我可以将按钮移动到模板的各个部分，它会在模板底部附近的某些地方出错，但在模板的大多数地方都不会出错。所以按钮的位置似乎是导致错误的原因。我不明白。

有没有人知道可能导致这种行为的原因？

标签： angulartypescriptbuildangular-cli

angular - Angular 10 - 基于元素位置构建错误

问题描述

解决方案

推荐阅读