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

【问题标题】：Angular 10 - Build errors based on position of elementAngular 10 - 基于元素位置构建错误
【发布时间】：2021-01-19 13:47:34
【问题描述】：

在 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" 添加到按钮的父元素中，则不会出现构建错误。

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

有没有人知道是什么导致了这种行为？

【问题讨论】：

标签： angular typescript build angular-cli

【解决方案1】：

已修复。问题似乎是我没有在 app.module.ts 文件中声明我的组件。因此，我怀疑 FormsModule 等依赖项在编译期间没有被识别。这是因为我没有通过 CLI 添加组件，而是在 Visual Studio 中右键单击并创建 typescript 文件。

【讨论】：