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

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

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

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

Структура моего проекта довольно проста: Overall project structure

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

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

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

Ответы (20)

Это 5 шагов, которые я выполняю, когда получаю такую ​​ошибку.

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

Если ошибка возникает во время модульного тестирования, убедитесь, что вы объявили компонент или импортировали модуль в TestBed.configureTestingModule

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

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

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

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

Я начинаю Angular, и в моем случае проблема заключалась в том, что я не сохранил файл после добавления оператора import.

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

Эта запутанная структура сводит меня с ума. Учитывая, что вы определили настраиваемый компонент в шаблоне другой компонентной части ЖЕСТКОГО модуля, вам не нужно использовать экспорт в модуле (например, app.module.ts). Вам просто нужно указать объявление в директиве @NgModule вышеупомянутого модуля:

// app.module.ts

import { JsonInputComponent } from './json-input/json-input.component';

@NgModule({
  declarations: [
    AppComponent,
    JsonInputComponent
  ],
  ...

Вам НЕ нужно импортировать JsonInputComponent (в этом примере) в AppComponent (в этом примере), чтобы использовать пользовательский компонент JsonInputComponent в AppComponent шаблон. Вам просто нужно добавить к настраиваемому компоненту префикс с именем модуля, для которого были определены оба компонента (например, app):

Обратите внимание: app-json-input не json-input!

Демо здесь: https://github.com/lovefamilychildrenhappiness/AngularCustomComponentValidation

Маршрутные модули (не видел в этом ответа)

Первая проверка: если вы объявили и экспортировали компонент внутри своего модуля, импортировали модуль, в котором хотите его использовать, и правильно назвали компонент внутри HTML.

В противном случае вы можете пропустить модуль внутри вашего модуля маршрутизации:
Если у вас есть модуль маршрутизации с маршрутом, который направляется к компоненту из другого модуля, важно, чтобы вы импортировали этот модуль в этот модуль маршрута. В противном случае Angular CLI покажет ошибку: компонент не является известным элементом.

Например

1) Имея следующую структуру проекта:

├───core
│   └───sidebar
│           sidebar.component.ts
│           sidebar.module.ts
│
└───todos
    │   todos-routing.module.ts
    │   todos.module.ts
    │
    └───pages
            edit-todo.component.ts
            edit-todo.module.ts

2) Внутри todos-routing.module.ts у вас есть маршрут к edit.todo.component.ts (без импорта его модуля):

  {
    path: 'edit-todo/:todoId',
    component: EditTodoComponent,
  },

Маршрут будет работать нормально! Однако при импорте sidebar.module.ts внутри edit-todo.module.ts вы получите сообщение об ошибке: app-sidebar не является известным элементом.

Исправлено: Поскольку вы добавили маршрут в edit-todo.component.ts на шаге 2, вам нужно будет добавить edit-todo.module .ts в качестве импорта, после этого будет работать импортированный компонент боковой панели!

Полдня потратил на решение этой проблемы. Проблема была в импорте. У моего HomeModule есть homeComponent, который включен в html. ProductComponent является частью ProductModule. И я добавил ProductModule в импорт в HomeModule, но забыл добавить HomeModule в импорт в AppModule. После добавления проблема исчезла

У меня была такая же проблема с Angular CLI: 10.1.5 Код работает нормально, но ошибка была показана в VScode v1.50

Устранено уничтожением терминала (ng serve) и перезапуском VScode.

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

Эта ссылка Angular.io объясняет, почему: Компоненты / службы внутри модуля по умолчанию остаются закрытыми (или защищенными). Чтобы сделать их общедоступными, их нужно экспортировать.

Expanding on @Robin Djikof's answer with @live-love code sample, this is what was technically missing in my case(Angular 8):

@NgModule({
  declarations: [
    SomeOtherComponent,
    ProductListComponent
  ],
  imports: [
    DependantModule
  ],
  exports: [ProductListComponent] 
  //<- This line makes ProductListComponent available outside the module, 
  //while keeping SomeOtherComponent private to the module
})
export class SomeLargeModule { }

При выполнении Angular's Getting Started Tutorialя тоже получил эту ошибку после использования Angular Generator для создания нового компонента с именем product-alerts с помощью инструмента stackblitz.com.

'app-product-alerts' не является известным элементом:

ПОИСК: Другие тоже испытали это в начале августа 2021 года. На данный момент, похоже, это ошибка в StackBlitz IDE. https://github.com/angular/angular/issues/43020

Моя ситуация была немного другой. Я получал это сообщение об ошибке, но это произошло из-за того, что в моем модуле pages не было новой страницы, которую я создал.

Мои шаги:

  1. Создать новый компонент страницы
  2. Импортировать существующие компоненты в файл module.ts новой страницы
  3. Используйте селектор компонентов в HTML-файле новой страницы

Получил ошибку и застрял здесь. Последним шагом для меня было:

  1. Импортировать новый модуль страницы в файл pages.module.ts.

Теперь все работает как положено. На этот раз сообщение об ошибке оказалось не слишком полезным.

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

Это была ошибка ширины @angular language service: https://www.npmjs.com/package/@angular/ языковая служба

Я знаю, что это давно решенная проблема, но в моем случае у меня было другое решение. На самом деле это была ошибка, которую, возможно, совершил и вы, но не полностью заметили. Моя ошибка заключалась в том, что я случайно поместил модуль, например, MatChipsModule, MatAutoCompleteModule, в раздел объявлений; раздел, состоящий только из компонентов, например MainComponent, AboutComponent. Это сделало весь мой другой импорт неузнаваемым.

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

Иногда работает даже простой перезапуск IDE !! 😁 Столкнулся с той же проблемой, решенной перезапуском VS Code

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

Пример приложения «Тур героев» содержит HeroesComponent с селектором app-heroes. Приложение работало нормально при обслуживании, но ng test выдало следующее сообщение об ошибке: 'app-heroes' не является известным элементом. Добавление 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, сообщение перестало отображаться.

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

Например, если вы используете селектор в шаблоне ToDayComponent, вы должны объявить как ToDayComponent, так и DatepickerComponent в app.module.ts

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

But in the simple case where you want to use component A from component B when both are defined in the same module, you have to declare both components in the containing module for B to see A, and not only A.

Т.е. в my-module.module.ts

import { AComponent } from "./A/A.component";
import { BComponent } from "./B/B.component";

@NgModule({
  declarations: [
    AComponent,   // This is the one that we naturally think of adding ..
    BComponent,   // .. but forget this one and you get a "**'AComponent'** 
                  // is not a known element" error.
  ],
})

Предположительно у вас есть компонент:

product-list.component.ts:

import { Component } from '@angular/core';
    
    @Component({
        selector: 'pm-products',  
        templateUrl: './product-list.component.html'
    })
    
    
    export class ProductListComponent {
      pageTitle: string = 'product list';
    }

И вы получите такую ​​ошибку:

ОШИБКА в src / app / app.component.ts: 6: 3 - ошибка NG8001: 'pm-products' неизвестный элемент:

  1. Если pm-products является компонентом Angular, убедитесь, что он является частью этого модуля.

app.component.ts:

import { Component } from "@angular/core";
@Component({
  selector: 'pm-root', // 'pm-root'
  template: `
  

{{pageTitle}}

// not a known element ?
` }) export class AppComponent { pageTitle: string = 'Acme Product Management'; }

Убедитесь, что вы импортировали компонент:

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// --> add this import (you can click on the light bulb in the squiggly line in VS Code)
import { ProductListComponent } from './products/product-list.component'; 

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent // --> Add this line here

  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent],


})
export class AppModule { }

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

2022 WebDevInsider