Angular 2 '구성 요소'는 알려진 요소가 아닙니다.

Angular 2 '구성 요소'는 알려진 요소가 아닙니다.

---

다른 모듈의 AppModule 내부에서 만든 구성 요소를 사용하려고합니다. 그래도 다음과 같은 오류가 발생합니다.

"Uncaught (in promise) : 오류 : 템플릿 구문 분석 오류 :

'contacts-box'는 알려진 요소가 아닙니다.

1. 'contacts-box'가 Angular 구성 요소 인 경우이 모듈의 일부인지 확인합니다.
2. 'contacts-box'가 웹 구성 요소 인 경우이 메시지를 표시하지 않으려면이 구성 요소의 '@ NgModule.schemas'에 'CUSTOM_ELEMENTS_SCHEMA'를 추가하십시오.

내 프로젝트 구조는 매우 간단합니다.

내 페이지를 pages 디렉토리에 보관합니다. 여기서 각 페이지는 다른 모듈 (예 : customers-module)에 보관되고 각 모듈에는 여러 구성 요소 (예 : customers-list-component, customers-add-component 등)가 있습니다. 해당 구성 요소 내에서 ContactBoxComponent를 사용하고 싶습니다 (예를 들어 customers-add-component 내부).

보시다시피 위젯 디렉터리 내에 연락처 상자 구성 요소를 만들었으므로 기본적으로 AppModule 내에 있습니다. App.module.ts에 ContactBoxComponent 가져 오기를 추가하고 AppModule의 선언 목록에 넣었습니다. 작동하지 않아서 문제를 검색하고 ContactBoxComponent를 목록 내보내기에도 추가했습니다. 도움이되지 않았습니다. 또한 ContactBoxComponent를 CustomersAddComponent에 넣은 다음 다른 모듈에 넣으려고 시도했지만 여러 선언이 있다는 오류가 발생했습니다.

내가 무엇을 놓치고 있습니까?

---

이러한 오류가 발생했을 때 수행하는 5 단계입니다.

• 이름이 맞습니까? (또한 구성 요소에 정의 된 선택기를 확인하십시오)
• 모듈에서 구성 요소를 선언 하시겠습니까?
• 다른 모듈에있는 경우 구성 요소를 내보내시겠습니까?
• 다른 모듈에있는 경우 해당 모듈을 가져 오시겠습니까?
• CLI를 다시 시작 하시겠습니까?

또한 ContactBoxComponent를 CustomersAddComponent에 넣은 다음 다른 모듈에 넣으려고 시도했지만 여러 선언이 있다는 오류가 발생했습니다.

구성 요소를 두 번 선언 할 수 없습니다. 새로운 별도의 모듈에서 컴포넌트를 선언하고 내 보내야합니다. 다음으로 구성 요소를 사용하려는 모든 모듈에서이 새 모듈을 가져와야합니다.

언제 새 모듈을 만들어야하는지, 언제 만들지 말아야하는지 말하기는 어렵습니다. 일반적으로 재사용하는 모든 구성 요소에 대해 새 모듈을 만듭니다. 거의 모든 곳에서 사용하는 구성 요소가 있으면 단일 모듈에 넣습니다. 재사용하지 않는 구성 요소가 있으면 다른 곳에서 필요할 때까지 별도의 모듈을 만들지 않습니다.

모든 구성 요소를 단일 모듈에 넣는 것이 유혹적 일 수 있지만 이는 성능에 좋지 않습니다. 개발하는 동안 모듈은 변경 될 때마다 다시 컴파일해야합니다. 모듈이 클수록 (구성 요소가 많을수록) 더 많은 시간이 걸립니다. 큰 모듈을 조금만 변경하는 것은 작은 모듈을 조금만 변경하는 것보다 시간이 더 걸립니다.

---

나는 똑같은 문제가 있었다. 여기에 게시 된 일부 솔루션을 시도하기 전에 구성 요소가 실제로 작동하지 않는지 확인하는 것이 좋습니다. 저에게는 IDE (WebStorm)에 오류가 표시되었지만 브라우저에서 실행했을 때 코드가 완벽하게 작동하는 것으로 나타났습니다.

나는 (역할 NG 실행중인) 터미널 종료 후 및 내 IDE를 다시 시작을, 메시지가 나타나고 중단했다.

---

비슷한 문제가있었습니다. 그것은 밝혀졌다 ng generate component(CLI 버전 7.1.4을 사용하는)이 AppModule에 하위 구성 요소에 대한 선언을 추가 아닌 테스트 베드 모듈이 에뮬레이트 그것.

"Tour of Heroes"샘플 앱에는 HeroesComponentwith 선택기 가 포함되어 있습니다 app-heroes. 앱이 제공되었을 때 정상적으로 실행되었지만 ng test다음 오류 메시지가 생성 'app-heroes' is not a known element되었습니다.. (in ) HeroesComponent의 선언에 수동으로 추가 하면이 오류가 제거됩니다.configureTestingModuleapp.component.spec.ts

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent,
        HeroesComponent
      ],
    }).compileComponents();
  }));

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
}

---

동일한 문제 너비 php storm 버전 2017.3이 있습니다. 나를 위해 수정 : intellij 지원 포럼

@angular 언어 서비스에서 오류 너비였습니다 : https://www.npmjs.com/package/@angular/language-service

---

동일한 문제가 발생했으며 실수 로이 구성 요소를 포함하는 다른 기능 모듈로 인해 발생했습니다. 다른 기능에서 제거하면 작동했습니다!

---

제 경우의 문제는 모듈에서 구성 요소 선언이 누락되었지만 선언을 추가 한 후에도 오류가 지속되었습니다. 서버를 중지하고 VS Code에서 전체 프로젝트를 다시 빌드하여 오류를 해결했습니다.

---

내가 가져 오려는 된 모듈이 실제로 사용하는 모듈 부모에 추가했다, 그래서 내 경우에는, 내 응용 프로그램, 모듈의 여러 레이어를 가지고 pages.module.ts대신, app.module.ts.

참고 URL : https://stackoverflow.com/questions/44429996/angular-2-component-is-not-a-known-element