[angular] 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 {}
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>
태그 지정은 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로 가져 와서 모듈 B의 모듈 A에서 구성 요소를 사용하려고 할 때이 오류가 발생했습니다.
해결책은 exports
배열 에서 해당 구성 요소를 선언하는 것 입니다.
@NgModule({
declarations: [
MyComponent
],
exports: [
MyComponent
]
})
export class ModuleA {}
@NgModule({
imports: [
ModuleA
]
})
export class ModuleB {}
답변
Sanket의 답변 과 의견 의 도움으로 문제를 해결했습니다 .
당신이 모르는 오류 메시지에 분명 아니었다 수있는 것은 : 내가 가져온 PlannerComponent을 A와 NgModule.declaration @ 내 응용 프로그램 모듈 (= 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>
각도 5와 동일한 문제를 가져옵니다 .
app.module.ts 파일에 아래 줄을 추가 하면 됩니다.
import { ---, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FlashMessageModule } from "angular-flash-message";
@NgModule({
---------------
imports: [
FlashMessageModule,
------------------
],
-----------------
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
------------
})
NB : 이 메시지를 메시지 플래시 메시지에 사용하고 있습니다
답변
당신의에서 플래너 구성 요소, 당신은 수입 실종해야 HeaderAreaComponent를 this-처럼
import { HeaderAreaComponent } from '../header-area.component';
//change path according your project
또한 모든 구성 요소와 파이프는 NgModule을 통해 선언해야합니다 .
이것이 도움이되는지보십시오.
답변
Angular 7 에서이 문제에 직면 했으며 문제는 모듈을 만든 후에 수행하지 않았습니다 ng 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();
}));
});