यदि '<चयनकर्ता>' एक कोणीय घटक है, तो सत्यापित करें कि यह इस मॉड्यूल का हिस्सा है

Question

मैं Angular2 में नया हूं। मैंने एक घटक बनाने की कोशिश की है लेकिन एक त्रुटि दिखा रहा है।

यह app.component.tsफाइल है।

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component.component';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  directives: [MyComponentComponent]
})
export class AppComponent { name = 'Sam' }

यह वह घटक है जिसे मैं बनाना चाहता हूं।

import { Component } from '@angular/core';

@Component({
selector: 'my-component',
template: `
    <p>This is my article</p>
`
})

export class MyComponentComponent {

}

दो त्रुटियाँ दिखा रहा है:

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

कृपया मदद कीजिए।

Answer 1

आपका MyComponentComponentमें होना चाहिए MyComponentModule।

और MyComponentModule, आपको MyComponentComponent"निर्यात" के अंदर रखना चाहिए ।

कुछ इस तरह, नीचे कोड देखें।

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

और जगह MyComponentModuleमें importsमें app.module.tsइस तरह (नीचे दिए गए कोड को देखें)।

import { MyComponentModule } from 'your/file/path';

@NgModule({
   imports: [MyComponentModule]
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule {}

ऐसा करने के बाद, आपके घटक का चयनकर्ता अब ऐप द्वारा पहचाना जा सकता है।

आप इसके बारे में और अधिक जान सकते हैं: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

चीयर्स!

Comments

यदि आप अभी भी समस्याएँ हैं, तो अपने घटक की .ts फ़ाइल में घोषित अपने चयनकर्ता की जाँच करना न भूलें। जब आप अपने घटक को माता-पिता की HTML फ़ाइल में रखते हैं, तो आप html कोड में "app-" जोड़ना भूल गए होंगे।

— जारेड

मेरे पास @Input नाम गलत होने के कारण यह त्रुटि हुई है। बहुत भ्रामक है, इसलिए समस्या निवारण करते समय अपने घटक टैग में इनपुट हटा दें।

— बेन रेसिकॉट

मैं अभी भी इस के साथ मुद्दों कर रहा हूँ। मैं कोणीय सामग्री / रेडियो से MatRadioModule आयात कर रहा हूं और उस मॉड्यूल में निर्देश इस त्रुटि को फेंक रहे हैं।

— सौत्रित्र दास गुप्ता

यह अब कोणीय के नवीनतम संस्करण के लिए मान्य नहीं है (मैंने इसे v.8 पर परीक्षण किया)

— दानी

Answer 2

शायद यह htmlटैग घटक के नाम के लिए है

आप htmlकुछ इस तरह से उपयोग करें<mycomponent></mycomponent>

आपको इसका इस्तेमाल जरूर करना चाहिए <app-mycomponent></app-mycomponent>

Comments

htmlटैग निर्धारित selectorसंपत्ति का नाम । इस मामले में है my-component।

— टॉमाज़ जैकब रूप

Answer 3

क्या आप इसे अपनी app.module.tsतरह से आयात कर रहे हैं और निर्देशों को थोड़ा हटा दें: -

@NgModule({
    bootstrap: [AppComponent],
    imports: [MyComponentModule],// or whatever the name of the module is that declares your component.

    declarations: [AppComponent],
    providers: []
})
export class AppModule {}

आपका ऐसा MyComponentModuleहोना चाहिए: -

@NgModule({
    imports: [],
    exports: [MyComponentComponent],
    declarations: [MyComponentComponent],
    providers: [],
})
export class MyComponentModule {
}

Comments

आप के बारे में भूल गएexports

— Tomasz Jakub Rup

इससे मुझे मदद मिली क्योंकि मैं तृतीय पक्ष कोणीय घटक का आयात और निर्यात करने में सक्षम था। धन्यवाद

— शुभम अरोरा

Answer 4

अपने चयनकर्ता को अपने फ़ाइल नाम.कॉम .entent.ts में जांचें

विभिन्न HTML फ़ाइलों में टैग का उपयोग करके मैं कहूंगा

<my-first-component></my-first-component>

होना चाहिए

<app-my-first-component></app-my-first-component>

उदाहरण

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

Answer 5

मेरे मामले में मैं एक घटक के लिए इकाई परीक्षण लिख रहा था जो उप-घटकों का उपयोग करता है, और मैं यह सुनिश्चित करने के लिए परीक्षण लिख रहा था कि उन सब-कम्यूटर टेम्पलेट में थे:

it('should include the interview selection subview', () => {
    expect(fixture.debugElement.query(By.css('app-interview')))
    .toBeTruthy()  
  }); 

मुझे कोई त्रुटि नहीं मिली, लेकिन एक चेतावनी:

चेतावनी: '' ऐप-इंटरव्यू '' ज्ञात तत्व नहीं है:

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

इसके अलावा, उपसंचालक परीक्षण के दौरान ब्राउज़र के अंदर नहीं दिखा।

मैं ng g c newcomponentसभी घटकों को उत्पन्न करता था, इसलिए उन्हें पहले से ही अपामार्ग में घोषित किया गया था, लेकिन परीक्षण मॉड्यूल नहीं था कि जिस घटक के लिए मैं कल्पना कर रहा था।

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditorComponent,
        InterviewComponent]
    })
    .compileComponents();
  }));

Answer 6

आपको अपने MyComponentComponent को अपने AppComponent के एक ही मॉड्यूल में घोषित करना होगा।

import { AppComponent } from '...';
import { MyComponentComponent } from '...';

@NgModule({
   declarations: [ AppComponent, MyComponentComponent ],
   bootstrap: [ AppComponent ]
})
export class AppModule {}

Answer 7

1. अपने MyComponentComponentमें घोषित करेंMyComponentModule
2. अपने जोड़े MyComponentComponentके लिए exportsकी विशेषता MyComponentModule

mycomponentModule.ts

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

3. MyComponentModuleअपने AppModule importsविशेषता में जोड़ें

app.module.ts

    @NgModule({
       imports: [MyComponentModule]
       declarations: [AppComponent],
       providers: [],
       bootstrap: [AppComponent]
    })
    export class AppModule {} 

महत्वपूर्ण यदि आपकी अभी भी वह त्रुटि है, तो अपने सर्वर ctrl+cको टर्मिनल से रोकें , और इसे फिर से चलाएँng serve -o

Comments

अंतिम चरण वह है जो मुझे एक परियोजना पर चाहिए था जिसे मैंने थोड़ी देर में नहीं छुआ था। 'Npm इंस्टॉल "" एनजी अपडेट "के बाद और फिर" npm अपडेट "

— जेफ लोंगो

Answer 8

मेरे मामले में मेरे पास साझा मॉड्यूल में एक घटक था।

घटक लोड हो रहा था और अच्छी तरह से काम कर रहा था लेकिन टाइपस्क्रिप्ट html टैग को लाल रेखा के साथ उजागर कर रहा था और इस त्रुटि संदेश को दिखाया।

इस घटक के अंदर, मैंने देखा कि मैंने rxjs ऑपरेटर को आयात नहीं किया।

import {map} from 'rxjs/operators';

जब मैंने इस आयात को जोड़ा तो त्रुटि संदेश गायब हो गया।

घटक के अंदर सभी आयातों की जाँच करें ।

आशा है कि यह किसी की मदद करता है।

Answer 9

जाँच करें कि मूल घटक किस मॉड्यूल में घोषित किया जा रहा है ...

यदि आपके मूल घटक को साझा मॉड्यूल में परिभाषित किया गया है, तो आपका बच्चा मॉड्यूल होना चाहिए।

मूल घटक को एक साझा मॉड्यूल में घोषित किया जा सकता है और उस मॉड्यूल को नहीं जो फ़ाइल निर्देशिका संरचना / नामकरण के आधार पर तार्किक है, यहां तक ​​कि कोणीय सीएलआई ने इसे मेरे मामले में गलत मॉड्यूल में जोड़ा है।

Answer 10

आशा है कि आप कर रहे हैं app.module.ts। अपनी app.module.tsपंक्ति के नीचे जोड़ें-

 exports: [myComponentComponent],

ऐशे ही:

import { NgModule, Renderer } from '@angular/core';
import { HeaderComponent } from './headerComponent/header.component';
import { HeaderMainComponent } from './component';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [
        HeaderMainComponent,
        HeaderComponent
    ],
    imports: [
        RouterModule,
    ],
    providers: [],
    bootstrap: [HeaderMainComponent],
    exports: [HeaderComponent],
})
export class HeaderModule { }

Answer 11

अपने घटकों में। Pmule.ts आपको इस तरह से आयोनिकमॉडल आयात करना चाहिए:

import { IonicModule } from '@ionic/angular';

फिर इस तरह IonicModule आयात करें:

  imports: [
    CommonModule,
    IonicModule
  ],

तो आपके घटक .odule.ts इस तरह होंगे:

import { CommonModule } from '@angular/common';
import {PostComponent} from './post/post.component'
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [PostComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [PostComponent]
})
export class ComponentsModule { }```

Answer 12

नहीं export **default** class MyComponentComponent!

संबंधित मुद्दा जो शीर्षक के अंतर्गत आ सकता है, यदि विशिष्ट प्रश्न नहीं:

मैंने गलती से एक ...

export default class MyComponentComponent {

... और वह बात भी खराब हो गई।

क्यों? VS कोड ने मेरे मॉड्यूल में आयात जोड़ा जब मैंने इसे रखा declarations, लेकिन इसके बजाय ...

import { MyComponentComponent } from '...';

यह था

import MyComponentComponent from '...';

और वह नीचे की ओर ऊपर की ओर नहीं बढ़ा, निश्चित रूप से यह "वास्तव में" डिफ़ॉल्ट आयात के साथ कहीं भी नामित नहीं था।

export class MyComponentComponent {

नहीं default। फायदा।