sourcecode

'가 Angular 컴포넌트인 경우 이 모듈의 일부인지 확인합니다.

codebag 2023. 2. 15. 21:56
반응형

'가 Angular 컴포넌트인 경우 이 모듈의 일부인지 확인합니다.

저는 Angular2에 처음 왔어요.컴포넌트를 작성하려고 했지만 오류가 나타난다.

은 ★★★입니다.app.component.tsfilename을 클릭합니다.

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. ifmy-component각이 지다.이 컴포넌트가 이 모듈의 일부인지 확인합니다.
  2. ifmy-component 웹 컴포넌트를 추가합니다.그 후CUSTOM_ELEMENTS_SCHEMA@NgModule.schemas이 메시지를 표시하지 않도록 설정합니다.

제발 도와주세요.

의 ★★★★★★★★★★★★★★★★★.MyComponentComponent 한다MyComponentModule.

★★★★★★★★★★★★★★★.MyComponentModule를 배치해야 합니다.MyComponentComponent 안에 요.실'' 에에있있요어

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

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

export class MyComponentModule {
}

를 and and and and and the 를 놓는다.MyComponentModule importsapp.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>

「 Import 」로 Import 하고 ?app.module.ts비트를 제거합니다.- 와와 、 와와 、 like like 、 : like:::: 。-

@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 {
}

제 경우 서브컴포넌트를 사용하는 컴포넌트에 대해 유닛테스트를 작성하고 서브컴포넌트가 템플릿에 포함되어 있는지 확인하기 위해 테스트를 작성했습니다.

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.SKEMA'에 'CUSTOM_ELEATES_SCHEMA'를 추가하여 이 메시지를 표시하지 마십시오.

또한 테스트 중에 브라우저 내부에 서브컴포넌트가 표시되지 않았습니다.

하였습니다.ng g c newcomponent모든 컴포넌트를 생성하기 위해 앱모듈에서 이미 선언되었지만, 내가 지정한 컴포넌트에 대한 테스트 모듈은 아니었다. 

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

filename.component.ts 내의 셀렉터를 체크합니다.

다양한 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']
})
  1. MyComponentComponentMyComponentModule
  2. 를를 add add add add add 를 추가하다MyComponentComponent로로 합니다.exports「」의 어트리뷰트MyComponentModule

mycomponent Module.ts

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

export class MyComponentModule {
}
  1. 를를 add add add add add 를 추가하다MyComponentModule 모듈로의 이행imports

app.disc.ts

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

중요 에러가 아직 남아 있는 경우는, 서버를 정지해 주세요.ctrl+cng serve -o

tsconfig.json 파일로 이동하여 angularCompilerOption 아래에 다음 코드를 작성합니다.

 "angularCompilerOptions": {
     "fullTemplateTypeCheck": true,
     "strictInjectionParameters": true,
     **"enableIvy": false**
 }

발생했는데 가 '''로 하고 있는 을 발견했습니다.<app-[component-name]></app-[component-name]>이 'CHANGE'인mycomponent.component.ts:

@Component({
  selector: 'my-app',
  template: `
    <h1>Hello {{name}}</h1>
    <h4>Something</h4>
    <app-mycomponent></app-mycomponent>
  `,

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

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

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

제 경우 Shared 모듈에 컴포넌트가 있습니다.

컴포넌트가 로드되어 정상적으로 동작하고 있었습니다만, 타이프스크립트는 html 태그를 빨간색 행으로 강조 표시하고 있었고, 이 에러 메세지가 표시되었습니다.

이 컴포넌트 안에는 rxjs 연산자를 Import하지 않았습니다.

import {map} from 'rxjs/operators';

이 Import를 추가하자 오류 메시지가 사라졌습니다.

컴포넌트 내부의 Import를 모두 확인합니다.

도움이 됐으면 좋겠는데

부모 컴포넌트가 선언되어 있는 모듈을 확인합니다.

부모 컴포넌트가 공유 모듈에 정의되어 있는 경우 자녀 모듈도 정의되어 있어야 합니다.

상위 컴포넌트는 파일 디렉토리 구조/이름 지정에 따라 논리적인 모듈이 아닌 공유 모듈로 선언할 수 있습니다.내 경우 Angular CLI에서도 잘못된 모듈에 추가되어 있습니다.

Angular 컴포넌트Angular v11)를 느리게 할때 이 했습니다.await import('./my-component.component')） 및 ) 。import ★★★★★★★★★★★★★★★★★」export이치노

저는 이 솔루션이 개별 전용 모듈의 파일을 삭제하고 모듈 내용을 컴포넌트 파일 내부로 이동시키고 있다는 것을 알게 되었습니다.

rm -r my-component.module.ts

합니다.my-component.ts한 파일 (동일한 파일명)

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

@NgModule({
  imports: [CommonModule],
  declarations: [MyComponent],
})
export class MyComponentModule {}

바랍니다.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에서 Ionic Module을 다음과 같이 Import해야 합니다.

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

다음으로 Ionic Module을 다음과 같이 Import합니다.

  imports: [
    CommonModule,
    IonicModule
  ],

컴포넌트.components.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 Import(VS 코드) Import(가져오기)declarations★★★★★★★★★★★...

import { MyComponentComponent } from '...';

가지고 있었다

import MyComponentComponent from '...';

디폴트 Import를 사용하여 "실제로" 명명되지 않았기 때문에 다운스트림으로 매핑되지 않았습니다.

export class MyComponentComponent {

.default★★★★★★ 。

감이 , 하고 있습니다.ng serve가 되었습니다.)이치노

위의 오류는 Angular 9 이후에서도 발생합니다.이 책은 해결책을 제시한다.

경고는 CUSTOM_ELEments_SCHEMA를 의미하지만 문제의 요소는 웹 컴포넌트가 아닙니다.Angular가 단순히 요소를 무시했으면 합니다.따라서 NO_ERRORS_SCHEMA를 사용합니다.이는 "모든 요소의 모든 속성을 허용하는 스키마"입니다.추가 중schemas: [NO_ERRORS_SCHEMA]에러를 삭제합니다.

await TestBed.configureTestingModule({
  declarations: [MyComponent],
  schemas: [NO_ERRORS_SCHEMA],
}).compileComponents();

비슷한 문제가 발생했지만, 언급된 해결 방법이 모두 작동하지 않았습니다.결국 라우팅에 문제가 있음을 깨달았습니다.

app-routing.module에서 컴포넌트를 지정하면 다음과 같이 됩니다.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { MainComponent } from './pages/main/main.component';

const routes: Routes = [
  {
    path: '', 
    component: MainComponent
  },
]

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

AppModule에 MainModule을 Import할 필요가 없습니다.여기서는 컴포넌트만 Import되기 때문에 이는 잘못된 것입니다.MainModule에서 선언된 다른 컴포넌트는 표시되지 않으므로 설명한 오류 메시지가 나타납니다.

해결책 1:
선언 모듈을 Import합니다.
해결책 2:
다음과 같이 컴포넌트를 천천히 로드합니다.

const routes: Routes = [
{
    path: '', loadChildren: () => import('path_to_your_declaringModule').then(m => m.declaringModule)},
}

모듈 전체를 Import 할 수 있기 때문에 동작합니다.

이 예에서는 루팅을 사용하지 않습니다.저처럼 루팅을 사용하여 해결책을 찾기 위해 이 질문을 우연히 발견할 수 있는 다른 사람에게 이 글을 올렸을 뿐입니다.

내 경우 새 모듈과 새 컴포넌트를 생성했지만 커스텀 기술 공유 모듈을 추가하지 않았습니다.component-name.module.ts파일 및 적절한 라우팅 설정component-name.routing.module.ts파일. 다른 컴포넌트와 정합성을 확인합니다.

home-page.medule 등 app.module 이외의 다른 모듈을 사용하고 있었습니다.

선언 섹션의 Home-page.module에 Home-page.component를 추가하는 것을 잊었습니다.

언급URL : https://stackoverflow.com/questions/43937387/if-selector-is-an-angular-component-then-verify-that-it-is-part-of-this-mod

반응형

'sourcecode' 카테고리의 다른 글

mongodb에 날짜/시간을 저장하는 가장 좋은 방법  (0) 2023.02.22
하위 테마에서 Wordpress 테마 옵션을 제거하는 방법  (0) 2023.02.18
스프링 부츠를 사용한 심플한 임베디드 Kafka 테스트 예시  (0) 2023.02.15
스프링: @ResponseBody "ResponseEntity"를 반환합니다.  (0) 2023.02.15
TypeScript 정적 클래스  (0) 2023.02.15

'sourcecode'의 다른글

  • 현재글'가 Angular 컴포넌트인 경우 이 모듈의 일부인지 확인합니다.

관련글

댓글

티스토리툴바