कोणीय 2 'घटक' एक ज्ञात तत्व नहीं है

Question

मैं अन्य मॉड्यूल में AppModule के अंदर बनाए गए एक घटक का उपयोग करने की कोशिश कर रहा हूं। हालांकि मुझे निम्नलिखित त्रुटि मिलती है:

"अनकैप्ड (वादे में): त्रुटि: टेम्प्लेट पार्स त्रुटियां:

'संपर्क-बॉक्स' एक ज्ञात तत्व नहीं है:

1. यदि 'संपर्क-बॉक्स' एक कोणीय घटक है, तो सत्यापित करें कि यह इस मॉड्यूल का हिस्सा है।
2. यदि 'संपर्क-बॉक्स' एक वेब घटक है, तो इस संदेश को दबाने के लिए इस घटक के '@ NgModule.schemas' में 'CUSTOM_ELEMENTS_SCHEMA' जोड़ें।

मेरी परियोजना संरचना काफी सरल है:

मैं अपने पृष्ठों को पृष्ठ निर्देशिका में रखता हूं, जहां प्रत्येक पृष्ठ को अलग-अलग मॉड्यूल (जैसे ग्राहक-मॉड्यूल) में रखा जाता है और प्रत्येक मॉड्यूल में कई घटक होते हैं (जैसे ग्राहक-सूची-घटक, ग्राहक-जोड़-घटक और इसी तरह)। मैं अपने ContactBoxComponent का उपयोग उन घटकों के अंदर करना चाहता हूं (इसलिए उदाहरण के लिए ग्राहकों-ऐड-घटक के अंदर)।

जैसा कि आप देख सकते हैं कि मैंने विगेट्स डायरेक्टरी के अंदर कॉन्टैक्ट्स-बॉक्स कंपोनेंट बनाया है, इसलिए यह मूल रूप से AppModule के अंदर है। मैंने App.module.ts में ContactBoxComponent आयात जोड़ा और इसे AppModule की घोषणा सूची में डाल दिया। यह काम नहीं किया तो मैं अपनी समस्या googled और संपर्क सूची में निर्यात के रूप में अच्छी तरह से ContactBoxComponent गयी। मदद नहीं की। मैंने भी CustomerAddComponent में ContactBoxComponent डालने की कोशिश की और फिर दूसरे में (अलग-अलग मॉड्यूल से) लेकिन मुझे यह कहते हुए एक त्रुटि हुई कि कई घोषणाएँ हैं।

मैं क्या खो रहा हूँ?

Comments

आपकी फ़ोल्डर संरचना सरल नहीं है। यह भ्रमित करने वाला है। मैं एंगुलर स्टाइल गाइड (लिंक प्रदान नहीं किया गया b / c वे बदलते हैं) और उनके फ़ोल्डर संरचना सुझावों का उपयोग करने का सुझाव देंगे और फिर सुनिश्चित करें कि आप मॉड्यूल का सही उपयोग कर रहे हैं। यही इसका मतलब है। आप या तो कुछ बिंदु पर एप्लिकेशन द्वारा निगमित मॉड्यूल में अपने घटक का निर्यात या घोषणा नहीं कर रहे हैं।

— जोशुआ माइकल वैगनर

Answer 1

ये 5 चरण हैं, जब मुझे ऐसी त्रुटि मिली।

• क्या आप सुनिश्चित हैं कि नाम सही है? (घटक में परिभाषित चयनकर्ता की भी जाँच करें)
• एक मॉड्यूल में घटक घोषित करें?
• यदि यह किसी अन्य मॉड्यूल में है, तो घटक को निर्यात करें?
• यदि यह किसी अन्य मॉड्यूल में है, तो उस मॉड्यूल को आयात करें?
• पुनः प्रारंभ करें?

मैंने भी CustomerAddComponent में ContactBoxComponent डालने की कोशिश की और फिर दूसरे में (अलग-अलग मॉड्यूल से) लेकिन मुझे यह कहते हुए एक त्रुटि हुई कि कई घोषणाएँ हैं।

आप एक घटक को दो बार घोषित नहीं कर सकते। आपको अपने घटक को एक नए अलग मॉड्यूल में घोषित और निर्यात करना चाहिए। आगे आपको अपने मॉड्यूल का उपयोग करने के लिए हर मॉड्यूल में इस नए मॉड्यूल को आयात करना चाहिए।

यह बताना कठिन है कि आपको नया मॉड्यूल कब बनाना चाहिए और कब नहीं करना चाहिए। मैं आमतौर पर मेरे द्वारा उपयोग किए जाने वाले प्रत्येक घटक के लिए एक नया मॉड्यूल बनाता हूं। जब मेरे पास कुछ घटक होते हैं जो मैं लगभग हर जगह उपयोग करता हूं तो मैं उन्हें एक ही मॉड्यूल में डाल देता हूं। जब मेरे पास एक घटक होता है जिसका मैं पुन: उपयोग नहीं करता हूं तो मैं एक अलग मॉड्यूल नहीं बनाऊंगा जब तक मुझे कहीं और इसकी आवश्यकता न हो।

हालाँकि यह आपके सभी घटकों को एक मॉड्यूल में रखने के लिए लुभावना हो सकता है, यह प्रदर्शन के लिए बुरा है। विकसित करते समय, एक मॉड्यूल को हर बार परिवर्तन करने के लिए फिर से तैयार करना पड़ता है। जितना बड़ा मॉड्यूल (अधिक घटक) उतना ही अधिक समय। बड़े मॉड्यूल में एक छोटा सा बदलाव करना, एक छोटे मॉड्यूल में एक छोटा बदलाव करने की तुलना में अधिक समय लेता है।

Comments

आपके कदमों ने मेरी मदद नहीं की, लेकिन शायद यह इसलिए है क्योंकि मैं एंगुलर 2 के लिए बहुत नया हूं, इसलिए मैं उन्हें जवाब दूंगा और शायद हम एक साथ समाधान का पता लगाएंगे। मुझे यकीन है कि नाम सही है, मैंने AppModule में घटक घोषित किया, मैंने AppModule में घटक को निर्यात किया और cli को पुनरारंभ किया। मैंने अपने CustomerAddComponent में AppModule को आयात करने की कोशिश की, लेकिन इसमें त्रुटि हुई: अधिकतम कॉल स्टैक आकार पार हो गया (मुझे लगता है कि हम Angular 2 में AppModule आयात नहीं करते हैं)।

— अरणा

आपको अपने घटक को एक अलग मॉड्यूल में घोषित करना और निर्यात करना चाहिए, न कि AppModule में। आगे आपको अपने कंपोनेंट का उपयोग करने के लिए हर उस नए मॉड्यूल को आयात करना चाहिए, जिस पर आप wnat कर रहे हैं।

— रॉबिन दिजाखोफ

ठीक है, मैं इसे अभी प्राप्त करता हूं। एकमात्र सवाल यह है: जब मैं नए बनाए गए मॉड्यूल (WidgetsModule कहता हूं) को आयात करता हूं तो यह आआआआल के भीतर घोषित किए गए घटकों को लोड करेगा? वह कुछ ओवरहेड है लेकिन शायद मैं कुछ गलत समझ रहा हूं। मैं निश्चित रूप से कॉन्टेक्टबॉक्समॉड्यूल बना सकता हूं लेकिन यह एक छोटे घटक के लिए बहुत कुछ है। कोई संकेत?

— अरणा

यह सही है। और यह बताना कठिन है कि आपको नया मॉड्यूल कब बनाना चाहिए और कब नहीं करना चाहिए। मैं आमतौर पर मेरे द्वारा उपयोग किए जाने वाले प्रत्येक घटक के लिए एक नया मॉड्यूल बनाता हूं। जब मेरे पास कुछ घटक होते हैं जो मैं लगभग हर जगह उपयोग करता हूं तो मैं उन्हें एक ही मॉड्यूल में डाल देता हूं। जब मेरे पास एक घटक होता है जिसका मैं पुन: उपयोग नहीं करता हूं तो मैं एक अलग मॉड्यूल नहीं बनाऊंगा जब तक मुझे कहीं और इसकी आवश्यकता न हो।

— रॉबिन दिजाखोफ

"यदि यह किसी अन्य मॉड्यूल में है, तो घटक को निर्यात करें?" मेरे लिए काम किया!

— स्टीवन

Answer 2

मेरा मुद्दा भी ऐसा ही था। यह पता चला है कि 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();
  });
}

Comments

यह मेरी समस्या थी - परीक्षण फ़ाइल में आयात जोड़ना भूल गया।

— सेलोरियो

Answer 3

मैं सिर्फ एक ही मुद्दा था। यहां पोस्ट किए गए कुछ समाधानों को आजमाने से पहले, आप जांचना चाहेंगे कि घटक वास्तव में काम नहीं करता है या नहीं। मेरे लिए, त्रुटि मेरे आईडीई (वेबस्टॉर्म) में दिखाई गई थी, लेकिन यह पता चला कि जब मैंने इसे ब्राउज़र में चलाया तो कोड ने पूरी तरह से काम किया।

जब मैंने टर्मिनल को बंद कर दिया (जो एनजी सर्व चल रहा था) और अपनी आईडीई को फिर से शुरू किया, तो संदेश दिखाई देना बंद हो गया।

Comments

समस्या ide-specific है। मुझे वेबस्टॉर्म के साथ भी यही समस्या है। वेबस्टॉर्म को कोणीय-क्ली के साथ किए गए परिवर्तनों के लिए सूचित नहीं किया जाता है, इसलिए आपको किसी भी नए घटकों को देखने के लिए आईडीई को फिर से शुरू करना होगा!

— स्कीबॉक्स

मुझे वीएस कोड के साथ भी यही समस्या है लेकिन Ionic 2 के साथ। एक पृष्ठ में यह काम करता है। एक घटक में त्रुटि आयन है- * एक ज्ञात तत्व नहीं है । मैंने आयनिक सेवा को रोकने और आईडीई को फिर से शुरू करने के लिए आपके सुझाव की कोशिश की है , लेकिन कुछ भी काम नहीं करता है। क्या आप इसके लिए एक और उपाय जानते हैं? वैसे - कोड वैसे भी काम करता है।

— सेबेस्टियन ऑर्टमैन

VSCode के साथ एक ही मुद्दा था। संपादक को पुनरारंभ करने के बाद संदेश चला गया।

— quicklikerabbit

Answer 4

मेरे पास एक ही मुद्दा चौड़ाई php तूफान संस्करण 2017.3 है। यह मेरे लिए इसे ठीक करें: intellij सपोर्ट फोरम

यह एक त्रुटि चौड़ाई @ भाषा भाषा सेवा थी: https://www.npmjs.com/package/@angular/language-service

Comments

इसने इसे वेबस्टॉर्म 2018.3 के लिए भी तय किया

— मोहम्मद महमूद

Answer 5

मेरे मामले में, मेरे ऐप में मॉड्यूल की कई परतें थीं, इसलिए मैं जिस मॉड्यूल को आयात करने की कोशिश कर रहा था, उसे मॉड्यूल माता-पिता में जोड़ा जाना था जो वास्तव में इसका उपयोग करते थे pages.module.ts, इसके बजाय app.module.ts।

Answer 6

मुझे एक ही मुद्दा मिला, और यह इसलिए हो रहा था क्योंकि अलग-अलग फीचर मॉड्यूल में गलती से यह घटक शामिल था। जब इसे दूसरे फीचर से हटाया गया तो इसने काम किया!

Answer 7

मेरे मामले में समस्या मॉड्यूल में घटक घोषणा गायब थी, लेकिन घोषणा को जोड़ने के बाद भी त्रुटि बनी रही। मैंने सर्वर बंद कर दिया था और त्रुटि दूर करने के लिए वीएस कोड में पूरे प्रोजेक्ट का पुनर्निर्माण किया।

Answer 8

यह दृढ़ ढांचा मुझे पागल कर रहा है। यह देखते हुए कि आपने SAME मॉड्यूल के अन्य घटक भाग के टेम्पलेट में कस्टम घटक को परिभाषित किया है, तो आपको मॉड्यूल (जैसे app.module.ts) में निर्यात का उपयोग करने की आवश्यकता नहीं है। आपको बस उपरोक्त मॉड्यूल के @NgModule निर्देश में घोषणा को निर्दिष्ट करने की आवश्यकता है:

// app.module.ts

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

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

आपको टेम्पलेट में कस्टम घटक का उपयोग करने के लिए (इस उदाहरण में) ( JsonInputComponentइस उदाहरण में) आयात करने की आवश्यकता नहीं है । आपको बस उस मॉड्यूल नाम के साथ कस्टम घटक को उपसर्ग करने की आवश्यकता है जिसमें दोनों घटकों को परिभाषित किया गया है (उदाहरण के लिए ऐप):AppComponentJsonInputComponentAppComponent

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

नोटिस अनुप्रयोग- json- इनपुट नहीं json-input!

यहाँ डेमो: https://github.com/lovefamilychildrenhappiness/ngularCustomComponentValidation

Answer 9

मैं एंगुलर की शुरुआत कर रहा हूं और मेरे मामले में, मुद्दा यह था कि मैंने 'इम्पोर्ट' स्टेटमेंट जोड़ने के बाद फाइल को सेव नहीं किया था।

Answer 10

रूट मॉड्यूल (इसे उत्तर के रूप में नहीं देखा)

पहला चेक: यदि आपने अपने मॉड्यूल के अंदर घटक को घोषित किया है और निर्यात किया है, तो उस मॉड्यूल को आयात किया है जहां आप इसका उपयोग करना चाहते हैं और घटक का नाम HTML के अंदर सही तरीके से रखा है।

अन्यथा, आप अपने रूटिंग मॉड्यूल के अंदर एक मॉड्यूल को याद कर सकते हैं:
जब आपके पास एक रूट के साथ एक रूटिंग मॉड्यूल होता है जो किसी अन्य मॉड्यूल से एक घटक के लिए मार्ग करता है, तो यह महत्वपूर्ण है कि आप उस मॉड्यूल मॉड्यूल के भीतर उस मॉड्यूल को आयात करें। अन्यथा कोणीय सीएलआई त्रुटि दिखाएगा 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आयात के रूप में जोड़ना होगा , उसके बाद आयातित साइडबार घटक काम करेगा!

Answer 11

मैं उसी मुद्दे का सामना कर रहा था। मेरे मामले में मैं app.module.ts में पैरेंट घटक घोषित करना भूल गया हूं

एक उदाहरण के रूप में यदि आप टेम्पलेट <app-datapicker>में चयनकर्ता का उपयोग कर रहे हैं ToDayComponent, तो आपको दोनों ToDayComponentऔर app.module.tsDatepickerComponent में घोषित करना चाहिए

Answer 12

माना जाता है कि आपके पास एक घटक है:

उत्पाद-list.component.ts:

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

और आपको यह त्रुटि मिलती है:

ERROR इन src / app / app.component.ts: 6: 3 - error NG8001: 'pm-products' एक ज्ञात तत्व नहीं है:

1. यदि 'पीएम-उत्पाद' एक कोणीय घटक है, तो सत्यापित करें कि यह इस मॉड्यूल का हिस्सा है।

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

Answer 13

यह प्रश्न पुराना और अजीब लग सकता है, लेकिन जब मैं एक मॉड्यूल (आलसी लोडिंग) लोड करने की कोशिश कर रहा था और उसी त्रुटि को प्राप्त कर रहा था, तो मुझे एहसास हुआ कि मैं उस घटक के लिए एक निर्यात खंड को याद कर रहा था जिसे एक बड़े मॉड्यूल के हिस्से के रूप में भेजा गया था।

यह Angular.io लिंक बताता है कि क्यों : एक मॉड्यूल के अंदर घटक / सेवाएं, डिफ़ॉल्ट रूप से निजी (या संरक्षित) रहती हैं। उन्हें सार्वजनिक करने के लिए, आपको उन्हें निर्यात करना होगा।

@ लाइव-लव कोड नमूने के साथ @ रॉबिन जिकोफ के उत्तर पर विस्तार करते हुए , यह वही है जो मेरे मामले में तकनीकी रूप से गायब था (कोणीय 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 { }