Jeśli '<selector>' jest komponentem Angular, sprawdź, czy jest częścią tego modułu

Jestem nowy w Angular2. Próbowałem utworzyć komponent, ale pokazał błąd.

To jest app.component.tsplik.

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

To jest komponent, który chcę stworzyć.

import { Component } from '@angular/core';

@Component({
selector: 'my-component',
template: `
    <p>This is my article</p>
`
})

export class MyComponentComponent {

}

Pokazywanie dwóch błędów:

1. Jeśli my-componentjest to komponent kątowy, sprawdź, czy jest częścią tego modułu.
2. Jeśli my-componentjest składnikiem sieci Web, dodaj CUSTOM_ELEMENTS_SCHEMAdo @NgModule.schemastego składnika, aby pominąć ten komunikat.

Proszę pomóż.

Twoje MyComponentComponentpowinno być MyComponentModule.

W środku MyComponentModulenależy umieścić MyComponentComponentwewnątrz „eksport”.

Coś takiego, zobacz kod poniżej.

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

export class MyComponentModule {
}

i umieść w MyComponentModulein importsw app.module.tsten sposób (zobacz kod poniżej).

import { MyComponentModule } from 'your/file/path';

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

export class AppModule {}

Po wykonaniu tej czynności selektor komponentu będzie mógł zostać rozpoznany przez aplikację.

Możesz dowiedzieć się więcej na ten temat tutaj: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

Twoje zdrowie!

Może to jest nazwa htmlkomponentu tagu

Używasz w htmlczymś takim<mycomponent></mycomponent>

Musisz tego użyć <app-mycomponent></app-mycomponent>

czy importujesz to w swoim app.module.tspodobnym i usuwasz dyrektywy bitowe: -

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

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

Twój MyComponentModulepowinien wyglądać tak: -

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

Sprawdź swój selektor w pliku nazwa_pliku.component.ts

Powiedziałbym, że używając tagu w różnych plikach html

<my-first-component></my-first-component>

Powinien być

<app-my-first-component></app-my-first-component>

Przykład

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

W moim przypadku pisałem testy jednostkowe dla komponentu, który używa podkomponentów, i pisałem testy, aby upewnić się, że te podkomponenty są w szablonie:

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

Nie wyskoczył mi błąd, ale ostrzeżenie:

UWAGA: „wywiad w aplikacji” nie jest znanym elementem:

1. Jeśli „rozmowa w aplikacji” jest składnikiem Angular, sprawdź, czy jest częścią tego modułu. UWAGA: „wywiad w aplikacji” nie jest znanym elementem:
2. Jeśli „rozmowa w aplikacji” jest składnikiem Angular, sprawdź, czy jest częścią tego modułu.
3. Jeśli „aplikacja-wywiad” jest komponentem sieciowym, dodaj „CUSTOM_ELEMENTS_SCHEMA” do „@ NgModule.schemas” tego komponentu, aby ukryć ten komunikat. ”

Ponadto podskładnik nie pojawił się w przeglądarce podczas testowania.

Kiedyś ng g c newcomponentgenerowałem wszystkie komponenty, więc były już zadeklarowane w module appmodule, ale nie w module testowym, który dla komponentu, który specyfikowałem.

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

Musisz zadeklarować swój MyComponentComponent w tym samym module swojego AppComponent.

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

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

1. Zadeklarować swój MyComponentComponentinMyComponentModule
2. Dodaj swoją MyComponentComponentdo exportsatrybutu MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

3. Dodaj swój atrybut MyComponentModuledo swojego AppModuleimports

app.module.ts

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

Ważne Jeśli nadal występuje ten błąd, zatrzymaj serwer ctrl+cz poziomu terminala i uruchom go ponownieng serve -o

W moim przypadku miałem komponent w module Shared.

Komponent ładował się i działał dobrze, ale maszynopis podświetlał tag HTML czerwoną linią i pokazywał ten komunikat o błędzie.

Wewnątrz tego komponentu zauważyłem, że nie zaimportowałem operatora rxjs.

import {map} from 'rxjs/operators';

Kiedy dodałem ten import, komunikat o błędzie zniknął.

Sprawdź wszystkie importy wewnątrz komponentu .

Mam nadzieję, że to komuś pomoże.

Sprawdź, w którym module jest deklarowany komponent nadrzędny ...

Jeśli komponent nadrzędny jest zdefiniowany w module współdzielonym, musi to być również moduł podrzędny.

Komponent nadrzędny może być zadeklarowany w module współdzielonym, a nie moduł, który jest logiczny w oparciu o strukturę / nazewnictwo plików, nawet interfejs wiersza poleceń Angular dodał go do niewłaściwego modułu w moim przypadku.

Mam nadzieję, że masz app.module.ts. W Twoim app.module.tsdodatku poniżej linii-

 exports: [myComponentComponent],

Lubię to:

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

W pliku components.module.ts zaimportuj IonicModule w następujący sposób:

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

Następnie zaimportuj IonicModule w następujący sposób:

  imports: [
    CommonModule,
    IonicModule
  ],

więc twoje komponenty components.module.ts będą wyglądały tak:

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

Nie export **default** class MyComponentComponent!

Powiązana kwestia, która może znaleźć się pod tytułem, jeśli nie konkretne pytanie:

Przypadkowo zrobiłem ...

export default class MyComponentComponent {

... i to też schrzaniło sprawę.

Czemu? VS Code dodał import do mojego modułu, gdy umieściłem go w declarations, ale zamiast ...

import { MyComponentComponent } from '...';

miał

import MyComponentComponent from '...';

I to nie było mapowane w górę w dół, przypuszczalnie ponieważ nie było nigdzie nazwane „naprawdę” z domyślnym importem.

export class MyComponentComponent {

Nie default. Zysk.