typescript - Ako je '<selector>' Angular komponenta, onda provjerite je li dio ovog modula

Nov sam u Angular2. Pokušao sam kreirati komponentu, ali se prikazuje pogreška.

Ovo je app.component.ts datoteka.

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

Ovo je komponenta koju želim stvoriti.

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

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

export class MyComponentComponent {

}

Prikazivanje dvije pogreške:

  1. Ako je my-component Angular komponenta, tada provjerite je li dio ovog modula.
  2. Ako je my-component Web komponenta, dodajte CUSTOM_ELEMENTS_SCHEMA u @NgModule.schemas ove komponente kako biste suzbili ovu poruku.

Molim pomoć.

Odgovor #1

Vaš MyComponentComponent trebao bi biti u MyComponentModule.

A u MyComponentModule, trebali biste staviti MyComponentComponent unutar "exports".

Nešto poput ovoga, pogledajte kod ispod.

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

export class MyComponentModule {
}

i stavite MyComponentModule u imports u app.module.ts ovako (pogledajte kod ispod).

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

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

export class AppModule {}

Nakon što to učinite, selektor vašeg komponente sada može biti prepoznat od strane aplikacije.

Više o tome možete saznati ovdje: https://angular-2-training-book.rangle.io/handout/modules/feature-modules.html

Odgovor #2

Možda je ovo za naziv html oznake komponente

U html koristite nešto poput ovog <mycomponent></mycomponent>

Morate koristiti ovo <app-mycomponent></app-mycomponent>

Odgovor #3

uvozite li ga u svoj app.module.ts ovako i uklonite dio s direktivama:-

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

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

Vaš MyComponentModule trebao bi izgledati ovako:-

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

Odgovor #4

U mom slučaju pisao sam jedinicne testove za komponentu koja koristi pod-komponente, i pisao sam testove kako bih bio siguran da su te pod-komponente u predlošku:

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

Nisam dobio pogrešku, nego upozorenje:

UPOZORENJE: ''app-interview'' nije poznati element:

  1. Ako je 'app-interview' Angular komponenta, provjerite je li dio ovog modula. UPOZORENJE: ''app-interview'' nije poznat element:
  2. Ako je 'app-interview' Angular komponenta, provjerite je li dio ovog modula.
  3. Ako je 'app-interview' Web komponenta, dodajte 'CUSTOM_ELEMENTS_SCHEMA' u '@NgModule.schemas' ove komponente kako biste potisnuli ovu poruku.

Također, podkomponenta se nije prikazivala u pregledniku tijekom testiranja.

Koristio sam ng g c newcomponent za generiranje svih komponenti, tako da su već bile deklarirane u appmoduleu, ali nisu u testnom modulu za komponentu koju sam testirao.

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

Odgovor #5

Provjerite svoj selektor u svom filename.component.ts

Koristeći oznaku u različitim HTML datotekama rekao bih

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

Trebao bi biti

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

Primjer

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

Povezani članci