Si '<selector>' est un composant angulaire, alors vérifiez qu'il fait partie de ce module

Je suis nouveau dans Angular2. J'ai essayé de créer un composant mais en affichant une erreur.

Ceci est le app.component.tsfichier.

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

C'est le composant que je souhaite créer.

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

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

export class MyComponentComponent {

}

Affichage des deux erreurs:

1. Si my-component s'agit d'un composant angulaire, vérifiez qu'il fait partie de ce module.
2. Si my-componentest un composant Web, ajoutez-le CUSTOM_ELEMENTS_SCHEMAau @NgModule.schemasde ce composant pour supprimer ce message.

Veuillez aider.

Vous MyComponentComponentdevriez être dedans MyComponentModule.

Et à MyComponentModulel' MyComponentComponentintérieur , vous devez placer l' intérieur des «exportations».

Quelque chose comme ça, voir le code ci-dessous.

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

export class MyComponentModule {
}

et placez - le MyComponentModuledans le importsdans app.module.tscomme celui - ci (voir le code ci - dessous).

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

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

export class AppModule {}

Après cela, le sélecteur de votre composant peut maintenant être reconnu par l'application.

Vous pouvez en savoir plus ici: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

À votre santé!

Peut-être que c'est pour le nom du htmlcomposant de balise

Vous utilisez dans htmlquelque chose comme ça<mycomponent></mycomponent>

Vous devez utiliser ceci <app-mycomponent></app-mycomponent>

l'importez-vous app.module.tscomme tel et supprimez le bit de directives: -

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

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

Tu MyComponentModuledevrais être comme ça: -

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

Vérifiez votre sélecteur dans votre nom de fichier.component.ts

En utilisant la balise dans divers fichiers html, je dirais

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

Devrait être

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

Exemple

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

Dans mon cas, j'écrivais des tests unitaires pour un composant qui utilise des sous-composants, et j'écrivais des tests pour m'assurer que ces sous-composants étaient dans le modèle:

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

Je n'ai pas eu d'erreur, mais un avertissement:

AVERTISSEMENT: '' app-interview 'n'est pas un élément connu:

1. Si 'app-interview' est un composant angulaire, vérifiez qu'il fait partie de ce module. AVERTISSEMENT: '' app-interview 'n'est pas un élément connu:
2. Si 'app-interview' est un composant angulaire, vérifiez qu'il fait partie de ce module.
3. Si "app-interview" est un composant Web, ajoutez "CUSTOM_ELEMENTS_SCHEMA" au "@ NgModule.schemas" de ce composant pour supprimer ce message. "

De plus, le sous-composant ne s'affichait pas dans le navigateur pendant les tests.

J'avais l'habitude ng g c newcomponentde générer tous les composants, donc ils étaient déjà déclarés dans l'appmodule, mais pas le module de test que pour le composant que je spécifiais.

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

Vous devez déclarer votre MyComponentComponent dans le même module de votre AppComponent.

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

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

1. Déclarez votre MyComponentComponentinMyComponentModule
2. Ajoutez votre MyComponentComponentà l' exportsattribut de MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

3. Ajoutez votre MyComponentModuleà votre importsattribut AppModule

app.module.ts

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

Important Si cette erreur persiste, arrêtez votre serveur à ctrl+cpartir du terminal et réexécutez-leng serve -o

Dans mon cas, j'avais un composant dans un module partagé.

Le composant se chargeait et fonctionnait bien mais dactylographié mettait en évidence la balise html avec une ligne rouge et montrait ce message d'erreur.

Dans ce composant, j'ai remarqué que je n'avais pas importé d'opérateur rxjs.

import {map} from 'rxjs/operators';

Lorsque j'ai ajouté cette importation, le message d'erreur a disparu.

Vérifiez toutes les importations à l'intérieur du composant .

J'espère que ça aide quelqu'un.

Vérifiez dans quel module le composant parent est déclaré ...

Si votre composant parent est défini dans le module partagé, votre module enfant doit l'être également.

Le composant parent pourrait être déclaré dans un module partagé et non dans le module logique basé sur la structure du répertoire de fichiers / la dénomination, même la CLI angulaire l'a ajouté dans le mauvais module dans mon cas.

J'espère que vous avez app.module.ts. Dans votre app.module.tsajouter ci-dessous la ligne-

 exports: [myComponentComponent],

Comme ça:

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

Dans votre components.module.ts, vous devez importer IonicModule comme ceci:

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

Ensuite, importez IonicModule comme ceci:

  imports: [
    CommonModule,
    IonicModule
  ],

donc votre components.module.ts sera comme ceci:

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

Pas export **default** class MyComponentComponent!

Problème connexe qui pourrait relever du titre, sinon de la question spécifique:

J'ai accidentellement fait un ...

export default class MyComponentComponent {

... et cela a aussi gâché les choses.

Pourquoi? VS Code a ajouté l'importation à mon module lorsque je l'ai mis dans declarations, mais au lieu de ...

import { MyComponentComponent } from '...';

cela a

import MyComponentComponent from '...';

Et cela n'a pas été mappé en aval, supposément car il n'était "vraiment" nommé nulle part avec l'importation par défaut.

export class MyComponentComponent {

Non default. Profit.