Angular2 RC6: '<component> ไม่ใช่องค์ประกอบที่รู้จัก'

ฉันได้รับข้อผิดพลาดต่อไปนี้ในคอนโซลเบราว์เซอร์เมื่อพยายามเรียกใช้แอป Angular 2 RC6 ของฉัน:

> 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

ฉันไม่เข้าใจว่าทำไมไม่พบส่วนประกอบ PlannerModule ของฉันมีลักษณะดังนี้:

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

และเท่าที่ฉันเข้าใจแนวคิดของ Modules ใน ng2 ส่วนต่างๆของโมดูลจะถูกประกาศใน 'การประกาศ' เพื่อความสมบูรณ์นี่คือ PlannerComponent:

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

และ HeaderAreaComponent:

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

<header-area>-Tag ตั้งอยู่ใน planner.component.html:

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

    <div class="row">...

ฉันเข้าใจผิดหรือเปล่า?

อัปเดต : กรอกรหัส

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

ฉันได้รับข้อผิดพลาดนี้เมื่อฉันนำเข้าโมดูล A ไปยังโมดูล B จากนั้นพยายามใช้ส่วนประกอบจากโมดูล A ในโมดูล B

วิธีแก้ปัญหาคือประกาศส่วนประกอบนั้นในexportsอาร์เรย์

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

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

ฉันแก้ไขด้วยความช่วยเหลือของคำตอบและความคิดเห็นของSanket

สิ่งที่คุณไม่สามารถรู้จักและไม่ได้ปรากฏในข้อความข้อผิดพลาดคือ: ผมนำเข้าPlannerComponentเป็น@ NgModule.declarationใน App โมดูลของฉัน (= RootModule)

ข้อผิดพลาดได้รับการแก้ไขโดยการนำเข้าPlannerModuleเป็น @ NgModule.imports

ก่อน:

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

หลังจาก:

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

ขอบคุณสำหรับความช่วยเหลือของคุณ :)

หากคุณใช้นิยามคอมโพเนนต์ที่สร้างขึ้นโดยอัตโนมัติของ Webclipse คุณอาจพบว่าชื่อตัวเลือกมี "app-" อยู่ข้างหน้า เห็นได้ชัดว่านี่เป็นอนุสัญญาใหม่เมื่อประกาศส่วนประกอบย่อยของส่วนประกอบหลักของแอป ตรวจสอบว่าตัวเลือกของคุณได้รับการกำหนดไว้อย่างไรในส่วนประกอบของคุณหากคุณใช้ 'new' - 'component' เพื่อสร้างใน Angular IDE ดังนั้นแทนที่จะวาง

<header-area></header-area>

คุณอาจต้องการ

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

ฉันดึงปัญหาเดียวกันสำหรับ<flash-messages></flash-messages>angular 5

คุณต้องเพิ่มบรรทัดด้านล่างในไฟล์app.module.ts

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


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

หมายเหตุ:ฉันใช้อันนี้สำหรับข้อความแฟลชข้อความ

ในองค์ประกอบการวางแผนของคุณคุณต้องขาดการนำเข้าHeaderAreaComponentเช่นนี้ -

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

ยังให้แน่ใจว่า - ทุกส่วนประกอบและท่อจะต้องประกาศผ่านทาง NgModule

ดูว่าสิ่งนี้ช่วยได้หรือไม่

ฉันกำลังเผชิญปัญหานี้ในเชิงมุม 7ng buildและปัญหาถูกหลังจากการสร้างโมดูลที่ฉันไม่ได้ดำเนินการ ดังนั้นฉันจึงแสดง -

• ng build
• ng serve

และมันได้ผล

เกิดข้อผิดพลาดในการทดสอบหน่วยเมื่อส่วนประกอบไม่อยู่<router-outlet>ในหน้าแอปหลัก ดังนั้นควรกำหนดองค์ประกอบในไฟล์ทดสอบดังต่อไปนี้

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

จากนั้นต้องเพิ่มในไฟล์ spec.ts ดังต่อไปนี้

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

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

สาเหตุที่เป็นไปได้อีกประการหนึ่งของการมีข้อความแสดงข้อผิดพลาดเดียวกันคือความไม่ตรงกันระหว่างชื่อแท็กและชื่อตัวเลือก สำหรับกรณีนี้:

<header-area></header-area>ชื่อแท็กต้องตรงกัน'header-area'ทุกประการจากการประกาศส่วนประกอบ:

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

ฉันมีปัญหาเดียวกันกับ RC.6 เชิงมุมด้วยเหตุผลบางประการมันไม่อนุญาตให้ส่งผ่านส่วนประกอบไปยังส่วนประกอบอื่นโดยใช้คำสั่งเป็นตัวตกแต่งส่วนประกอบไปยังองค์ประกอบหลัก

แต่ถ้าคุณนำเข้าองค์ประกอบลูกผ่านโมดูลแอปและเพิ่มเข้าไปในอาร์เรย์การประกาศข้อผิดพลาดจะหายไป ไม่มีคำอธิบายมากนักว่าเหตุใดจึงเป็นปัญหากับ angular rc.6

เมื่อฉันมีปัญหานี้เป็นเพราะฉันใช้ 'templateUrl' แทนแค่ 'template' ในมัณฑนากรเนื่องจากฉันใช้webpackและจำเป็นต้องใช้ต้องอยู่ในนั้น โปรดระวังชื่อมัณฑนากรในกรณีของฉันฉันสร้างรหัสสำเร็จรูปโดยใช้ข้อมูลโค้ดมัณฑนากรถูกสร้างขึ้นเป็น:

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

แต่สำหรับ webpack มัณฑนากรควรเป็นแค่ ' แม่แบบ ' ไม่ใช่ ' templateUrl ' ดังนี้:

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

การเปลี่ยนสิ่งนี้ช่วยแก้ปัญหาให้ฉันได้

ต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับสองวิธีนี้หรือไม่ อ่านโพสต์ขนาดกลางเกี่ยวกับtemplatevstemplateUrl

ฉันได้รับข้อผิดพลาดนี้เมื่อฉันมีชื่อไฟล์และคลาสที่ส่งออกไม่ตรงกัน:

ชื่อไฟล์: list.component.ts

คลาสที่ส่งออก: ListStudentsComponent

การเปลี่ยนจากListStudentsComponentเป็นListComponent ช่วยแก้ไขปัญหาของฉันได้

ฉันเจอปัญหานี้แน่นอน ล้มเหลว: ข้อผิดพลาดในการแยกวิเคราะห์เทมเพลต: 'app-login' ไม่ใช่องค์ประกอบที่รู้จัก ...กับng testกับฉันลองตอบกลับทั้งหมดข้างต้นแล้ว: ไม่มีอะไรได้ผล

โซลูชันการทดสอบ NG:

Angular 2 Karma Test "ชื่อส่วนประกอบ" ไม่ใช่องค์ประกอบที่รู้จัก

<= ฉันเพิ่มการประกาศสำหรับส่วนประกอบที่กระทำผิดลงbeforEach(.. declarations[])ไปapp.component.spec.ts

ตัวอย่าง app.component.spec.ts

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

ฉันมีปัญหาเดียวกันและฉันแก้ไขโดยการเพิ่มส่วนประกอบ (MyComponentToUse) ในอาร์เรย์การส่งออกในโมดูลที่มีการประกาศส่วนประกอบของฉัน (ModuleLower) จากนั้นฉันนำเข้า ModuleLower ใน ModuleHigher ดังนั้นฉันจึงสามารถใช้ซ้ำได้ในตอนนี้ส่วนประกอบของฉัน (MyComponentToUse) ใน ModuleLower และ ModuleHigher

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


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

ฉันมีปัญหาเดียวกันกับ Angular 7 เมื่อฉันกำลังจะปรับแต่งโมดูลทดสอบโดยการประกาศส่วนประกอบการทดสอบ เพิ่งเพิ่มschemas: [ CUSTOM_ELEMENTS_SCHEMA ]ดังนี้และแก้ไขข้อผิดพลาดแล้ว

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

สำหรับปัญหาในอนาคต. หากคุณคิดว่าคุณทำตามคำตอบที่ดีทั้งหมดแล้วปัญหาก็อยู่ที่นั่น

ลองปิดและเปิดเซิร์ฟเวอร์

ฉันมีปัญหาเดียวกันทำตามขั้นตอนทั้งหมดไม่สามารถแก้ได้ ปิดเปิดและได้รับการแก้ไข

ข้อผิดพลาดสำหรับมือใหม่กำลังสร้างข้อความแสดงข้อผิดพลาดเดียวกันในกรณีของฉัน

ไม่มี app-rootแท็กใน index.html

OnInitถูกนำไปใช้โดยอัตโนมัติในชั้นเรียนของฉันในขณะที่ใช้ng new ...วลีสำคัญบน CLI เชิงมุมเพื่อสร้างองค์ประกอบใหม่ ดังนั้นหลังจากที่ฉันลบการใช้งานและลบเมธอดว่างที่สร้างขึ้นปัญหาจะได้รับการแก้ไข

เส้นทางสำหรับtemplateUrlสำหรับฉันไม่ถูกต้อง

ฉันใช้

ช้อปปิ้งรายการ edit.component.html

ในขณะที่มันควรจะเป็น

./shopping-list-edit.component.html

ความผิดพลาดโง่ ๆ แต่เกิดขึ้นเมื่อเริ่มต้น หวังว่าจะช่วยใครบางคนที่ตกทุกข์ได้ยาก

คำตอบที่ล่าช้าสำหรับเธรด แต่ฉันแน่ใจว่ามีคนจำนวนมากที่สามารถใช้ข้อมูลนี้อธิบายในมุมมองอื่น

ในอิออน, ComponentsModuleส่วนประกอบเชิงมุมที่กำหนดเองจะจัดขึ้นภายใต้โมดูลที่แยกต่างหากที่เรียกว่า เมื่อส่วนประกอบแรกถูกสร้างขึ้นโดยใช้ionic generate componentพร้อมกับส่วนประกอบไอออนิกจะสร้างไฟล์ComponentsModule. ส่วนประกอบที่ตามมาจะถูกเพิ่มลงในโมดูลเดียวกันอย่างถูกต้อง

นี่คือตัวอย่าง 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 {}

ในการใช้ComponentsModuleแอปนี้เช่นเดียวกับโมดูลเชิงมุมอื่น ๆComponentsModulesจำเป็นต้องนำเข้าไฟล์AppModule. ส่วนประกอบสร้างไอออนิก (v 4.12) ไม่ได้เพิ่มขั้นตอนนี้ดังนั้นจึงต้องเพิ่มด้วยตนเอง

ข้อความที่ตัดตอนมาจาก 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 {}

โอเคขอรายละเอียดโค้ดวิธีใช้ส่วนประกอบของโมดูลอื่น ๆ

ตัวอย่างเช่นฉันมีโมดูล M2 โมดูล M2 มีคอมโพเนนต์ comp23 และคอมโพเนนต์ comp2 ตอนนี้ฉันต้องการใช้ comp23 และ comp2 ใน app.module นี่คือวิธี:

นี่คือ app.module.ts ดูความคิดเห็นของฉัน

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

นี่คือโมดูล 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 { }

คำชมเชยของฉันในรหัสอธิบายสิ่งที่คุณต้องทำที่นี่

ตอนนี้ใน app.component.html คุณสามารถใช้

  <app-comp23></app-comp23>

ทำตามโมดูลการนำเข้าตัวอย่าง doc เชิงมุม