2017-06-08 24 views
25

Tôi đang cố sử dụng thành phần tôi đã tạo bên trong AppModule trong các mô-đun khác. Tôi nhận được lỗi sau mặc dù:Góc 2 'thành phần' không phải là một phần tử đã biết

"Uncaught (in promise): Error: Template parse errors:

'contacts-box' is not a known element:

  1. If 'contacts-box' is an Angular component, then verify that it is part of this module.
  2. If 'contacts-box' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

cấu trúc dự án của tôi là khá đơn giản: Overall project structure

tôi giữ trang của tôi trong trang thư mục, trong đó mỗi trang sẽ được giữ trong mô-đun khác nhau (ví dụ như khách hàng có mô-đun) và mỗi mô-đun có nhiều thành phần (như danh sách khách hàng-thành phần, khách hàng, thành phần bổ sung, v.v.). Tôi muốn sử dụng ContactBoxComponent của tôi bên trong các thành phần đó (vì vậy bên trong khách hàng-thêm-thành phần chẳng hạn).

Như bạn có thể thấy, tôi đã tạo thành phần hộp danh bạ bên trong thư mục tiện ích nên về cơ bản nó nằm trong AppModule. Tôi đã thêm nhập ContactBoxComponent vào app.module.ts và đặt nó vào danh sách khai báo của AppModule. Nó đã không làm việc vì vậy tôi googled vấn đề của tôi và thêm ContactBoxComponent để xuất danh sách là tốt. Không giúp được gì. Tôi cũng đã thử đặt ContactBoxComponent trong CustomersAddComponent và sau đó trong một số khác (từ mô-đun khác nhau) nhưng tôi nhận được một lỗi nói rằng có nhiều khai báo.

Tôi đang thiếu gì?

Trả lời

40

Đây là 5 bước tôi thực hiện khi gặp lỗi như vậy.

  • Bạn có chắc chắn tên đúng không? (cũng kiểm tra bộ chọn được xác định trong thành phần)
  • Khai báo thành phần trong mô-đun?
  • Nếu nó nằm trong mô-đun khác, hãy xuất thành phần?
  • Nếu nó nằm trong một mô-đun khác, hãy nhập mô-đun đó?
  • Khởi động lại cli?

I also tried putting ContactBoxComponent in CustomersAddComponent and then in another one (from different module) but I got an error saying there are multiple declarations.

Bạn không thể khai báo thành phần hai lần.

+0

bước của bạn không giúp tôi nhưng có lẽ đó là vì tôi khá mới để kiễu góc 2, vì vậy tôi sẽ trả lời chúng và có lẽ chúng ta sẽ tìm ra giải pháp cùng nhau. Tôi chắc chắn tên là chính xác, tôi tuyên bố các thành phần trong AppModule, tôi xuất khẩu các thành phần trong AppModule và khởi động lại cli. Tôi cũng đã cố gắng nhập khẩu AppModule trong khách hàng của tôiAddComponent nhưng nó dẫn đến Lỗi: Kích thước ngăn xếp cuộc gọi tối đa vượt quá (tôi đoán chúng tôi không nhập AppModule trong Góc 2). – Aranha

+2

Bạn nên khai báo và xuất khẩu thành phần của bạn trong một mô-đun sepperate, Không phải trong AppModule. Tiếp theo, bạn nên nhập mô-đun mới này trong mọi mô-đun bạn muốn sử dụng thành phần của mình. –

+1

OK, tôi hiểu ngay bây giờ. Câu hỏi duy nhất là: khi tôi nhập khẩu các mô-đun mới được tạo ra (nói WidgetsModule) nó sẽ tải aaaaaall các thành phần được khai báo bên trong, phải không? Đó là một số chi phí nhưng có lẽ tôi hiểu nhầm điều gì đó. Tôi có thể tất nhiên tạo ContactsBoxModule nhưng đó là rất nhiều cho một thành phần nhỏ. Bất kỳ gợi ý nào? – Aranha

3

Tôi vừa gặp sự cố tương tự. Trước khi thử một số giải pháp được đăng ở đây, bạn có thể muốn kiểm tra xem thành phần thực sự có hoạt động hay không. Đối với tôi, lỗi được hiển thị trong IDE của tôi (WebStorm), nhưng hóa ra là mã hoạt động hoàn hảo khi tôi chạy nó trong trình duyệt.

Sau khi tôi tắt thiết bị đầu cuối (đang chạy ng phục vụ) khởi động lại IDE của tôi, thông báo ngừng hiển thị.

+0

Vấn đề không phải là cụ thể. Tôi gặp vấn đề tương tự với webstorm. Webstorm không được thông báo về các thay đổi được thực hiện với angular-cli, do đó bạn phải khởi động lại IDE để làm cho nó 'thấy' bất kỳ thành phần mới nào! – skiabox

+0

Tôi có cùng một vấn đề với VS Mã nhưng với Ionic 2. Trong một trang nó hoạt động. Trong một thành phần có lỗi ** ion- * không phải là một phần tử đã biết **. Tôi đã thử đề xuất của bạn để dừng ** phục vụ ion ** và khởi động lại IDE, nhưng không có gì hoạt động. Bạn có biết một giải pháp khác cho việc này không? Nhân tiện - mã vẫn hoạt động. –

Các vấn đề liên quan