Основы Angular: Устранение неполадок неизвестных элементов
Ошибка NG8001 сигнализирует о наличии неизвестного элемента или компонента в вашем коде Angular. Вот некоторые из причин, решений и шагов по предотвращению такой ошибки.
С ростом сложности современных веб-страниц появились новые технологии. Одной из таких технологий является Angular JS, популярный фреймворк для разработки одностраничных приложений.
Несмотря на это, ошибки Angular могут быть трудны для отладки и устранения. В этом посте мы попытаемся устранить одну из наиболее распространенных ошибок, с которыми вы можете столкнуться при использовании Angular — ошибку под названием “‘X’ не является известным элементом”, также называемую Angular Error NG8001. Это особенно сбивает с толку, потому что эта ошибка может возникать по-разному и с разными причинами. В этой статье дается подробное объяснение всех этих причин, а также способов их устранения.
Error NG8001
Ошибка Angular - это ошибка, возникающая во время выполнения приложения Angular. Существует множество причин, по которым может возникнуть ошибка Angular, начиная от синтаксических ошибок в коде Angular и заканчивая ошибками в базовой операционной системе или аппаратном обеспечении. Это может затруднить отладку и устранение ошибок Angular.
Ошибка “Angular error NG8001: неизвестный HTML-элемент или компонент” - это ошибка во время выполнения, которая возникает, когда компилятор Angular обнаруживает неожиданный токен. Это может произойти, когда шаблон Angular содержит синтаксическую ошибку или когда компилятор Angular сталкивается с ошибкой TypeScript.
Ошибка в компиляторе будет выглядеть следующим образом:
NG0304: '${tagName}' is not a known element: ....
Причины Angular Error NG8001
Существует несколько потенциальных причин Angular ошибки NG8001. Одна из возможностей заключается в том, что Angular CLI установлен неправильно. Другая возможность заключается в том, что проект Angular настроен неправильно или что в конфигурации проекта произошла ошибка. Также возможно, что ошибка вызвана конфликтом между различными версиями Angular.
Исправление Angular Error NG8001
Пример 1: Ошибка NG8001: Router-Outlet не является известным элементом
Ошибка в src/app/components/layout/layout.component.html:8:17 — ошибка NG8001: router-outlet не является известным элементом:
- Если
router-outletявляется компонентом Angular, убедитесь, что он является частью этого модуля. - Если
router-outletявляется веб-компонентом, добавьтеCUSTOM_ELEMENTS_SCHEMAв@NgModule.schemasэтого компонента, чтобы подавить это сообщение.
Код в нашем app.component:
<router-outlet></router-outlet>Решение:
Первое, что мы сделали, это импортировали RouterModule во внешний модуль, вот так:
@NgModule({
declarations:[
AlertsComponent,
FooterComponent,
LogoutComponent,
MessageComponent,
SearchComponent,
SidebarComponent,
TopbarComponent,
UserInfoComponent,
LayoutComponent,
],
imports:[
RouterModule
]
})
export class LayoutModule {}Затем импортировали модуль в app.module.ts:
@NgModule({
declarations: [
AppComponent
],
imports: [
AppRoutingModule,
BrowserModule,
LayoutModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }Пример 2: NG8001: Mat-Spinner Не является известным элементом
Ошибка NG8001: mat-spinner не является известным элементом:
- Если
mat-spinnerявляется компонентом Angular, то убедитесь, что он является частью этого модуля. - Если
mat-spinnerявляется веб-компонентом, то добавьтеCUSTOM_ELEMENTS_SCHEMAв@NgModule.schemasэтого компонента, чтобы подавить это сообщение. ("[ERROR ->]<mat-spinner></mat-spinner>")
Код в app.module.ts:
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }Код в app.component:
<mat-spinner></mat-spinner>Решение:
В приведенном выше примере вам не хватает MatProgressSpinnerModule в вашем импорте AppModule. Это должно выглядеть так, как показано ниже, а затем будет работать:
@NgModule({
imports: [
BrowserModule,
ReactiveFormsModule,
MatProgressSpinnerModule
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }Пример 3: Ошибка NG8001: Mat-Card не является известным элементом:
Ошибка: mat-card не является известным элементом:
- Если
mat-cardявляется компонентом Angular, то убедитесь, что он является частью этого модуля. - Если
mat-cardявляется веб-компонентом, добавьтеCUSTOM_ELEMENTS_SCHEMAв@NgModule.schemasэтого компонента, чтобы подавить это сообщение. ("[ERROR ->]<mat-card> </mat-card>”)
Код в app.module.ts:
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { LOCALE_ID, NgModule } from "@angular/core";
import { HttpClientModule, HTTP_INTERCEPTORS } from "@angular/common/http";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import {
MatButtonModule,
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatListModule,
MatSelectModule,
MatSidenavModule,
MatCardModule,
MatTableModule
} from "@angular/material";
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppRoutingModule,
HttpClientModule,
MatButtonModule,
MatFormFieldModule,
MatIconModule,
MatListModule,
MatInputModule,
MatSelectModule,
MatSidenavModule,
MatCardModule,
MatTableModule
],....
})
export class AppModule {}Мы пытаемся использовать employee.component.html в своем src/app/employees, но это не работает.
<mat-card></mat-card>Решение:
Объявите EmployeesComponent в том же модуле, куда вы импортировали MatCardModule следующим образом:
declarations: [
EmployeesComponent
],
imports: [
MatCardModule
]Попробуйте импортировать MatCardModule как:
import { MatCardModule } from '@angular/material/card';Дополнительные методы устранения неполадок
Обновитесь до AngularJS версии 1.3 или выше
Если вы используете более старую версию Angular, иногда вы можете устранить ошибку ng8001, обновившись до последней версии. Эта ошибка вызвана конфликтом между Angular и новой версией jQuery. Обновившись до последней версии Angular, вы можете разрешить этот конфликт и избежать ошибки.
Обновите Angular CLI и менеджер пакетов
Если вы видите ошибку “NG8001” в вашем проекте Angular, скорее всего, вы используете более новую версию Angular CLI, чем поддерживается используемой вами версией Angular. Чтобы исправить это, вы можете либо понизить Angular CLI до более старой версии, либо обновить Angular до более новой версии.
Используйте предварительную компиляцию (AoT) и исходные карты
Если вы видите сообщение об ошибке «Angular error NG8001» и не знаете, где ошибка, вы можете использовать Angular CLI, чтобы найти ее. Для этого выполните следующую команду:
ng serve --aot --source-mapЭто скомпилирует ваше приложение Angular с компиляцией Ahead-of-Time (AoT) и исходными картами. При компиляции AoT компилятор Angular найдет и сообщит о любых ошибках в вашем приложении.
С помощью исходных карт вы сможете увидеть исходный код (до того, как он был скомпилирован в JavaScript), что облегчит поиск и исправление ошибки. Эта команда будет работать только на Angular 13 или более поздних версиях.
Как предотвратить ошибку «X Is Not a Known Element» (NG8001)
Вот пять шагов, которые можно выполнить, когда получается такая ошибка, и выполнение этих шагов при написании вашей программы может помочь вам предотвратить возникновение этой ошибки.
- Убедитесь, что имя указано правильно. (Также проверьте селектор, определенный в компоненте.)
- Объявите компонент в модуле.
- Если он находится в другом модуле, экспортируйте компонент.
- Если он находится в другом модуле, импортируйте этот модуль.
- Перезапустите терминал и повторите попытку.
Когда ошибка возникает во время модульного тестирования, убедитесь, что вы объявили компонент.
Мы надеемся, что с помощью этого раздела по устранению неполадок вы сможете избежать этой ошибки и не допустить, чтобы она мешала вашим важным проектам. Если у вас есть другие вопросы или проблемы, обращайтесь в любое время.
