Angular 2 'компонент' не является известным элементом

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

"Неподготовлено (в обещании): Ошибка: ошибки анализа шаблона:

'contact-box' не является известным элементом:

Если" contact-box "является компонентом Angular, а затем убедитесь, что он является частью этого модуля.

Если" contact-box "является веб-компонентом, добавьте" CUSTOM_ELEMENTS_SCHEMA "в" @NgModule.schemas" этого компонента, чтобы подавить это сообщение.

Моя структура проекта довольно проста:

Я храню свои страницы в каталоге страниц, где каждая страница хранится в другом модуле (например, клиент-модуль), и каждый модуль имеет несколько компонентов (например, список клиентов-компонент, клиент-добавочный компонент и т.д.). Я хочу использовать свой ContactBoxComponent внутри этих компонентов (например, внутри клиентов-add-component).

Как вы можете видеть, я создал компонент "Ящик контактов" внутри каталога виджетов, поэтому он в основном находится внутри AppModule. Я добавил импорт ContactBoxComponent в app.module.ts и поместил его в список объявлений AppModule. Он не работал, поэтому я искал свою проблему и добавил ContactBoxComponent в список экспорта. Не помогло. Я также попытался поставить ContactBoxComponent в CustomersAddComponent, а затем в другой (из другого модуля), но получил ошибку, заявив, что существует несколько объявлений.

Что мне не хватает?

Ответ 1

Вот 5 шагов, которые я выполняю, когда у меня появляется такая ошибка.

Вы уверены, что имя правильное? (также проверьте селектор, определенный в компоненте)
Объявить компонент в модуле?
Если это в другом модуле, экспортировать компонент?
Если это в другом модуле, импортировать этот модуль?
Перезагрузить кли?

Я также попытался поместить ContactBoxComponent в CustomersAddComponent, а затем в другой (из другого модуля), но получил сообщение об ошибке, заявив, что существует несколько объявлений.

Вы не можете объявить компонент дважды. Вы должны объявить и экспортировать свой компонент в новый отдельный модуль. Затем вы должны импортировать этот новый модуль в каждый модуль, в котором вы хотите использовать свой компонент.

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

Хотя может показаться заманчивым поместить все компоненты в один модуль, это отрицательно сказывается на производительности. При разработке модуль должен перекомпилироваться каждый раз, когда вносятся изменения. Чем больше модуль (больше компонентов), тем больше времени требуется. Небольшое изменение в большом модуле занимает больше времени, чем небольшое изменение в маленьком модуле.

Ответ 2

У меня была точно такая же проблема. Прежде чем приступать к рассмотрению некоторых решений, вы можете проверить, действительно ли компонент не работает. Для меня ошибка была показана в моей среде IDE (WebStorm), но оказалось, что код работал отлично, когда я запускал его в браузере.

После того, как я отключил терминал (который был запущен рг-сервис) и перезапустил мою среду IDE, сообщение перестало отображаться.

Ответ 3

У меня была похожая проблема. Оказалось, что ng generate component (с использованием CLI версии 7.1.4) добавляет объявление для дочернего компонента в модуль AppModule, а не в модуль TestBed, который его эмулирует.

"Тур герои" образец приложения содержит HeroesComponent с селекторными app-heroes. Приложение работало нормально, когда его обслуживали, но ng test выдает это сообщение об ошибке: 'app-heroes' is not a known element. Добавление HeroesComponent вручную к объявлениям в configureTestingModule (в app.component.spec.ts) устраняет эту ошибку.

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeroesComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
}

Ответ 4

У меня такая же проблема ширины php storm version 2017.3. Это исправить это для меня: Intellij Support Forum

Это была ошибка ширины @angular Language Service: https://www.npmjs.com/package/@angular/language-service

Ответ 5

У меня возникла та же проблема, и это происходило из-за того, что другой компонент по ошибке включил этот компонент. Когда убрал его из другой функции, все заработало!

Ответ 6

В моем случае проблема заключалась в отсутствии объявления компонента в модуле, но даже после добавления объявления ошибка сохранялась. Я должен был остановить сервер и пересобрать весь проект в VS Code, чтобы ошибка исчезла.