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

"미 발견 (약속) : 오류 : 템플릿 구문 분석 오류 :

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

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

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

페이지를 페이지 디렉토리에 유지합니다. 여기서 각 페이지는 다른 모듈 (예 : 고객 모듈)로 유지되고 각 모듈에는 여러 구성 요소 (고객 목록 구성 요소, 고객 추가 구성 요소 등)가 있습니다. 해당 구성 요소 내에서 ContactBoxComponent를 사용하고 싶습니다 (예 : 고객 추가 구성 요소 내부).

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

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

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

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

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

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

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

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

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

"Tour of Heroes"샘플 앱에는 HeroesComponentwith selector 가 포함되어 있습니다 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();
  });
}

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

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

동일한 문제 너비 PHP 스톰 버전 2017.3이 있습니다. 이 문제가 해결되었습니다 : intellij 지원 포럼

@angular language service의 오류 너비입니다 : https://www.npmjs.com/package/@angular/language-service

필자의 경우 응용 프로그램에 여러 계층의 모듈이 있었으므로 가져 오려고했던 모듈을 실제로 pages.module.ts대신 사용했던 모듈 부모에 추가해야했습니다 app.module.ts.

같은 문제가 발생하여 실수 로이 구성 요소가 포함 된 다른 기능 모듈로 인해 발생했습니다. 다른 기능에서 제거하면 효과가 있습니다!

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

이 복잡한 프레임 워크는 나를 혼란스럽게합니다. SAME 모듈의 다른 구성 요소 부분 템플리트에서 사용자 정의 구성 요소를 정의한 경우 모듈에서 내보내기를 사용할 필요가 없습니다 (예 : app.module.ts). 위에서 언급 한 모듈의 @NgModule 지시문에 선언을 지정하면됩니다.

// app.module.ts

import { JsonInputComponent } from './json-input/json-input.component';

@NgModule({
  declarations: [
    AppComponent,
    JsonInputComponent
  ],
  ...

템플릿 에서 사용자 컴포넌트 를 사용하기 위해 (이 예제에서) ( JsonInputComponent이 예제에서)로 가져올 필요는 없습니다 . 사용자 지정 구성 요소 앞에 두 구성 요소가 모두 정의 된 모듈 이름 (예 : app)을 접두어로 추가하면됩니다.AppComponentJsonInputComponentAppComponent

<form [formGroup]="reactiveForm">
  <app-json-input formControlName="result"></app-json-input>
</form>

json-input이 아닌 app-json-input에 주목하십시오!

여기 데모 : https://github.com/lovefamilychildrenhappiness/AngularCustomComponentValidation

나는 Angular를 시작하고 있으며, 문제는 'import'문을 추가 한 후 파일을 저장하지 않았다는 것입니다.

라우트 모듈 (이것이 답으로 보지 않았다)

먼저 확인 : 모듈 내부에서 구성 요소를 선언하고 내 보낸 경우, 사용하려는 모듈을 가져오고 HTML 내에서 구성 요소의 이름을 올바르게 지정하십시오.

그렇지 않으면 라우팅 모듈 내부의 모듈이 누락
될 수 있습니다. 다른 모듈에서 구성 요소로 라우팅하는 라우팅이있는 라우팅 모듈이있는 경우 해당 모듈을 해당 라우팅 모듈 내에서 가져와야합니다. 그렇지 않으면 Angular CLI에 오류가 표시 component is not a known element됩니다..

예를 들어

1) 프로젝트 구조는 다음과 같습니다.

├───core
│   └───sidebar
│           sidebar.component.ts
│           sidebar.module.ts
│
└───todos
    │   todos-routing.module.ts
    │   todos.module.ts
    │
    └───pages
            edit-todo.component.ts
            edit-todo.module.ts

2) 내부에는 (모듈을 가져 오지 않고) todos-routing.module.ts경로가 있습니다 edit.todo.component.ts.

  {
    path: 'edit-todo/:todoId',
    component: EditTodoComponent,
  },

경로는 잘 작동합니다! 그러나 sidebar.module.ts내부를 가져올 때 edit-todo.module.ts오류가 발생 app-sidebar is not a known element합니다.

수정 :edit-todo.component.ts 2 단계에서 경로를 추가 edit-todo.module.ts했으므로 가져온 사이드 바 구성 요소가 작동 한 후 경로를 가져 오기 로 추가해야합니다 !

나는 같은 문제에 직면했다. 필자의 경우 app.module.ts 에서 Parent 구성 요소를 선언하는 것을 잊었 습니다.

예를 들어 템플릿에서 <app-datapicker>선택기를 사용 하는 경우 app.module.ts 와 ToDayComponent둘 다에 선언해야 합니다 .ToDayComponentDatepickerComponent

아마도 구성 요소가 있습니다.

product-list.component.ts :

import { Component } from '@angular/core';
    
    @Component({
        selector: 'pm-products',  
        templateUrl: './product-list.component.html'
    })
    
    
    export class ProductListComponent {
      pageTitle: string = 'product list';
    }

그리고이 오류가 발생합니다 :

src / app / app.component.ts : 6 : 3의 오류-오류 NG8001 : 'pm-products'는 알려진 요소가 아닙니다 :

1. 'pm-products'가 각도 컴포넌트 인 경우이 모듈의 일부인지 확인하십시오.

app.component.ts :

import { Component } from "@angular/core";
@Component({
  selector: 'pm-root', // 'pm-root'
  template: `
  <div><h1>{{pageTitle}}</h1>
  <pm-products></pm-products> // not a known element ?
  </div>
  `
})
export class AppComponent {
  pageTitle: string = 'Acme Product Management';
}

구성 요소를 가져와야합니다.

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// --> add this import (you can click on the light bulb in the squiggly line in VS Code)
import { ProductListComponent } from './products/product-list.component'; 

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent // --> Add this line here

  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent],


})
export class AppModule { }

이 질문은 오래되고 이상하게 보일 수 있지만 모듈 (로드 지연)을로드하려고 할 때 동일한 오류가 발생 하면 더 큰 모듈의 일부로 제공된 구성 요소에 대한 내보내기 절이 누락되었음을 알았습니다 .

이 Angular.io 링크는 이유를 설명합니다 : 모듈 내부의 컴포넌트 / 서비스는 기본적으로 비공개 (또는 보호)로 유지됩니다. 공개하려면 내 보내야합니다.

@ live-love code sample 으로 @Robin Djikof의 답변 을 확장하면 내 경우에는 기술적으로 누락 된 것입니다 (Angular 8).

@NgModule({
  declarations: [
    SomeOtherComponent,
    ProductListComponent
  ],
  imports: [
    DependantModule
  ],
  exports: [ProductListComponent] 
  //<- This line makes ProductListComponent available outside the module, 
  //while keeping SomeOtherComponent private to the module
})
export class SomeLargeModule { }