web-dev-qa-db-fra.com

Si '<sélecteur>' est un composant angulaire, 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 fichier 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' }

C'est le composant que je veux 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 est un composant angulaire, vérifiez qu'il fait partie de ce module.
  2. Si my-component est un composant Web, ajoutez CUSTOM_ELEMENTS_SCHEMA au @NgModule.schemas de ce composant pour supprimer ce message. 

S'il vous plaît aider.

angulartypescript
49
Vimal

Votre "MyComponentComponent" devrait être dans "MyComponentModule".

Et dans "MyComponentModule", vous devez placer le "MyComponentComponent" dans les "exports".

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

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

export class MyComponentModule {
}

et placez le "MyComponentModule" dans les "importations" dans "app.module.ts" comme ceci (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 apprendre plus à ce sujet ici: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

À votre santé!

45
Cyan Baltazar

l'importez-vous dans votre app.module.ts comme suit et supprimez le bit de directive: -

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

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

Votre MyComponentModule devrait être comme ceci: -

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

Peut-être que ceci est pour le nom de html tag Component

Vous utilisez dans html quelque chose comme ceci <mycomponent></mycomponent>

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

9
keivan kashani

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

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

@NgModule({
   declarations: [ AppComponent, MyComponentComponent ],
   bootstrap: [ AppComponent ]
})
export class AppModule {}
0
J. Jerez
  1. Déclarez votre MyComponentComponent dans MyComponentModule
  2. Ajoutez votre MyComponentComponent à exports attribut de MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}
  1. Ajoutez votre MyComponentModule à votre attribut AppModule imports

app.module.ts

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

Important Si vous rencontrez toujours cette erreur, arrêtez votre serveur ctrl+c du terminal et exécutez-le à nouveau ng serve -o

0
katwekibs

Vérifiez votre sélecteur dans votre filename.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']
})
0
grimur82

J'espère que vous rencontrez app.module.ts. Dans votre app.module.ts ajouter ci-dessous 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 { }
0
Shubham Verma