Angular2 RC6: '<bileşen> bilinen bir öğe değil'

Angular 2 RC6 uygulamamı çalıştırmaya çalışırken tarayıcı konsolunda aşağıdaki hatayı alıyorum:

> Error: Template parse errors: 'header-area' is not a known element:
> 1. If 'header-area' is an Angular component, then verify that it is part of this module.
> 2. If 'header-area' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component
> to suppress this message.("

    <div class="page-container">
        [ERROR->]<header-area></header-area>
        <div class="container-fluid">

> "): PlannerComponent@1:2

Bileşenin neden bulunmadığını anlamıyorum. PlannerModule şuna benzer:

@NgModule({
  declarations: [
    PlannerComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    EreignisbarAreaComponent,
    GraphAreaComponent,
    nvD3
    ],
  imports: [
    RouterModule,
    CommonModule,
    ModalModule
    ],
  bootstrap: [PlannerComponent],
})
export class PlannerModule {}

ve ng2'deki Modül kavramını anladığım kadarıyla, modüllerin bölümleri 'bildirimler'de açıklanmıştır. Tamlık için PlannerComponent burada:

@Component({
  selector: 'planner',
  providers: [CalculationService],
  templateUrl: './planner.component.html',
  styleUrls: ['./planner.component.styl']
})
export default class PlannerComponent {
}

ve HeaderAreaComponent:

@Component({
  selector: 'header-area',
  templateUrl: './header-area.component.html',
  styleUrls: ['./header-area.component.styl']
})
export default class HeaderAreaComponent {
}

<header-area>Etiketleme-planner.component.html bulunur:

<div class="page-container">
  <header-area></header-area>
  <div class="container-fluid">

    <div class="row">...

Yanlış bir şey mi anladım?

Güncelleme : Kodu tamamla

planner.module.ts:

import HeaderAreaComponent from '../header-area/header-area.component';
import NavbarAreaComponent from '../navbar-area/navbar-area.component';
import GraphAreaComponent from '../graph-area/graph-area.component';
import EreignisbarAreaComponent from '../ereignisbar-area/ereignisbar-area.component';
import PlannerComponent from './planner.component';
import {NgModule} from '@angular/core';
import {nvD3} from 'ng2-nvd3';
import {RouterModule} from '@angular/router';
import {CommonModule} from '@angular/common';
import {ModalModule} from 'ng2-bootstrap/ng2-bootstrap';

@NgModule({
  declarations: [
    PlannerComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    EreignisbarAreaComponent,
    GraphAreaComponent,
    nvD3
  ],
  imports: [
    RouterModule,
    CommonModule,
    ModalModule
  ],
  bootstrap: [PlannerComponent],
})
export class PlannerModule {
  // TODO: get rid of the "unused class" warning
}

planner.component.ts

import {Component} from '@angular/core';
import CalculationService from '../_shared/services/calculation.service/calculation.service';
import HeaderAreaComponent from '../header-area/header-area.component';

@Component({
  selector: 'planner',
  providers: [CalculationService],
  templateUrl: './planner.component.html',
  styleUrls: ['./planner.component.styl']
})
export default class PlannerComponent {
}

planner.component.html

<div class="page-container">
  <header-area></header-area>
  <div class="container-fluid">

    <div class="row">
      <div class="col-xs-2 col-sm-1 sidebar">
        <navbar-area></navbar-area>
      </div>
      <div class="col-xs-10 col-sm-11">
        <graph-area></graph-area>
      </div>
    </div><!--/.row-->

    <div class="row">
      <div class="col-xs-10 col-sm-11 offset-sm-1">
        <ereignisbar-area></ereignisbar-area>
      </div>
    </div><!--/.row-->

  </div><!--/.container-->
</div><!--/.page-container-->

Modül A'yı Modül B'ye aktardığımda ve ardından Modül B'de Modül A'dan bir bileşen kullanmayı denediğimde bu hatayı aldım.

Çözüm, exportsdizideki o bileşeni bildirmektir .

@NgModule({
  declarations: [
    MyComponent
  ],
  exports: [
    MyComponent
  ]
})
export class ModuleA {}

@NgModule({
  imports: [
    ModuleA
  ]
})
export class ModuleB {}

Sanket'in cevabı ve yorumlarıyla düzelttim .

Bilmediğiniz ve Hata Mesajında ​​görünmeyen şey şudur: PlannerComponent'i Uygulama Modülümde (= RootModule) @ NgModule.declaration olarak içe aktardım.

Hata, PlannerModule @ NgModule.imports olarak içe aktarılarak düzeltildi .

Önce:

@NgModule({
  declarations: [
    AppComponent,
    PlannerComponent,
    ProfilAreaComponent,
    HeaderAreaComponent,
    NavbarAreaComponent,
    GraphAreaComponent,
    EreignisbarAreaComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

Sonra:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routeConfig),
    PlannerModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Yardımınız için teşekkürler :)

Otomatik olarak oluşturulan Webclipse bileşen tanımını kullandıysanız, seçici adının önüne 'app-' eklendiğini görebilirsiniz. Görünüşe göre bu, bir ana uygulama bileşeninin alt bileşenlerini bildirirken yeni bir kuraldır. Açısal IDE'de oluşturmak için 'yeni' - 'bileşen'i kullandıysanız, seçicinizin bileşeninizde nasıl tanımlandığını kontrol edin. Yani koymak yerine

<header-area></header-area>

ihtiyacın olabilir

<app-header-area></app-header-area>

Aynı sorunu <flash-messages></flash-messages>açısal 5 için getiriyorum.

App.module.ts dosyasında aşağıdaki satırları eklemeniz yeterlidir

import { ---, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FlashMessageModule } from "angular-flash-message";


@NgModule({
  ---------------
  imports: [
    FlashMessageModule,
    ------------------         
  ], 
  -----------------
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
  ------------
})

NB: Bunu hızlı mesaj mesajları için kullanıyorum

Sizin de planlayıcısı bileşeni, içe aktarma eksik gerekir HeaderAreaComponent bu- gibi

import { HeaderAreaComponent } from '../header-area.component'; 
//change path according your project

Ayrıca, - Tüm bileşenlerin ve kanalların bir NgModule aracılığıyla bildirilmiş olduğundan emin olun .

Bunun yardımcı olup olmadığına bakın.

Bu sorunla Angular 7'de karşı karşıyaydım ve sorun modülü oluşturduktan sonra gerçekleştirmedim ng build. Ben de yaptım -

• ng build
• ng serve

ve işe yaradı.

Bileşen <router-outlet>ana uygulama sayfasından çıktığında birim testinde gelen hata . bu nedenle bileşeni test dosyasında aşağıdaki gibi tanımlamalısınız.

<app-header></app-header>
<router-outlet></router-outlet>

ve sonra aşağıdaki gibi spec.ts dosyasını eklemeniz gerekir.

import { HeaderComponent } from './header/header.component';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule
      ],
      declarations: [
        App`enter code here`Component,
        HeaderComponent <------------------------
      ],
    }).compileComponents();
  }));
});

Aynı hata mesajına sahip olmanın başka bir olası nedeni, etiket adı ile seçici adı arasındaki uyumsuzluktur. Bu durum için:

<header-area></header-area>etiket adı 'header-area', bileşen bildirimiyle tam olarak eşleşmelidir :

@Component({
  selector: 'header-area',

Açısal RC.6 ile aynı sorunu yaşadım, bazı nedenlerden ötürü bileşeni diğer bileşene bileşen dekoratörü olarak yönergeleri kullanarak ana bileşene geçirmeye izin vermiyor

Ancak, alt bileşeni uygulama modülü aracılığıyla içe aktarırsanız ve bildirim dizisine eklerseniz, hata ortadan kalkar. Bunun neden açısal rc ile ilgili bir sorun olduğuna dair fazla bir açıklama yok.

Bu problemi yaşadığımda, web paketi kullandığım ve içinde gereksinim kullanmam gerektiğinden , dekoratörde sadece 'şablon' yerine 'templateUrl' kullanmamdı . Sadece dekoratör adına dikkat edin, benim durumumda bir pasaj kullanarak standart kodu oluşturdum, dekoratör şu şekilde oluşturuldu:

@Component({
  selector: '',
  templateUrl: 'PATH_TO_TEMPLATE'
})

ama WebPack için dekoratör sadece 'olmalıdır şablon ' DEĞİL ' templateUrl şöyle',:

@Component({
  selector: '',
  template: require('PATH_TO_TEMPLATE')
})

bunu değiştirmek benim için sorunu çözdü.

iki yöntem hakkında daha fazla bilgi edinmek ister misiniz? vs hakkındaki bu orta gönderiyi okuyuntemplatetemplateUrl

Bir dosya adım olduğunda ve sınıf dışa aktarılan uyumsuzluğa sahip olduğumda bu hatayı aldım:

dosyaadı: list.component.ts

dışa aktarılan sınıf: ListStudentsComponent

Dan Değişen ListStudentsComponent için ListComponent sorunumu sabit.

Tam olarak bu problemle karşılaştım. Başarısız: Şablon ayrıştırma hataları: 'uygulama-girişi' bilinen bir öğe değil ... ile ng test. Yukarıdaki yanıtların hepsini denedim: hiçbir şey işe yaramadı.

NG TEST ÇÖZÜMÜ:

Açısal 2 Karma Testi 'bileşen-adı' bilinen bir öğe değil

<= Soruna neden olan bileşenler beforEach(.. declarations[])için app.component.spec.ts'e bildirimler ekledim .

ÖRNEK app.component.spec.ts

...
import { LoginComponent } from './login/login.component';
...
describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        ...
      ],
      declarations: [
        AppComponent,
        LoginComponent
      ],
    }).compileComponents();
  ...

Aynı sorunu yaşadım ve bileşenimin bildirildiği modüldeki (ModuleLower) export dizisine bileşeni (MyComponentToUse) ekleyerek düzelttim. Ardından ModuleLower'ı ModuleHigher'a içe aktarıyorum, böylece artık ModuleLower ve ModuleHigher'daki bileşenimi (MyComponentToUse) yeniden kullanabilirim.

            @NgModule({
              declarations: [
                MyComponentToUse
              ],
              exports: [
                MyComponentToUse
              ]
            })
            export class ModuleLower {}


            @NgModule({
              imports: [
                ModuleLower
              ]
            })
            export class ModuleHigher {} 

Test bileşenini bildirerek test modülünü iyileştireceğim zaman Angular 7 ile aynı sorunu yaşadım. Sadece schemas: [ CUSTOM_ELEMENTS_SCHEMA ]aşağıdaki gibi eklendi ve hata giderildi.

TestBed.configureTestingModule({
  imports: [ReactiveFormsModule, FormsModule],
  declarations: [AddNewRestaurantComponent],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
});

Gelecekteki sorunlar için. Tüm iyi cevapları takip ettiğinizi düşünüyorsanız ve yine de sorun oradadır.

Sunucuyu kapatıp açmayı deneyin.

Aynı sorunu yaşadım, tüm adımları takip ettim, çözemedim. Kapatın, açın ve düzeltildi.

Bir acemi hatası benim durumumda aynı hata mesajını veriyordu.

app-rootEtiket index.html mevcut değildi

OnInitng new ...yeni bileşeni oluşturmak için açısal CLI'da anahtar kelime kullanılırken sınıfıma otomatik olarak uygulandı . Yani uygulamayı kaldırdıktan ve oluşturulan boş yöntemi kaldırdıktan sonra sorun çözüldü.

Benim için templateUrl yolu doğru değildi

Kullanıyordum

alışveriş listem-edit.component.html

Halbuki olmalıydı

./shopping-list-edit.component.html

Aptalca bir hata ama başlangıçta olur. Umarım bu sıkıntıda olan birine yardımcı olur.

Konu için geç cevap, ama eminim başka bir bakış açısıyla açıklanan bu bilgiyi kullanabilecek daha fazla insan vardır.

Ionic'te, özel açısal bileşenler, adı verilen ayrı bir modül altında düzenlenir ComponentsModule. İlk bileşen, bileşenle ionic generate componentbirlikte kullanılarak oluşturulduğunda , iyonik ComponentsModule. Sonraki tüm bileşenler, haklı olarak aynı modüle eklenir.

İşte bir örnek ComponentsModule

import { NgModule } from '@angular/core';
import { CustomAngularComponent } from './custom/custom-angular-component';
import { IonicModule } from 'ionic-angular';
@NgModule({
    declarations: [CustomAngularComponent],
    imports: [IonicModule],
    exports: [CustomAngularComponent],
    entryComponents:[

      ]
})
export class ComponentsModule {}

ComponentsModuleDiğer açısal modüller gibi uygulamada kullanmak ComponentsModulesiçin AppModule,. iyonik oluşturma bileşeni (v 4.12) bu adımı eklemez, bu nedenle bunun manuel olarak eklenmesi gerekir.

AppModule'dan Alıntı:

@NgModule({
  declarations: [
    //declaration
  ],
  imports: [
    //other modules 
    ComponentsModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    //ionic pages
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    //other providers
  ]
})
export class AppModule {}

Tamam, kodun ayrıntılarını, diğer modülün bileşenini nasıl kullanacağımı vereyim.

Örneğin, M2 modülüm var, M2 modülünde comp23 bileşeni ve comp2 bileşeni var, Şimdi app.module'da comp23 ve comp2'yi kullanmak istiyorum, işte nasıl:

bu app.module.ts, yorumuma bakın,

 // import this module's ALL component, but not other module's component, only this module
  import { AppComponent } from './app.component';
  import { Comp1Component } from './comp1/comp1.component';

  // import all other module,
 import { SwModule } from './sw/sw.module';
 import { Sw1Module } from './sw1/sw1.module';
 import { M2Module } from './m2/m2.module';

   import { CustomerDashboardModule } from './customer-dashboard/customer-dashboard.module';


 @NgModule({

    // declare only this module's all component, not other module component.  

declarations: [
AppComponent,
Comp1Component,


 ],

 // imports all other module only.
imports: [
BrowserModule,
SwModule,
Sw1Module,
M2Module,
CustomerDashboardModule // add the feature module here
],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

bu m2 modülü:

   import { NgModule } from '@angular/core';
   import { CommonModule } from '@angular/common';

   // must import this module's all component file
   import { Comp2Component } from './comp2/comp2.component';
   import { Comp23Component } from './comp23/comp23.component';

   @NgModule({

   // import all other module here.
     imports: [
       CommonModule
     ],

    // declare only this module's child component. 
     declarations: [Comp2Component, Comp23Component],

   // for other module to use these component, must exports
     exports: [Comp2Component, Comp23Component]
   })
   export class M2Module { }

Koddaki önerim burada ne yapmanız gerektiğini açıklıyor.

şimdi app.component.html'de kullanabilirsiniz

  <app-comp23></app-comp23>

açısal belge örnek içe aktarma modülünü izleyin