Angular2 RC6: '<component> bukan elemen yang dikenal'

Saya mendapatkan kesalahan berikut di konsol browser ketika mencoba menjalankan aplikasi Angular 2 RC6 saya:

> 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

Saya tidak mengerti mengapa komponen tidak ditemukan. PlannerModule saya terlihat seperti ini:

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

dan sejauh yang saya mengerti konsep Modul dalam ng2, bagian-bagian modul dinyatakan dalam 'deklarasi'. Untuk kelengkapan, berikut adalah PlannerComponent:

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

dan komponen HeaderArea:

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

The <header-area>-Tag terletak di planner.component.html:

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

    <div class="row">...

Apakah saya melakukan kesalahan?

Perbarui : Kode lengkap

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

Saya menerima kesalahan ini ketika saya mengimpor Modul A ke Modul B, dan kemudian mencoba menggunakan komponen dari Modul A di Modul B.

Solusinya adalah mendeklarasikan komponen itu dalam exportsarray.

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

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

Saya memperbaikinya dengan bantuan jawaban Sanket dan komentarnya.

Apa yang tidak dapat Anda ketahui dan tidak tampak dalam Pesan Kesalahan adalah: Saya mengimpor PlannerComponent sebagai @ NgModule.declaration di Modul Aplikasi saya (= RootModule).

Kesalahan diperbaiki dengan mengimpor PlannerModule sebagai @ NgModule.import .

Sebelum:

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

Setelah:

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

Terima kasih atas bantuan Anda :)

Jika Anda telah menggunakan Webclipse yang secara otomatis menghasilkan definisi komponen, Anda mungkin menemukan bahwa nama pemilih 'app-' bersesuaian dengannya. Tampaknya ini adalah konvensi baru ketika mendeklarasikan sub-komponen komponen aplikasi utama. Periksa bagaimana pemilih Anda telah ditentukan dalam komponen Anda jika Anda telah menggunakan 'baru' - 'komponen' untuk membuatnya di IDE Angular. Jadi, bukannya menempatkan

<header-area></header-area>

Anda mungkin perlu

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

Saya mengambil masalah yang sama untuk <flash-messages></flash-messages>dengan sudut 5.

Anda hanya perlu menambahkan baris di bawah ini di file app.module.ts

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


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

NB: Saya menggunakan ini untuk pesan flash-messages

Dalam komponen perencana Anda, Anda harus kehilangan impor HeaderAreaComponent seperti ini-

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

Pastikan juga - Semua komponen dan pipa harus dideklarasikan melalui NgModule .

Lihat apakah ini membantu.

Saya menghadapi masalah ini pada Angular 7 dan masalahnya adalah setelah membuat modul, saya tidak melakukan ng build. Jadi saya tampil -

• ng build
• ng serve

dan itu berhasil.

Kesalahan datang dalam unit test, ketika komponen keluar dari <router-outlet>halaman aplikasi utama. jadi harus mendefinisikan komponen dalam file tes seperti di bawah ini.

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

dan kemudian perlu menambahkan file spec.ts seperti di bawah ini.

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

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

Penyebab lain yang mungkin memiliki pesan kesalahan yang sama adalah ketidakcocokan antara nama tag dan nama pemilih. Untuk kasus ini:

<header-area></header-area>nama tag harus sama persis 'header-area'dengan deklarasi komponen:

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

Saya punya masalah yang sama dengan RC.6 sudut untuk beberapa alasan itu tidak memungkinkan lewat komponen ke komponen lain menggunakan arahan sebagai dekorator komponen ke komponen induk

Tetapi jika Anda mengimpor komponen turunan melalui modul aplikasi dan menambahkannya dalam deklarasi array kesalahan hilang. Tidak ada banyak penjelasan mengapa ini merupakan masalah dengan rc sudut

Ketika saya memiliki masalah ini, itu karena saya menggunakan 'templateUrl' bukan hanya 'template' di dekorator, karena saya menggunakan webpack dan harus menggunakan memerlukan di dalamnya. Berhati-hatilah dengan nama dekorator, dalam kasus saya, saya membuat kode boilerplate menggunakan potongan, dekorator dibuat sebagai:

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

tetapi untuk webpack dekorator harus hanya ' template ' TIDAK ' templateUrl ', seperti:

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

mengubah ini memecahkan masalah bagi saya.

ingin tahu lebih banyak tentang dua metode? baca postingan media ini tentang templatevstemplateUrl

Saya mendapatkan kesalahan ini ketika saya memiliki nama file dan kelas yang diekspor tidak cocok:

nama file: list.component.ts

kelas yang diekspor: ListStudentsComponent

Mengubah dari ListStudentsComponent ke ListComponent tetap masalah saya.

Saya menemukan masalah yang tepat ini. Gagal: Kesalahan parse templat: 'masuk-aplikasi' bukan elemen yang dikenal ... denganng test . Saya mencoba semua balasan di atas: tidak ada yang berhasil.

SOLUSI UJI NG:

Angular 2 Karma Test 'nama-nama' bukan elemen yang dikenal

<= Saya menambahkan deklarasi untuk komponen menyinggung ke beforEach(.. declarations[])ke app.component.spec.ts .

CONTOH app.component.spec.ts

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

Saya memiliki masalah yang sama dan saya memperbaikinya dengan menambahkan komponen (MyComponentToUse) dalam array ekspor di modul tempat komponen saya dideklarasikan (ModuleLower). Kemudian saya mengimpor ModuleLower di ModuleHigher, jadi saya dapat menggunakan kembali sekarang komponen saya (MyComponentToUse) di ModuleLower dan ModuleHigher

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


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

Saya memiliki masalah yang sama dengan Angular 7 ketika saya akan memperbaiki modul tes dengan mendeklarasikan komponen tes. Baru ditambahkan schemas: [ CUSTOM_ELEMENTS_SCHEMA ]sebagai berikut dan kesalahan telah diselesaikan.

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

Untuk masalah di masa depan. Jika Anda pikir Anda telah mengikuti semua jawaban yang baik namun, masalahnya ada di sana.

Coba matikan dan hidupkan server.

Saya memiliki masalah yang sama, mengikuti semua langkah, tidak bisa menyelesaikannya. Matikan, nyalakan dan sudah diperbaiki.

Kesalahan newbie menghasilkan pesan kesalahan yang sama dalam kasus saya.

The app-roottag tidak hadir di index.html

OnInitsecara otomatis diimplementasikan pada kelas saya saat menggunakan ng new ...frase kunci pada CLI sudut untuk menghasilkan komponen baru. Jadi setelah saya menghapus implementasi dan menghapus metode kosong yang dihasilkan, masalahnya teratasi.

Bagi saya jalur untuk templateUrl tidak benar

Saya menggunakan

shopping-list-edit.component.html

Padahal seharusnya begitu

./shopping-list-edit.component.html

Kesalahan konyol tetapi terjadi saat memulai. Harapan yang membantu seseorang dalam kesulitan.

Jawaban terlambat untuk utas, tetapi saya yakin ada lebih banyak orang yang dapat menggunakan informasi ini dijelaskan dalam perspektif lain.

Di Ionic, komponen sudut khusus diatur di bawah modul terpisah yang disebut ComponentsModule. Ketika komponen pertama dihasilkan menggunakan ionic generate component, bersama dengan komponen, ion menghasilkan ComponentsModule. Setiap komponen selanjutnya akan ditambahkan ke modul yang sama, memang demikian.

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

Untuk menggunakan ComponentsModuledalam aplikasi, seperti modul sudut lainnya, ComponentsModuleskebutuhan harus diimpor ke AppModule. komponen penghasil ion (v 4.12) tidak menambahkan langkah ini, jadi ini harus ditambahkan secara manual.

Kutipan dari AppModule:

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

Ok, izinkan saya memberikan rincian kode, cara menggunakan komponen modul lain.

Sebagai contoh, saya memiliki modul M2, modul M2 memiliki komponen comp23 dan komponen comp2, Sekarang saya ingin menggunakan comp23 dan comp2 di app.module, berikut ini caranya:

ini app.module.ts, lihat komentar saya,

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

ini adalah modul m2:

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

Perintah saya dalam kode menjelaskan apa yang perlu Anda lakukan di sini.

sekarang di app.component.html, Anda dapat menggunakan

  <app-comp23></app-comp23>

ikuti modul impor sampel doc sudut