'<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 {

}

두 가지 오류 표시 :

1. 경우 my-component각도 성분이고, 다음이 모듈의 일부임을 확인.
2. 경우 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 '는 알려진 요소가 아닙니다.

1. 'app-interview'가 Angular 구성 요소 인 경우이 모듈의 일부인지 확인합니다. 경고 : ''app-interview '는 알려진 요소가 아닙니다.
2. 'app-interview'가 Angular 구성 요소 인 경우이 모듈의 일부인지 확인합니다.
3. '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 {}

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

mycomponentModule.ts

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

export class MyComponentModule {
}

3. MyComponentModuleAppModule imports속성에 추가

app.module.ts

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

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

제 경우에는 공유 모듈에 구성 요소가 있습니다.

구성 요소가로드되고 잘 작동했지만 typescript는 html 태그를 빨간색 선으로 강조 표시하고이 오류 메시지를 표시했습니다.

이 구성 요소 내에서 rxjs 연산자를 가져 오지 않은 것으로 나타났습니다.

import {map} from 'rxjs/operators';

이 가져 오기를 추가했을 때 오류 메시지가 사라졌습니다.

구성 요소 내부의 모든 가져 오기를 확인합니다 .

누군가에게 도움이되기를 바랍니다.

부모 구성 요소가 선언되는 모듈을 확인하십시오.

부모 구성 요소가 공유 모듈에 정의되어 있으면 자식 모듈도 마찬가지입니다.

부모 구성 요소는 파일 디렉터리 구조 / 이름 지정을 기반으로하는 논리적 모듈이 아닌 공유 모듈에서 선언 될 수 있습니다. Angular CLI에서도 제 경우에는 잘못된 모듈에 추가했습니다.

당신이 가지고 있기를 바랍니다 app.module.ts. app.module.ts아래 줄에 추가-

 exports: [myComponentComponent],

이렇게 :

import { NgModule, Renderer } from '@angular/core';
import { HeaderComponent } from './headerComponent/header.component';
import { HeaderMainComponent } from './component';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [
        HeaderMainComponent,
        HeaderComponent
    ],
    imports: [
        RouterModule,
    ],
    providers: [],
    bootstrap: [HeaderMainComponent],
    exports: [HeaderComponent],
})
export class HeaderModule { }

components.module.ts에서 다음과 같이 IonicModule을 가져와야합니다.

import { IonicModule } from '@ionic/angular';

그런 다음 IonicModule을 다음과 같이 가져옵니다.

  imports: [
    CommonModule,
    IonicModule
  ],

따라서 components.module.ts는 다음과 같습니다.

import { CommonModule } from '@angular/common';
import {PostComponent} from './post/post.component'
import { IonicModule } from '@ionic/angular';

@NgModule({
  declarations: [PostComponent],
  imports: [
    CommonModule,
    IonicModule
  ],
  exports: [PostComponent]
})
export class ComponentsModule { }```

하지마 export **default** class MyComponentComponent!

특정 질문이 아닌 경우 제목에 해당 할 수있는 관련 문제 :

실수로 ...

export default class MyComponentComponent {

... 그리고 그것도 일을 망쳤습니다.

왜? VS Code는에 넣을 때 내 모듈에 가져 오기를 추가 declarations했지만 대신 ...

import { MyComponentComponent } from '...';

그것은 가지고 있었다

import MyComponentComponent from '...';

그리고 그것은 다운 스트림으로 매핑되지 않았습니다. 기본 가져 오기를 사용하여 "정말"이름이 지정되지 않았기 때문이라고 가정합니다.

export class MyComponentComponent {

아니 default. 이익.