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

Question

在 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 代替它，它也会出错：my span
如果我将 *ngIf="true" 添加到作为按钮父元素的元素，则不会出现构建错误。

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

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

Answer 1

已修复。问题似乎是我没有在 app.module.ts 文件中声明我的组件。因此，我怀疑在编译过程中没有识别出 FormsModule 等依赖项。这是我没有通过 CLI 添加组件，而是 right-clicking 并在 Visual Studio.

中创建打字稿文件的结果

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

Angular 10 - Build errors based on position of element

build

typescript

angular-cli

angular