Я намагаюся використовувати компонент, створений мною в AppModule, в інших модулях. Я отримую таку помилку:

"Uncaught (в обіцянні): Помилка: помилки аналізу шаблону:

"вікно контактів" не є відомим елементом:

1. Якщо "вікно контактів" є кутовим компонентом, переконайтеся, що воно є частиною цього модуля.
2. Якщо "вікно контактів" - це веб-компонент, додайте "CUSTOM_ELEMENTS_SCHEMA" до "@ NgModule.schemas" цього компонента, щоб придушити це повідомлення.

Моя структура проекту досить проста:

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

Як ви бачите, я створив компонент вікна контактів всередині каталогу віджетів, так що він в основному знаходиться в AppModule. Я додав імпорт ContactBoxComponent до app.module.ts і помістив його у список декларацій AppModule. Це не спрацювало, тому я гуглив свою проблему і додав ContactBoxComponent до експорту списку. Не допомогло. Я також спробував поставити ContactBoxComponent в CustomersAddComponent, а потім в інший (з іншого модуля), але я отримав помилку, сказавши, що існує кілька декларацій.

Що я пропускаю?

Це 5 кроків, які я виконую, коли отримав таку помилку.

• Ви впевнені, що ім’я правильне? (також перевірте селектор, визначений у компоненті)
• Декларувати компонент у модулі?
• Якщо він знаходиться в іншому модулі, експортуйте компонент?
• Якщо він знаходиться в іншому модулі, імпортувати цей модуль?
• Перезапустити кліп?

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

Ви не можете оголосити компонент двічі. Вам слід декларувати та експортувати свій компонент у новому окремому модулі. Далі слід імпортувати цей новий модуль у кожен модуль, у якому ви хочете використовувати свій компонент.

Важко сказати, коли слід створити новий модуль, а коли не слід. Зазвичай я створюю новий модуль для кожного компонента, який я повторно використовую. Коли у мене є компоненти, які я використовую майже скрізь, я розміщую їх в одному модулі. Коли у мене є компонент, який я не повторно використовую, я не буду створювати окремий модуль, поки мені це не потрібно десь в іншому місці.

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

У мене було подібне питання. Виявилося, що 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();
  });
}

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

Після того, як я вимкнув термінал (на якому працював сервіс) і перезапустив IDE, повідомлення перестало з'являтися.

У мене однакова ширина випуску php storm версії 2017.3. Це виправте для мене: форум підтримки Intellij

Це була ширина помилки @angular language: https://www.npmjs.com/package/@angular/language-service

У моєму випадку в моєму додатку було кілька шарів модулів, тому модуль, який я намагався імпортувати, потрібно було додати до батьківського модуля, який фактично ним користувався pages.module.ts, а не app.module.ts.

У мене з'явився той самий випуск, і це сталося через те, що різні функції модуля включили цей компонент помилково. Коли вилучили її з іншої функції, вона працювала!

Проблемою в моєму випадку було відсутність декларації компонента в модулі, але навіть після додавання декларації помилка зберігалася. Я повинен був зупинити сервер і відновити весь проект у коді VS, щоб помилка усунулася.

Цей заплутаний каркас зводить мене з душі. Зважаючи на те, що ви визначили спеціальний компонент у шаблоні іншої складової частини модуля SAME, вам не потрібно використовувати експорт у модулі (наприклад, app.module.ts). Вам просто потрібно вказати декларацію в директиві @NgModule згаданого вище модуля:

// app.module.ts

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

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

НЕ потрібно імпортувати JsonInputComponent(у цьому прикладі) в AppComponent(у цьому прикладі), щоб використовувати JsonInputComponentспеціальний компонент у AppComponentшаблоні. Вам просто потрібно встановити спеціальний компонент з назвою модуля, для якого були визначені обидва компоненти (наприклад, додаток):

<form [formGroup]="reactiveForm">
  <app-json-input formControlName="result"></app-json-input>
</form>

Помітьте додаток json-input не json-input!

Демонстрація тут: https://github.com/lovefamilychildrenhappiness/AngularCustomComponentValidation

Я починаю Angular, і в моєму випадку проблема полягала в тому, що я не зберегла файл після додавання заяви "import".

Модулі маршруту (не розглядали це як відповідь)

Перша перевірка: якщо ви декларували та експортували компонент всередині його модуля, імпортували модуль там, де ви хочете його використовувати, і правильно назвали компонент всередині HTML.

В іншому випадку ви можете пропустити модуль всередині вашого модуля маршрутизації:
Коли у вас є модуль маршрутизації з маршрутом, який спрямовується до компонента з іншого модуля, важливо, щоб ви імпортували цей модуль у цей модуль маршруту. Інакше кутовий CLI покаже помилку:component is not a known element .

Наприклад

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 is not a known element .

Виправлення: Оскільки ви додали маршрут до edit-todo.component.tsкроку 2, вам доведеться додати edit-todo.module.tsяк імпорт, після чого імпортований компонент бічної панелі буде працювати!

Я стикався з тим же питанням. У моєму випадку я забув оголосити батьківський компонент у app.module.ts

Як приклад, якщо ви використовуєте <app-datapicker>селектор в ToDayComponentшаблоні, вам слід оголосити і те, ToDayComponentі DatepickerComponentв app.module.ts

Нібито у вас є компонент:

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" є кутовим компонентом, переконайтесь, що воно є частиною цього модуля.

app.component.ts:

import { Component } from "@angular/core";
@Component({
  selector: 'pm-root', // 'pm-root'
  template: `
  <div><h1>{{pageTitle}}</h1>
  <pm-products></pm-products> // not a known element ?
  </div>
  `
})
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 { }

Це питання може здатися старим і дивним, але, коли я намагався завантажити модуль (ледаче завантаження) і отримав ту саму помилку, я зрозумів, що мені не вистачає застереження про експорт компонента, що постачається як частина більшого модуля.

Це посилання Angular.io пояснює, чому : компоненти / послуги всередині модуля залишаються приватними (або захищеними) за замовчуванням. Щоб зробити їх загальнодоступними, вам доведеться експортувати їх.

Розширюючись на відповідь @Robin Djikof із зразком коду @ live-love , це технічно не вистачало в моєму випадку (кутовий 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 { }