Если "<selector>" - это компонент Angular, то убедитесь, что он является частью этого модуля

Я новичок в 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 {

}

Отображение двух ошибок:

Если my-component является компонентом Angular, проверьте, что он является частью этого модуля.
Если my-component является веб-компонентом, добавьте CUSTOM_ELEMENTS_SCHEMA в @NgModule.schemas этого компонента, чтобы подавить это сообщение.

Пожалуйста, помогите.

Ответ 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

Ура!

Ответ 2

импортируете ли вы его в ваш 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 {
}

Ответ 3

Может быть, это имя для компонента html tag

Вы используете в html что-то вроде этого <mycomponent></mycomponent>

Вы должны использовать этот <app-mycomponent></app-mycomponent>

Ответ 4

Проверьте ваш селектор в вашем filename.component.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']
})

Ответ 5

Объявите свой MyComponentComponent в MyComponentModule
Добавьте свой MyComponentComponent в exports атрибут MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

Добавьте свой MyComponentModule в свой атрибут AppModule imports

app.module.ts

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

Важно Если ошибка сохраняется, остановите сервер ctrl+c на терминале и запустите его снова ng serve -o

Ответ 6

Надеюсь, у вас есть app.module.ts. В вашем app.module.ts добавьте ниже line-

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

Ответ 7

Вы должны объявить свой MyComponentComponent в том же модуле вашего AppComponent.

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

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

Ответ 8

Спасибо, джентльмены, за ваши ответы. Это было действительно полезно!

Ответ 9

В ваши component.module.ts вы должны импортировать IonicModule, как это:

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

Затем импортируйте IonicModule следующим образом:

  imports: [
    CommonModule,
    IonicModule
  ],

так что ваши компоненты .module.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 { }'''