[angular] Angular2 RC6 : ‘<component>은 (는) 알려진 요소가 아닙니다’

Program / 글쓴이

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();
  }));
});