หาก '<selector>' เป็นส่วนประกอบเชิงมุมให้ตรวจสอบว่าเป็นส่วนหนึ่งของโมดูลนี้

ฉันใหม่ใน 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เป็น Web 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 {
}

ตรวจสอบตัวเลือกของคุณใน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']
})

ในกรณีของฉันฉันกำลังเขียนการทดสอบหน่วยสำหรับส่วนประกอบที่ใช้ส่วนประกอบย่อยและฉันกำลังเขียนการทดสอบเพื่อให้แน่ใจว่าส่วนประกอบย่อยเหล่านั้นอยู่ในเทมเพลต:

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

ฉันไม่ได้รับข้อผิดพลาด แต่มีคำเตือน:

คำเตือน: '' app-interview 'ไม่ใช่องค์ประกอบที่รู้จัก:

1. หาก 'app-interview' เป็นส่วนประกอบเชิงมุมให้ตรวจสอบว่าเป็นส่วนหนึ่งของโมดูลนี้ คำเตือน: '' app-interview 'ไม่ใช่องค์ประกอบที่รู้จัก:
2. หาก 'app-interview' เป็นส่วนประกอบเชิงมุมให้ตรวจสอบว่าเป็นส่วนหนึ่งของโมดูลนี้
3. ถ้า 'app-interview' เป็น Web Component ให้เพิ่ม 'CUSTOM_ELEMENTS_SCHEMA' ใน '@ NgModule.schemas' ของคอมโพเนนต์นี้เพื่อระงับข้อความนี้ '

นอกจากนี้ส่วนประกอบย่อยไม่ปรากฏในเบราว์เซอร์ระหว่างการทดสอบ

ฉันเคยng g c newcomponentสร้างส่วนประกอบทั้งหมดดังนั้นจึงมีการประกาศในโมดูลแอปแล้ว แต่ไม่ใช่โมดูลทดสอบสำหรับส่วนประกอบที่ฉันระบุ

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

คุณต้องประกาศ MyComponentComponent ในโมดูลเดียวกันของ AppComponent ของคุณ

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. เพิ่มของคุณMyComponentModuleลงใน AppModule ของคุณ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ไม่ กำไร.

มีปัญหาเดียวกันพบว่าแท็กคอมโพเนนต์เทมเพลตใช้งาน<app-[component-name]></app-[component-name]>ได้ ดังนั้นหากมีการเรียกส่วนประกอบของคุณmycomponent.component.ts:

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