Jika '<selector>' adalah komponen Angular, verifikasi bahwa itu adalah bagian dari modul ini

Saya baru di Angular2. Saya telah mencoba membuat komponen tetapi menunjukkan kesalahan.

Ini adalah app.component.tsfilenya.

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

Ini adalah komponen yang ingin saya buat.

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

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

export class MyComponentComponent {

}

Menampilkan dua kesalahan:

1. Jika my-componentmerupakan komponen Angular, verifikasi bahwa itu adalah bagian dari modul ini.
2. Jika my-componentKomponen Web, tambahkan CUSTOM_ELEMENTS_SCHEMAke @NgModule.schemaskomponen ini untuk menyembunyikan pesan ini.

Tolong bantu.

Anda MyComponentComponentharus masuk MyComponentModule.

Dan masuk MyComponentModule, Anda harus menempatkan di MyComponentComponentdalam "ekspor".

Sesuatu seperti ini, lihat kode di bawah ini.

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

export class MyComponentModule {
}

dan tempatkan MyComponentModuledi importsdalam app.module.tsseperti ini (lihat kode di bawah).

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

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

export class AppModule {}

Setelah melakukannya, pemilih komponen Anda sekarang dapat dikenali oleh aplikasi.

Anda dapat mempelajarinya lebih lanjut di sini: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

Bersulang!

Mungkin ini untuk nama htmlkomponen tag

Anda menggunakan htmlsesuatu seperti ini<mycomponent></mycomponent>

Anda harus menggunakan ini <app-mycomponent></app-mycomponent>

apakah Anda mengimpornya app.module.tsseperti Anda dan menghapus sedikit arahan: -

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

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

Anda MyComponentModuleharus seperti ini: -

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

Periksa selektor Anda di namafile.component.ts

Menggunakan tag di berbagai file html yang akan saya katakan

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

Seharusnya

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

Contoh

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

Dalam kasus saya, saya menulis pengujian unit untuk komponen yang menggunakan sub-komponen, dan saya menulis tes untuk memastikan subkomponen tersebut ada di template:

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

Saya tidak mendapatkan kesalahan, tetapi peringatan:

PERINGATAN: '' wawancara-aplikasi 'bukan elemen yang diketahui:

1. Jika 'wawancara-aplikasi' adalah komponen Angular, maka verifikasi bahwa itu adalah bagian dari modul ini. PERINGATAN: '' wawancara-aplikasi 'bukan elemen yang diketahui:
2. Jika 'wawancara-aplikasi' adalah komponen Angular, maka verifikasi bahwa itu adalah bagian dari modul ini.
3. Jika 'app-interview' adalah Komponen Web, tambahkan 'CUSTOM_ELEMENTS_SCHEMA' ke '@ NgModule.schemas' dari komponen ini untuk menyembunyikan pesan ini. '

Selain itu, subkomponen tidak muncul di dalam browser selama pengujian.

Saya biasa ng g c newcomponentmembuat semua komponen, jadi mereka sudah dideklarasikan di appmodule, tetapi bukan modul pengujian yang untuk komponen yang saya tentukan.

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

Anda harus mendeklarasikan MyComponentComponent Anda dalam modul yang sama di AppComponent Anda.

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

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

1. Menyatakan Anda MyComponentComponentdiMyComponentModule
2. Tambahkan Anda MyComponentComponentke exportsatribut MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

3. Tambahkan Anda MyComponentModuleke importsatribut AppModule Anda

app.module.ts

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

Penting Jika Anda masih mengalami kesalahan itu, Hentikan server Anda ctrl+cdari terminal, dan jalankan kembaling serve -o

Dalam kasus saya, saya memiliki komponen dalam modul Bersama.

Komponen sedang dimuat dan bekerja dengan baik tetapi skrip ketikan menyorot tag html dengan garis merah dan menunjukkan pesan kesalahan ini.

Di dalam komponen ini, saya perhatikan saya tidak mengimpor operator rxjs.

import {map} from 'rxjs/operators';

Ketika saya menambahkan impor ini, pesan kesalahan menghilang.

Periksa semua impor di dalam komponen .

Semoga membantu seseorang.

Periksa modul mana yang komponen induknya dideklarasikan di ...

Jika komponen induk Anda ditentukan dalam modul bersama, begitu pula modul anak Anda.

Komponen induk dapat dideklarasikan dalam modul bersama dan bukan modul yang logis berdasarkan struktur / penamaan direktori file, bahkan CLI Angular menambahkannya ke modul yang salah dalam kasus saya.

Semoga Anda mengalami app.module.ts. Di app.module.tstambahkan baris di bawah Anda-

 exports: [myComponentComponent],

Seperti ini:

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

Di components.module.ts Anda, Anda harus mengimpor IonicModule seperti ini:

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

Kemudian impor IonicModule seperti ini:

  imports: [
    CommonModule,
    IonicModule
  ],

jadi components.module.ts Anda akan seperti ini:

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

Jangan export **default** class MyComponentComponent!

Masalah terkait yang mungkin termasuk dalam judul, jika bukan pertanyaan spesifik:

Saya tidak sengaja melakukan ...

export default class MyComponentComponent {

... dan itu juga mengacaukan segalanya.

Mengapa? VS Code menambahkan impor ke modul saya ketika saya memasukkannya declarations, tetapi alih-alih ...

import { MyComponentComponent } from '...';

itu punya

import MyComponentComponent from '...';

Dan itu tidak memetakan ke hilir, diasumsikan karena tidak "benar-benar" dinamai di mana pun dengan impor default.

export class MyComponentComponent {

Tidak default. Keuntungan.