Próbuję użyć komponentu, który utworzyłem wewnątrz AppModule w innych modułach. Pojawia się jednak następujący błąd:

„Nieprzechwycony (obiecany): Błąd: błędy analizy szablonu:

„skrzynka kontaktów” nie jest znanym elementem:

1. Jeśli „skrzynka kontaktów” jest komponentem kątowym, sprawdź, czy jest częścią tego modułu.
2. Jeśli „contact-box” jest składnikiem sieciowym, dodaj „CUSTOM_ELEMENTS_SCHEMA” do „@ NgModule.schemas” tego komponentu, aby ukryć ten komunikat.

Struktura mojego projektu jest dość prosta:

Trzymam swoje strony w katalogu stron, gdzie każda strona jest przechowywana w innym module (np. Module klientów), a każdy moduł ma wiele komponentów (takich jak komponent listy klientów, komponent dodawania klientów i tak dalej). Chcę używać mojego komponentu ContactBoxComponent wewnątrz tych komponentów (na przykład wewnątrz komponentu dodawania klientów).

Jak widać, utworzyłem komponent skrzynki kontaktów w katalogu widżetów, więc jest w zasadzie wewnątrz AppModule. Dodałem import ContactBoxComponent do app.module.ts i umieściłem go na liście deklaracji AppModule. To nie zadziałało, więc wygooglowałem mój problem i dodałem ContactBoxComponent również do listy eksportu. Nie pomogło. Próbowałem też umieścić ContactBoxComponent w CustomersAddComponent, a następnie w innym (z innego modułu), ale pojawił się błąd informujący, że jest wiele deklaracji.

czego mi brakuje?

Oto 5 kroków, które wykonuję, gdy mam taki błąd.

• Czy na pewno nazwa jest poprawna? (sprawdź także selektor zdefiniowany w komponencie)
• Zadeklarować komponent w module?
• Jeśli jest w innym module, wyeksportować komponent?
• Jeśli jest w innym module, zaimportować ten moduł?
• Zrestartować CLI?

Próbowałem też umieścić ContactBoxComponent w CustomersAddComponent, a następnie w innym (z innego modułu), ale pojawił się błąd informujący, że jest wiele deklaracji.

Nie możesz dwukrotnie zadeklarować komponentu. Powinieneś zadeklarować i wyeksportować swój komponent w nowym oddzielnym module. Następnie powinieneś zaimportować ten nowy moduł w każdym module, którego chcesz użyć.

Trudno powiedzieć, kiedy należy stworzyć nowy moduł, a kiedy nie. Zwykle tworzę nowy moduł dla każdego komponentu, którego ponownie używam. Kiedy mam jakieś komponenty, których używam prawie wszędzie, umieszczam je w jednym module. Kiedy mam komponent, którego nie używam ponownie, nie utworzę oddzielnego modułu, dopóki nie będę go potrzebował gdzie indziej.

Chociaż może być kuszące umieszczenie wszystkich komponentów w jednym module, jest to niekorzystne dla wydajności. Podczas programowania moduł musi być ponownie kompilowany za każdym razem, gdy wprowadzane są zmiany. Im większy moduł (więcej komponentów), tym więcej czasu zajmuje. Dokonanie małej zmiany w dużym module zajmuje więcej czasu niż dokonanie małej zmiany w małym module.

Miałem podobny problem. Okazało się, że ng generate component(używając CLI w wersji 7.1.4) dodaje deklarację dla komponentu potomnego do AppModule, ale nie do modułu TestBed, który go emuluje.

Przykładowa aplikacja „Tour of Heroes” zawiera HeroesComponentselektor with app-heroes. Aplikacja ran porządku kiedy służył, ale ng testprodukowane ten komunikat o błędzie: 'app-heroes' is not a known element. Dodanie HeroesComponentręcznie do deklaracji w configureTestingModule(in app.component.spec.ts) eliminuje ten błąd.

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();
  });
}

Właśnie miałem dokładnie ten sam problem. Przed wypróbowaniem niektórych z zamieszczonych tutaj rozwiązań możesz sprawdzić, czy komponent naprawdę nie działa. U mnie błąd pojawił się w moim IDE (WebStorm), ale okazało się, że kod działał idealnie po uruchomieniu go w przeglądarce.

Po zamknięciu terminala (na którym działał ng serv) i ponownym uruchomieniu IDE, komunikat przestał się pojawiać.

Mam tę samą szerokość problemu php Storm w wersji 2017.3. Napraw to dla mnie: forum pomocy Intellij

To był błąd o szerokości @ usługa języka kątowego: https://www.npmjs.com/package/@angular/language-service

W moim przypadku moja aplikacja miała wiele warstw modułów, więc moduł, który próbowałem zaimportować, musiał zostać dodany do modułu nadrzędnego modułu, który faktycznie go używał pages.module.ts, zamiast app.module.ts.

Otrzymałem ten sam problem i działo się to, ponieważ inny moduł funkcji przez pomyłkę zawierał ten komponent. Po usunięciu go z innej funkcji działało!

Problemem w moim przypadku był brak deklaracji komponentu w module, ale nawet po dodaniu deklaracji błąd nie ustąpił. Musiałem zatrzymać serwer i odbudować cały projekt w kodzie VS, aby błąd zniknął.

Te zawiłe ramy doprowadzają mnie do szału. Biorąc pod uwagę, że zdefiniowałeś komponent niestandardowy w szablonie innej części komponentu modułu SAMEJ, nie musisz używać eksportów w module (np. App.module.ts). Wystarczy określić deklarację w dyrektywie @NgModule wspomnianego modułu:

// app.module.ts

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

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

NIE musisz importować JsonInputComponent(w tym przykładzie) do AppComponent(w tym przykładzie), aby użyć JsonInputComponentkomponentu niestandardowego w AppComponentszablonie. Wystarczy poprzedzić komponent niestandardowy nazwą modułu, którego oba komponenty zostały zdefiniowane (np. Aplikacja):

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

Zwróć uwagę, że app-json-input nie json-input!

Demo tutaj: https://github.com/lovefamilychildrenhappiness/AngularCustomComponentValidation

Rozpoczynam Angular iw moim przypadku problem polegał na tym, że nie zapisałem pliku po dodaniu instrukcji „import”.

Moduły tras (nie widziałem tego jako odpowiedzi)

Pierwsza kontrola: jeśli zadeklarowałeś - i wyeksportowałeś komponent wewnątrz jego modułu, zaimportuj moduł, w którym chcesz go użyć i poprawnie nazwij komponent w HTML.

W przeciwnym razie możesz przegapić moduł wewnątrz modułu routingu:
jeśli masz moduł routingu z trasą, która kieruje do komponentu z innego modułu, ważne jest, aby zaimportować ten moduł w ramach tego modułu trasy. W przeciwnym razie kątowe CLI pokaże błąd: component is not a known element.

Na przykład

1) Posiadające następującą strukturę projektu:

├───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) Wewnątrz todos-routing.module.tsmasz trasę do edit.todo.component.ts(bez importowania jego modułu):

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

Trasa będzie działać dobrze! Jednak podczas importowania sidebar.module.tswewnątrz edit-todo.module.tsdostaniesz błąd: app-sidebar is not a known element.

Poprawka: Ponieważ dodałeś trasę do edit-todo.component.tskroku 2, będziesz musiał dodać edit-todo.module.tsjako import, po czym importowany komponent paska bocznego będzie działał!

Miałem ten sam problem. W moim przypadku zapomniałem zadeklarować komponent Parent w app.module.ts

Jako przykład, jeśli używasz <app-datapicker>selektor w ToDayComponentszablonie, należy zadeklarować zarówno ToDayComponenti DatepickerComponentw app.module.ts

Podobno masz komponent:

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';
    }

Otrzymujesz ten błąd:

BŁĄD w src / app / app.component.ts: 6: 3 - błąd NG8001: „pm-products” nie jest znanym elementem:

1. Jeśli „pm-products” jest komponentem Angular, sprawdź, czy jest częścią tego modułu.

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';
}

Upewnij się, że importujesz komponent:

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 { }

To pytanie może wydawać się stare i dziwne, ale kiedy próbowałem załadować moduł (ładowanie leniwe) i otrzymałem ten sam błąd, zdałem sobie sprawę, że brakuje mi klauzuli eksportu dla komponentu, który został wysłany jako część większego modułu.

To łącze Angular.io wyjaśnia, dlaczego : Komponenty / usługi w module domyślnie pozostają prywatne (lub chronione). Aby je upublicznić, musisz je wyeksportować.

Rozwijając na odpowiedź @Robin Djikof jest z @ kodu live-miłosny próbki , to co zostało technicznie brakuje w moim przypadku (kątowa 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 { }