[angular] '<selector>'가 Angular 구성 요소 인 경우이 모듈의 일부인지 확인하십시오.

저는 Angular2에서 처음입니다. 구성 요소를 만들려고했지만 오류가 표시됩니다.

이것은 app.component.ts파일입니다.

import { Component } from '@angular/core';
import { MyComponentComponent } from './my-component.component';

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <my-component></my-component>
  `,
  directives: [MyComponentComponent]
})
export class AppComponent { name = 'Sam' }

이것이 제가 만들고 싶은 구성 요소입니다.

import { Component } from '@angular/core';

@Component({
selector: 'my-component',
template: `
    <p>This is my article</p>
`
})

export class MyComponentComponent {

}

두 가지 오류 표시 :

경우 my-component각도 성분이고, 다음이 모듈의 일부임을 확인.
경우 my-component웹 구성 요소 인 다음 추가 CUSTOM_ELEMENTS_SCHEMA받는 사람 @NgModule.schemas이 메시지를 표시하기 위해이 구성 요소의.

도와주세요.

답변

에 MyComponentComponent있어야합니다 MyComponentModule.

그리고에서는 “내보내기”안에를 MyComponentModule배치해야합니다 MyComponentComponent.

이와 같은 것은 아래 코드를 참조하십시오.

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

및 장소 MyComponentModule에서을 imports에 app.module.ts이 같은 (아래 코드 참조).

import { MyComponentModule } from 'your/file/path';

@NgModule({
   imports: [MyComponentModule]
   declarations: [AppComponent],
   providers: [],
   bootstrap: [AppComponent]
})

export class AppModule {}

이렇게하면 이제 앱에서 구성 요소의 선택기를 인식 할 수 있습니다.

https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html 에서 자세히 알아볼 수 있습니다.

건배!

답변

아마도 이것은 html태그 구성 요소의 이름입니다.

당신은에서 사용하는 html이 같은<mycomponent></mycomponent>

이것을 사용해야합니다 <app-mycomponent></app-mycomponent>

답변

당신은 당신 app.module.ts처럼 그것을 가져오고 지시어 비트를 제거하십시오 :-

@NgModule({
    bootstrap: [AppComponent],
    imports: [MyComponentModule],// or whatever the name of the module is that declares your component.

    declarations: [AppComponent],
    providers: []
})
export class AppModule {}

당신 MyComponentModule은 다음과 같아야합니다 :-

@NgModule({
    imports: [],
    exports: [MyComponentComponent],
    declarations: [MyComponentComponent],
    providers: [],
})
export class MyComponentModule {
}

답변

파일 이름 에서 선택기를 확인하십시오.

다양한 html 파일에서 태그를 사용하면

<my-first-component></my-first-component>

해야한다

<app-my-first-component></app-my-first-component>

예

@Component({
  selector: 'app-my-first-component',
  templateUrl: './my-first-component.component.html',
  styleUrls: ['./my-first-component.component.scss']
})

답변

필자의 경우 하위 구성 요소를 사용하는 구성 요소에 대한 단위 테스트를 작성하고 해당 하위 구성 요소가 템플릿에 있는지 확인하는 테스트를 작성했습니다.

it('should include the interview selection subview', () => {
    expect(fixture.debugElement.query(By.css('app-interview')))
    .toBeTruthy()
  });

오류가 발생하지 않았지만 경고가 표시됩니다.

경고 : ”app-interview ‘는 알려진 요소가 아닙니다.

‘app-interview’가 Angular 구성 요소 인 경우이 모듈의 일부인지 확인합니다. 경고 : ”app-interview ‘는 알려진 요소가 아닙니다.

‘app-interview’가 Angular 구성 요소 인 경우이 모듈의 일부인지 확인합니다.

‘app-interview’가 웹 구성 요소 인 경우이 메시지를 표시하지 않으려면이 구성 요소의 ‘@ NgModule.schemas’에 ‘CUSTOM_ELEMENTS_SCHEMA’를 추가하십시오. ‘

또한 테스트 중에 하위 구성 요소가 브라우저 내부에 표시 되지 않았습니다 .

내가 사용하는 ng g c newcomponent그들이 이미 appmodule에 선언 만하고, 그래서 모든 구성 요소를 생성 할 수 없는 구성 요소에 대해 내가 spec’ing 것을 테스트 모듈을.

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ EditorComponent,
        InterviewComponent]
    })
    .compileComponents();
  }));

답변

AppComponent의 동일한 모듈에서 MyComponentComponent를 선언해야합니다.

import { AppComponent } from '...';
import { MyComponentComponent } from '...';

@NgModule({
   declarations: [ AppComponent, MyComponentComponent ],
   bootstrap: [ AppComponent ]
})
export class AppModule {}

답변

당신 MyComponentComponent을 선언하십시오MyComponentModule
MyComponentComponent에 exports속성 추가MyComponentModule

mycomponentModule.ts

@NgModule({
   imports: [],
   exports: [MyComponentComponent],
   declarations: [MyComponentComponent],
   providers: [],
})

export class MyComponentModule {
}

MyComponentModuleAppModule imports속성에 추가

app.module.ts

    @NgModule({
       imports: [MyComponentModule]
       declarations: [AppComponent],
       providers: [],
       bootstrap: [AppComponent]
    })
    export class AppModule {}

중요 여전히 오류가 발생하면 ctrl+c터미널에서 서버 를 중지 하고 다시 실행하십시오.ng serve -o