Если '<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 {

}

Показаны две ошибки:

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

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

Ваш 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

Ура!

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

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

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

вы импортируете это в свой 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 {
}

Проверьте свой селектор в своем имени файла.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']
})

В моем случае я писал модульные тесты для компонента, который использует подкомпоненты, и я писал тесты, чтобы убедиться, что эти подкомпоненты присутствуют в шаблоне:

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

Я получил не ошибку, а предупреждение:

ПРЕДУПРЕЖДЕНИЕ: '' приложение-интервью '' не является известным элементом:

1. Если приложение-интервью является компонентом Angular, убедитесь, что он является частью этого модуля. ПРЕДУПРЕЖДЕНИЕ: '' приложение-интервью '' не является известным элементом:
2. Если приложение-интервью является компонентом Angular, убедитесь, что он является частью этого модуля.
3. Если «app-интервью» является веб-компонентом, добавьте «CUSTOM_ELEMENTS_SCHEMA» в «@ NgModule.schemas» этого компонента, чтобы подавить это сообщение.

Кроме того, подкомпонент не во время тестирования отображался в браузере.

Раньше я ng g c newcomponentгенерировал все компоненты, поэтому они уже были объявлены в модуле приложения, но не в тестовом модуле, который для компонента, который я указывал.

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

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

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

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

1. Объявите свою MyComponentComponentвMyComponentModule
2. Добавьте ваш MyComponentComponentк exportsатрибуту MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

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

app.module.ts

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

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

В моем случае у меня был компонент в общем модуле.

Компонент загружался и работал хорошо, но машинописный текст выделял тег html красной линией и отображал это сообщение об ошибке.

Я заметил, что внутри этого компонента не импортировал оператор rxjs.

import {map} from 'rxjs/operators';

Когда я добавил этот импорт, сообщение об ошибке исчезло.

Проверить весь импорт внутри компонента .

Надеюсь, это кому-то поможет.

Проверить, в каком модуле объявляется родительский компонент ...

Если ваш родительский компонент определен в общем модуле, ваш дочерний модуль должен быть таким же.

Родительский компонент может быть объявлен в общем модуле, а не в модуле, который является логическим на основе структуры / именования файловых каталогов, даже в моем случае Angular CLI добавил его в неправильный модуль.

Надеюсь, что у вас есть app.module.ts. В вашей app.module.tsстроке добавления ниже -

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

В свой components.module.ts вы должны импортировать IonicModule следующим образом:

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

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

  imports: [
    CommonModule,
    IonicModule
  ],

так что ваш components.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 { }```

Не надо export **default** class MyComponentComponent!

Связанная проблема, которая может подпадать под заголовок, если не под конкретный вопрос:

Я случайно сделал ...

export default class MyComponentComponent {

... и это тоже напортачило.

Зачем? VS Code добавил импорт в мой модуль, когда я его вставил declarations, но вместо ...

import { MyComponentComponent } from '...';

это было

import MyComponentComponent from '...';

И это не отображалось в нисходящем направлении, предположительно, поскольку оно «на самом деле» нигде не было названо при импорте по умолчанию.

export class MyComponentComponent {

Нет default. Прибыль.