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:
- Jeśli „skrzynka kontaktów” jest komponentem kątowym, sprawdź, czy jest częścią tego modułu.
- 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?
Odpowiedzi:
Oto 5 kroków, które wykonuję, gdy mam taki błąd.
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.
źródło
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
HeroesComponent
selektor withapp-heroes
. Aplikacja ran porządku kiedy służył, aleng test
produkowane ten komunikat o błędzie:'app-heroes' is not a known element
. DodanieHeroesComponent
ręcznie do deklaracji wconfigureTestingModule
(inapp.component.spec.ts
) eliminuje ten błąd.źródło
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ć.
źródło
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
źródło
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
, zamiastapp.module.ts
.źródło
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!
źródł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ął.
źródło
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:
NIE musisz importować
JsonInputComponent
(w tym przykładzie) doAppComponent
(w tym przykładzie), aby użyćJsonInputComponent
komponentu niestandardowego wAppComponent
szablonie. Wystarczy poprzedzić komponent niestandardowy nazwą modułu, którego oba komponenty zostały zdefiniowane (np. Aplikacja):Zwróć uwagę, że app-json-input nie json-input!
Demo tutaj: https://github.com/lovefamilychildrenhappiness/AngularCustomComponentValidation
źródło
Rozpoczynam Angular iw moim przypadku problem polegał na tym, że nie zapisałem pliku po dodaniu instrukcji „import”.
źródło
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:
2) Wewnątrz
todos-routing.module.ts
masz trasę doedit.todo.component.ts
(bez importowania jego modułu):Trasa będzie działać dobrze! Jednak podczas importowania
sidebar.module.ts
wewnątrzedit-todo.module.ts
dostaniesz błąd:app-sidebar is not a known element
.Poprawka: Ponieważ dodałeś trasę do
edit-todo.component.ts
kroku 2, będziesz musiał dodaćedit-todo.module.ts
jako import, po czym importowany komponent paska bocznego będzie działał!źródło
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 wToDayComponent
szablonie, należy zadeklarować zarównoToDayComponent
iDatepickerComponent
w app.module.tsźródło
Podobno masz komponent:
product-list.component.ts:
Otrzymujesz ten błąd:
app.component.ts:
Upewnij się, że importujesz komponent:
źródło
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):
źródło