template - angular компоненты




Угловой 2 «компонент» не является известным элементом (5)

В моем случае в моем приложении было несколько слоев модулей, поэтому модуль, который я пытался импортировать, должен был быть добавлен в родительский модуль, который фактически использовал его pages.module.ts вместо app.module.ts .

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

"Uncaught (в обещании): Ошибка: Ошибки синтаксического анализа шаблона:

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

  1. Если 'contacts-box' является угловым компонентом, то убедитесь, что он является частью этого модуля.
  2. Если 'contacts-box' является веб-компонентом, то добавьте 'CUSTOM_ELEMENTS_SCHEMA' в '@ NgModule.schemas' этого компонента, чтобы подавить это сообщение.

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

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

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

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


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


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

Образец приложения "Тур героев" содержит компонент Heroes с селектором app-heroes . Приложение работало нормально, когда его обслуживали, но ng test выдает это сообщение об ошибке: 'app-heroes' is not a known element . Добавление HeroesComponent вручную к объявлениям в configureTestingModuleapp.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();
  });
}

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

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






angular-module