AppModule içinde oluşturduğum bir bileşeni diğer modüllerde kullanmaya çalışıyorum. Yine de aşağıdaki hatayı alıyorum:

"Yakalanmamış (sözde): Hata: Şablon ayrıştırma hataları:

'kişiler kutusu' bilinen bir öğe değil:

1. 'Kontak kutusu' bir Açısal bileşen ise, bu modülün bir parçası olduğunu doğrulayın.
2. 'Contacts-box' bir Web Bileşeni ise, bu mesajı bastırmak için bu bileşenin '@ NgModule.schemas' öğesine 'CUSTOM_ELEMENTS_SCHEMA' ekleyin.

Proje yapım oldukça basit:

Sayfalarımı, her sayfanın farklı modülde (örn. Müşteriler modülü) tutulduğu ve her modülün birden çok bileşeni (müşteri-listesi-bileşeni, müşteri-eklenti bileşeni vb.) Bulunduğu sayfalar dizininde tutuyorum. ContactBoxComponent'ımı bu bileşenlerin içinde kullanmak istiyorum (yani örneğin müşterilerin eklenti bileşeninin içinde).

Gördüğünüz gibi, kontak kutusu bileşenini widget dizini içinde oluşturdum, böylece temelde AppModule içinde. ContactBoxComponent içe aktarımını app.module.ts'e ekledim ve AppModule'un bildirimler listesine koydum. İşe yaramadı, bu yüzden sorunumu araştırdım ve listeyi dışa aktarmak için ContactBoxComponent'ı ekledim. Yardımcı olmadı. Ayrıca ContactBoxComponent'i MüşterilerAddComponent'e ve sonra bir başkasına (farklı modülden) koymayı denedim, ancak birden fazla bildirim olduğunu söyleyen bir hata aldım.

Neyi kaçırıyorum?

Böyle bir hata aldığımda gerçekleştirdiğim 5 adım bunlar.

• İsmin doğru olduğundan emin misin? (ayrıca bileşende tanımlanan seçiciyi kontrol edin)
• Bileşeni bir modülde mi beyan ediyorsunuz?
• Başka bir modülde ise, bileşen dışa aktarılsın mı?
• Başka bir modülde ise, bu modül içe aktarılsın mı?
• Klibi yeniden başlatmak mı?

Ayrıca ContactBoxComponent'i MüşterilerAddComponent'e ve sonra bir başkasına (farklı modülden) koymayı denedim, ancak birden fazla bildirim olduğunu söyleyen bir hata aldım.

Bir bileşeni iki kez ilan edemezsiniz. Bileşeninizi yeni bir ayrı modülde beyan etmeli ve dışa aktarmalısınız. Daha sonra, bu yeni modülü bileşeninizi kullanmak istediğiniz her modüle aktarmalısınız.

Ne zaman yeni modül oluşturmanız gerektiğini ve ne zaman yapmamanız gerektiğini söylemek zor. Genellikle yeniden kullandığım her bileşen için yeni bir modül oluşturuyorum. Neredeyse her yerde kullandığım bazı bileşenlerim olduğunda onları tek bir modüle koyuyorum. Tekrar kullanmadığım bir bileşene sahip olduğumda, başka bir yerde ihtiyacım olana kadar ayrı bir modül oluşturmayacağım.

Tüm bileşenlerinizi tek bir modüle koymak cazip gelse de, bu performans için kötüdür. Geliştirme sırasında, bir modül her değişiklik yapıldığında yeniden derlenmelidir. Modül ne kadar büyükse (daha fazla bileşen) o kadar çok zaman alır. Büyük modülde küçük bir değişiklik yapmak, küçük bir modülde küçük bir değişiklik yapmaktan daha fazla zaman alır.

Benzer bir sorun yaşadım. Bu ortaya çıktı ng generate component(CLI sürümü 7.1.4 kullanarak) AppModule çocuk bileşeni için bir deklarasyon ekler, ancak TestBed modüle geri öykünür o.

"Tour of Heroes" örnek uygulaması bir HeroesComponentseçici içerir app-heroes. Uygulamanın ran ince sunulduğu, ama ne zaman ng testbu hata mesajını üretti: 'app-heroes' is not a known element. Ekleme HeroesComponentiçinde beyanlarına manuel configureTestingModule(içinde app.component.spec.ts) bu hatayı ortadan kaldırır.

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeroesComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
}

Ben de aynı sorunu yaşadım. Burada yayınlanan çözümlerden bazılarını denemeden önce, bileşenin gerçekten çalışıp çalışmadığını kontrol etmek isteyebilirsiniz . Benim için hata IDE'mde (WebStorm) gösterildi, ancak tarayıcıda çalıştırdığımda kodun mükemmel bir şekilde çalıştığı ortaya çıktı.

Terminali kapattıktan (hizmet veren) ve IDE'mi yeniden başlattıktan sonra, mesaj görünmeyi bıraktı.

Aynı sorun genişliği php storm 2017.3 sürümüne sahibim. Bu benim için düzelt: intellij destek forumu

Genişlik @ köşeli dil hizmeti hatasıydı: https://www.npmjs.com/package/@angular/language-service

Benim durumumda, uygulamamda birden fazla modül katmanı vardı, bu nedenle içe aktarmaya çalıştığım modülün pages.module.tsyerine onu kullanan ebeveyn modülüne eklenmesi gerekiyordu app.module.ts.

Aynı sorunu aldım ve bu bileşeni yanlışlıkla içeren farklı özellik modülü nedeniyle oluyordu. Diğer özellikten kaldırıldığında işe yaradı!

Benim durumumdaki sorun modülde bileşen bildiriminin eksik olmasıydı, ancak bildirimi ekledikten sonra bile hata devam etti. Sunucuyu durdurdum ve hatanın ortadan kalkması için tüm projeyi VS Code'da yeniden oluşturdum.

Bu kıvrımlı çerçeve beni deli ediyor. Özel bileşeni SAME modülünün başka bir bileşen parçasının şablonunda tanımladığınızdan, modülde dışa aktarmaları kullanmanız gerekmez (örn. App.module.ts). Bildirimi yukarıda belirtilen modülün @NgModule yönergesinde belirtmeniz yeterlidir:

// app.module.ts

import { JsonInputComponent } from './json-input/json-input.component';

@NgModule({
  declarations: [
    AppComponent,
    JsonInputComponent
  ],
  ...

Özel bileşeni şablonda kullanmak için ( JsonInputComponentbu örnekte) içine AppComponent( bu örnekte) içe aktarmanıza gerek YOKTUR . Her iki bileşenin de tanımlandığı modül adını özel bileşenin önüne eklemeniz yeterlidir (örneğin, uygulama):JsonInputComponentAppComponent

<form [formGroup]="reactiveForm">
  <app-json-input formControlName="result"></app-json-input>
</form>

Dikkat edin app-json-input, json-input değil!

Demo burada: https://github.com/lovefamilychildrenhappiness/AngularCustomComponentValidation

Angular'a başlıyorum ve benim durumumda sorun, 'import' ifadesini ekledikten sonra dosyayı kaydetmemiş olmamdı.

Rota modülleri (bunu bir yanıt olarak görmedim)

İlk kontrol: bileşeni modülünün içinde açıkladıysanız ve dışa aktardıysanız, kullanmak istediğiniz modülü içe aktarın ve bileşeni HTML içinde doğru şekilde adlandırın.

Aksi takdirde, yönlendirme modülünüzdeki bir modülü gözden kaçırabilirsiniz:
Başka bir modülden bir bileşene yönlendiren bir yol içeren bir yönlendirme modülünüz olduğunda, bu modülü o yönlendirme modülüne aktarmanız önemlidir. Aksi takdirde Açısal CLI hata gösterecektir: component is not a known element.

Örneğin

1) Aşağıdaki proje yapısına sahip olmak:

├───core
│   └───sidebar
│           sidebar.component.ts
│           sidebar.module.ts
│
└───todos
    │   todos-routing.module.ts
    │   todos.module.ts
    │
    └───pages
            edit-todo.component.ts
            edit-todo.module.ts

2) İçinde (modülünü içe aktarmadan) todos-routing.module.tsbir yolunuz var edit.todo.component.ts:

  {
    path: 'edit-todo/:todoId',
    component: EditTodoComponent,
  },

Rota iyi çalışacak! Aktarırken Ancak sidebar.module.tsiçini edit-todo.module.tsbir hata alırsınız: app-sidebar is not a known element.

Düzeltme:edit-todo.component.ts 2. adımda bir rota eklediğiniz için , bunu edit-todo.module.tsiçe aktarma olarak eklemeniz gerekecek , bundan sonra içe aktarılan kenar çubuğu bileşeni çalışacaktır!

Ben de aynı sorunla karşı karşıyaydım. Benim durumumda app.module.ts içinde Ana bileşeni bildirmeyi unuttum

Eğer kullanıyorsanız, bir örnek olarak <app-datapicker>içinde seçici ToDayComponentşablonunda, her iki ilan etmeli ToDayComponentve DatepickerComponentiçinde app.module.ts

Sözde bir bileşeniniz var:

Ürün-list.component.ts:

import { Component } from '@angular/core';
    
    @Component({
        selector: 'pm-products',  
        templateUrl: './product-list.component.html'
    })
    
    
    export class ProductListComponent {
      pageTitle: string = 'product list';
    }

Ve bu hatayı alıyorsunuz:

Src / app / app.component.ts'de HATA: 6: 3 - hata NG8001: 'pm-products' bilinen bir öğe değil:

1. 'Pm-products' bir Açısal bileşen ise, bu modülün bir parçası olduğunu doğrulayın.

app.component.ts:

import { Component } from "@angular/core";
@Component({
  selector: 'pm-root', // 'pm-root'
  template: `
  <div><h1>{{pageTitle}}</h1>
  <pm-products></pm-products> // not a known element ?
  </div>
  `
})
export class AppComponent {
  pageTitle: string = 'Acme Product Management';
}

Bileşeni içe aktardığınızdan emin olun:

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// --> add this import (you can click on the light bulb in the squiggly line in VS Code)
import { ProductListComponent } from './products/product-list.component'; 

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent // --> Add this line here

  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent],


})
export class AppModule { }

Bu soru eski ve tuhaf görünebilir, ancak bir modülü yüklemeye çalışırken (tembel yükleme) ve aynı hatayı aldığımda, daha büyük bir modülün parçası olarak gönderilen bileşen için bir dışa aktarma cümlesinin eksik olduğunu fark ettim .

Bu Angular.io Bağlantısı nedenini açıklar : Bir modül içindeki Bileşenler / Hizmetler varsayılan olarak özel (veya korunan) kalır. Bunları halka açık hale getirmek için ihraç etmelisiniz.

@Robin Djikof'un @ live-love kod örneği ile yanıtını genişleterek, benim durumumda teknik olarak eksik olan şey budur (Angular 8):

@NgModule({
  declarations: [
    SomeOtherComponent,
    ProductListComponent
  ],
  imports: [
    DependantModule
  ],
  exports: [ProductListComponent] 
  //<- This line makes ProductListComponent available outside the module, 
  //while keeping SomeOtherComponent private to the module
})
export class SomeLargeModule { }