Блог

В 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 amp;amp; !allTogglesOff) }" twgTooltip [ttTextOnly]="doneDisabledTooltip" [ttDontShowIf]="permissionsHaveChanged amp;amp; !noOwner amp;amp; (!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 amp;amp; !allTogglesOff) }" twgTooltip [ttTextOnly]="doneDisabledTooltip" [ttDontShowIf]="permissionsHaveChanged amp;amp; !noOwner amp;amp; (!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 amp;amp; !allTogglesOff) }" twgTooltip [ttTextOnly]="doneDisabledTooltip" [ttDontShowIf]="permissionsHaveChanged amp;amp; !noOwner amp;amp; (!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 amp;amp; !allTogglesOff) }" twgTooltip [ttTextOnly]="doneDisabledTooltip" [ttDontShowIf]="permissionsHaveChanged amp;amp; !noOwner amp;amp; (!customMessageContainsHyperlinks || allTogglesOff)">
          {{continueToNotifications amp;amp; !showNotificationForm ? "Continue" : "Apply Changes" }}
        </button>
  

Но эти ошибки неверны, учитывая следующие факты:

• Я проверил, что все переменные, на которые ссылается кнопка, существуют в файле ts компонента. Кроме того, если бы это были переменные, ошибки сказали бы об этом.
• Я искал проблемы с html, такие как отсутствующий конечный тег или не завершенная цитата…ничего не найдено
• Другие элементы, включая кнопки, в том же шаблоне компонента используют ngClass , ttTextOnly и ttDontShowIf точно так же, без ошибок.
• Если вырезать и вставить кнопку в другую часть шаблона, он будет собран нормально, подтверждая, что на самом деле здесь нет синтаксических ошибок.
• Если я удалю кнопку и добавлю вместо нее интервал следующим образом, он тоже выдает ошибку: <span> мой диапазон
• Если я добавлю *ngIf=»true» к элементу, который является родительским для кнопки, я не получу ошибку сборки.

Итак, кажется, это не имеет смысла. Я могу переместить кнопку в различные части шаблона, и она выдает ошибки в некоторых местах в нижней части шаблона, но не выдает ошибок в большинстве мест шаблона. Таким образом, положение кнопки, похоже, вызывает ошибки. Я не понимаю.

У кого-нибудь есть идеи о том, что может быть причиной такого поведения?

Исправлено. Проблема, похоже, заключалась в том, что я не объявил свой компонент в своем файле app.module.ts. Из-за этого я подозреваю, что такие зависимости, как FormsModule и другие, не распознались во время компиляции. Это результат того, что я не добавляю компоненты через CLI, а вместо этого щелкаю правой кнопкой мыши и создаю файлы typescript в Visual Studio.