Si "<selector>" est un composant Angular, vérifiez qu'il fait partie de ce module.

Question

Je suis nouveau dans Angular2. J'ai essayé de créer un composant mais une erreur s'est produite.

C'est le app.component.ts fichier.

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

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

}

Montrant les deux erreurs :

1. Si my-component est un composant Angular, alors vérifiez qu'il fait partie de ce module.
2. Si my-component est un composant Web, ajoutez CUSTOM_ELEMENTS_SCHEMA à la @NgModule.schemas de ce composant pour supprimer ce message.

Veuillez m'aider.

Answer 1

Votre MyComponentComponent devrait être dans MyComponentModule .

Et dans MyComponentModule vous devez placer le MyComponentComponent à l'intérieur des "exportations".

Quelque chose comme ceci, voir le code ci-dessous.

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

export class MyComponentModule {
}

et placer le MyComponentModule dans le imports sur 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 avoir fait cela, le sélecteur de votre composant peut maintenant être reconnu par l'application.

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

A la vôtre !

Answer 2

Peut-être que c'est pour le nom de html composant de l'étiquette

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

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

Answer 3

L'importez-vous dans votre app.module.ts comme ceci et supprimez la partie "directives" :-

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

Answer 4

Vérifiez votre sélecteur dans votre nomdefichier.composant.ts

En utilisant la balise dans différents fichiers html, je dirais que

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

Answer 5

J'espère que vous avez app.module.ts . Dans votre app.module.ts ajouter sous 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 { }