Якщо <selector> 'є кутовим компонентом, переконайтесь, що він є частиною цього модуля

Я новачок у 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це кутовий компонент, то перевірте, що він є частиною цього модуля.
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 {
}

Перевірте свій вибір у файлі 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']
})

У моєму випадку я писав одиничні тести для компонента, який використовує підкомпоненти, і я писав тести, щоб переконатися, що ці підкомпоненти були в шаблоні:

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

Я не отримав помилку, але попередження:

УВАГА: "Інтерв'ю з додатком" не є відомим елементом:

1. Якщо "додаток-інтерв'ю" є кутовим компонентом, переконайтеся, що воно є частиною цього модуля. УВАГА: "Інтерв'ю з додатком" не є відомим елементом:
2. Якщо "додаток-інтерв'ю" є кутовим компонентом, переконайтеся, що воно є частиною цього модуля.
3. Якщо "інтерв'ю програми" - це веб-компонент, додайте "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. Додайте свій атрибут MyComponentModuleAppModuleimports

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

У свій компонент.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 додав імпорт до мого модуля, коли я вклав його declarations, але замість ...

import { MyComponentComponent } from '...';

це було

import MyComponentComponent from '...';

І це не відображалось вгору за течією, мабуть, оскільки його не було "справді" ніде з імпортом за замовчуванням.

export class MyComponentComponent {

Ні default. Прибуток.