'<selector>' bir Angular bileşeniyse, bu modülün parçası olduğunu doğrulayın

Angular2'de yeniyim. Bir bileşen oluşturmaya çalıştım, ancak bir hata gösteriyor.

Bu app.component.tsdosya.

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

Oluşturmak istediğim bileşen bu.

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

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

export class MyComponentComponent {

}

İki hatayı gösterme:

1. Eğer my-componentbir Açısal bileşenidir, o zaman bu modülün bir parçası olduğundan emin olun.
2. Eğer my-componentbir Web Bileşeni o zaman eklemek CUSTOM_ELEMENTS_SCHEMAiçin @NgModule.schemasbu mesajı bastırmak için bu bileşenin.

Lütfen yardım et.

İçeride MyComponentComponentolmalısın MyComponentModule.

Ve içine, "dışa aktarımlar" MyComponentModuleın MyComponentComponentiçini yerleştirmelisiniz.

Bunun gibi bir şey, aşağıdaki koda bakın.

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

export class MyComponentModule {
}

ve yerleştirmek MyComponentModulede importsiçinde app.module.tsböyle (aşağıdaki kodu bakınız).

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

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

export class AppModule {}

Bunu yaptıktan sonra, bileşeninizin seçicisi artık uygulama tarafından tanınabilir.

Buradan daha fazla bilgi edinebilirsiniz: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

Şerefe!

Belki bu htmletiket bileşeninin adı içindir

Böyle bir htmlşeyde kullanıyorsun<mycomponent></mycomponent>

Bunu kullanmalısın <app-mycomponent></app-mycomponent>

bunu kendi beğeninize aktarıyor musunuz app.module.tsve yönergelerin bitini kaldırıyor musunuz : -

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

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

Şöyle MyComponentModuleolmalı: -

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

Dosyaadı.component.ts içinde seçicinizi kontrol edin

Etiketi çeşitli html dosyalarında kullanmak diyebilirim

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

Olmalı

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

Misal

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

Benim durumumda, alt bileşenleri kullanan bir bileşen için birim testleri yazıyordum ve bu alt bileşenlerin şablonda olduğundan emin olmak için testler yazıyordum:

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

Bir hata almadım ama bir uyarı:

UYARI: '' uygulama görüşmesi 'bilinen bir unsur değildir:

1. 'Uygulama görüşmesi' bir Angular bileşeniyse, bu modülün bir parçası olduğunu doğrulayın. UYARI: '' uygulama görüşmesi 'bilinen bir unsur değildir:
2. 'Uygulama görüşmesi' bir Angular bileşeniyse, bu modülün bir parçası olduğunu doğrulayın.
3. 'Uygulama görüşmesi' bir Web Bileşeni ise, bu mesajı bastırmak için bu bileşenin '@ NgModule.schemas' öğesine 'CUSTOM_ELEMENTS_SCHEMA' ekleyin. '

Ayrıca, alt bileşen vermedi değil test sırasında tarayıcı içinde gösteriyor.

Eskiden ng g c newcomponenttüm bileşenleri oluşturuyordum, bu nedenle bunlar zaten uygulama modülünde bildirilmişti, ancak belirlediğim bileşen için test modülü değil .

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

MyComponentComponent'inizi AppComponent'inizin aynı modülünde beyan etmelisiniz.

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

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

1. Senin beyan MyComponentComponentinMyComponentModule
2. Kümesi ekleyin MyComponentComponentiçin exportsoznıtelığı MyComponentModule

mycomponentModule.ts

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

export class MyComponentModule {
}

3. MyComponentModuleAppModule importsözelliğinize ekleyin

app.module.ts

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

Önemli Hala bu hatayı alıyorsanız, sunucunuzu ctrl+cterminalden durdurun ve yeniden çalıştırınng serve -o

Benim durumumda, bir Paylaşılan modülde bir bileşenim vardı.

Bileşen yükleniyor ve iyi çalışıyordu, ancak typcript, html etiketini kırmızı çizgiyle vurguluyordu ve bu hata mesajını gösterdi.

Bu bileşenin içinde bir rxjs operatörü içe aktarmadığımı fark ettim.

import {map} from 'rxjs/operators';

Bu içe aktarmayı eklediğimde hata mesajı kayboldu.

Bileşen içindeki tüm içe aktarımları kontrol edin .

Umarım birine yardımcı olur.

Üst bileşenin hangi modülde bildirildiğini kontrol edin ...

Üst bileşeniniz paylaşılan modülde tanımlanmışsa , alt modülünüz de tanımlanmalıdır.

Ana bileşen, dosya dizini yapısına / isimlendirmesine dayalı mantıksal olan modülde değil, paylaşılan bir modülde bildirilebilir, hatta benim durumumda Angular CLI onu yanlış modüle ekledi.

Umarım sahipsindir app.module.ts. Senin de app.module.tsiçini kaplamak altına eklenti

 exports: [myComponentComponent],

Bunun gibi:

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 dosyanızda IonicModule'u şu şekilde içe aktarmalısınız:

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

Ardından IonicModule'u şu şekilde içe aktarın:

  imports: [
    CommonModule,
    IonicModule
  ],

Böylece, components.module.ts dosyanız şöyle olacaktır:

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

Yapma export **default** class MyComponentComponent!

Spesifik soru değilse, başlığın altına düşebilecek ilgili sorun:

Yanlışlıkla bir ...

export default class MyComponentComponent {

... ve bu da işleri berbat etti.

Neden? VS Code, içe aktarımı modülüme eklediğimde ekledi declarations, ancak bunun yerine ...

import { MyComponentComponent } from '...';

vardı

import MyComponentComponent from '...';

Ve bu, varsayılan içe aktarmayla "gerçekten" herhangi bir yerde adlandırılmadığı için varsayılan olarak aşağı akışla eşleşmedi.

export class MyComponentComponent {

Hayır default. Kar.