Se '<selettore>' è un componente angolare, verificare che faccia parte di questo modulo

Sono nuovo in Angular2. Ho provato a creare un componente ma ho mostrato un errore.

Questo è il app.component.tsfile

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

Questo è il componente che voglio creare.

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

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

export class MyComponentComponent {

}

Mostra i due errori:

1. Se my-componentè un componente angolare, verificare che faccia parte di questo modulo.
2. Se my-componentè un componente Web, aggiungere CUSTOM_ELEMENTS_SCHEMAa @NgModule.schemasquesto componente per eliminare questo messaggio.

Per favore aiuto.

Il tuo MyComponentComponentdovrebbe essere in MyComponentModule.

E dentro MyComponentModule, dovresti mettere MyComponentComponentdentro le "esportazioni".

Qualcosa del genere, vedi il codice qui sotto.

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

export class MyComponentModule {
}

e posiziona in MyComponentModulein importsin app.module.tsquesto modo (vedi codice sotto).

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

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

export class AppModule {}

Dopo aver fatto ciò, il selettore del componente ora può essere riconosciuto dall'app.

Puoi saperne di più qui: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

Saluti!

Forse Questo è per il nome del htmlcomponente tag

Usi htmlqualcosa del genere<mycomponent></mycomponent>

Devi usare questo <app-mycomponent></app-mycomponent>

lo stai importando nel tuo app.module.tsmodo e rimuovi il bit delle direttive: -

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

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

Il tuo MyComponentModuledovrebbe essere simile a questo: -

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

Controlla il tuo selettore nel nomefile.component.ts

Direi che usando il tag in vari file html

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

Dovrebbe essere

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

Esempio

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

Nel mio caso stavo scrivendo test unitari per un componente che utilizza componenti secondari e stavo scrivendo test per assicurarmi che quei componenti secondari fossero nel modello:

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

Non ho ricevuto un errore, ma un avviso:

AVVISO: '' intervista app 'non è un elemento noto:

1. Se "intervista app" è un componente angolare, verifica che faccia parte di questo modulo. AVVISO: '' intervista app 'non è un elemento noto:
2. Se "intervista app" è un componente angolare, verifica che faccia parte di questo modulo.
3. Se "intervista app" è un componente Web, aggiungere "CUSTOM_ELEMENTS_SCHEMA" a "@ NgModule.schemas" di questo componente per eliminare questo messaggio. "

Inoltre, il sottocomponente non è stato visualizzato all'interno del browser durante il test.

Ho usato ng g c newcomponentper generare tutti i componenti, così sono stati già dichiarati nella appmodule, ma non il modulo di test che per la componente che stavo spec'ing.

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

Devi dichiarare MyComponentComponent nello stesso modulo di AppComponent.

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

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

1. Dichiara il tuo MyComponentComponentinMyComponentModule
2. Aggiungi la tua MyComponentComponenta exportsattributo MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

3. Aggiungi il MyComponentModuletuo importsall'attributo AppModule

app.module.ts

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

Importante Se l'errore persiste, arrestare il server ctrl+cdal terminale ed eseguirlo nuovamenteng serve -o

Nel mio caso avevo un componente in un modulo condiviso.

Il componente si stava caricando e funzionava bene, ma typescript stava evidenziando il tag html con una linea rossa e mostrava questo messaggio di errore.

All'interno di questo componente, ho notato che non avevo importato un operatore rxjs.

import {map} from 'rxjs/operators';

Quando ho aggiunto questa importazione, il messaggio di errore è scomparso.

Controlla tutte le importazioni all'interno del componente .

Spero che aiuti qualcuno.

Verifica in quale modulo viene dichiarato il componente padre in ...

Se il componente padre è definito nel modulo condiviso, anche il modulo figlio deve essere definito .

Il componente genitore potrebbe essere dichiarato in un modulo condiviso e non nel modulo logico in base alla struttura / denominazione della directory dei file, anche nel mio caso la CLI angolare lo ha aggiunto al modulo sbagliato.

Spero tu stia avendo app.module.ts. Nel tuo app.module.tsaggiungere sotto la riga-

 exports: [myComponentComponent],

Come questo:

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

In components.module.ts dovresti importare IonicModule in questo modo:

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

Quindi importare IonicModule in questo modo:

  imports: [
    CommonModule,
    IonicModule
  ],

quindi i componenti.module.ts saranno così:

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

Non farlo export **default** class MyComponentComponent!

Problema correlato che potrebbe rientrare nel titolo, se non nella domanda specifica:

Ho accidentalmente fatto un ...

export default class MyComponentComponent {

... e anche quello ha rovinato le cose.

Perché? VS Code ha aggiunto l'importazione al mio modulo quando l'ho inserito declarations, ma invece di ...

import { MyComponentComponent } from '...';

esso aveva

import MyComponentComponent from '...';

E questo non è stato mappato a valle, presumibilmente dal momento che non era "realmente" nominato ovunque con l'importazione predefinita.

export class MyComponentComponent {

No default. Profitto.