कोणीय 2 कर्म परीक्षण 'घटक-नाम' एक ज्ञात तत्व नहीं है

Question

AppComponent में, मैं HTML कोड में नौसेना घटक का उपयोग कर रहा हूं। यूआई ठीक लग रहा है। एनजी सर्व करते समय कोई त्रुटि नहीं। और जब मैं ऐप देखता हूं तो कंसोल में कोई त्रुटि नहीं होती है।

लेकिन जब मैंने कर्म को अपनी परियोजना के लिए चलाया, तो एक त्रुटि है:

Failed: Template parse errors: 
'app-nav' is not a known element:
1. If 'app-nav' is an Angular component, then verify that it is part of this module.
2. If 'app-nav' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

मेरे app.module.ts में :

वहाँ है:

import { NavComponent } from './nav/nav.component';

यह NgModule के घोषणापत्र भाग में भी है

@NgModule({
  declarations: [
    AppComponent,
    CafeComponent,
    ModalComponent,
    NavComponent,
    NewsFeedComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,
    ModalModule.forRoot(),
    ModalModule,
    NgbModule.forRoot(),
    BootstrapModalModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

मैं NavComponentअपने में उपयोग कर रहा हूंAppComponent

app.component.ts

import { Component, ViewContainerRef } from '@angular/core';
import { Overlay } from 'angular2-modal';
import { Modal } from 'angular2-modal/plugins/bootstrap';
import { NavComponent } from './nav/nav.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Angela';
}

app.component.html

<app-nav></app-nav>
<div class="container-fluid">
</div>

मैंने एक समान प्रश्न देखा है, लेकिन उस प्रश्न के उत्तर में कहा गया है कि हमें नेवमॉडल में NgModule को जोड़ना चाहिए जिसमें एक निर्यात होता है, लेकिन जब मैं ऐसा करता हूं तो मुझे संकलन त्रुटि हो रही है।

यह भी है: app.component.spec.ts

import {NavComponent} from './nav/nav.component';
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';

Comments

आपको अपनी कल्पना फ़ाइल में आयात याद आ रही है। मैं मान रहा हूँ कि परीक्षण app.spec.ts पर है, इसलिए आप import { NavComponent }अपने spec.ts में चाहते हैं

— Z. Bagley

यह आयात किया गया है। मुझे घोषणा का हिस्सा याद आ रहा था

— एंजेला पी।

आयात और app.component.spec.ts के अंदर कस्टम घटक की घोषणा, मेरे लिए काम किया, धन्यवाद दोस्तों!

— ENDEESA

Answer 1

क्योंकि यूनिट परीक्षणों में आप घटक को अपने अनुप्रयोग के अन्य भागों से अलग-थलग करना चाहते हैं, इसलिए कोणीय डिफ़ॉल्ट रूप से आपके मॉड्यूल की निर्भरता जैसे घटक, सेवाओं आदि को नहीं जोड़ेगा। इसलिए आपको अपने परीक्षणों में मैन्युअल रूप से ऐसा करने की आवश्यकता है। मूल रूप से, आपके पास दो विकल्प हैं:

ए) परीक्षण में मूल NavComponent की घोषणा करें

describe('AppComponent', () => {
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          NavComponent
        ]
      }).compileComponents();
    }));

बी) मॉक द न्यूकंपोनेंट

describe('AppComponent', () => {
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          MockNavComponent
        ]
      }).compileComponents();
    }));

// it(...) test cases 

});

@Component({
  selector: 'app-nav',
  template: ''
})
class MockNavComponent {
}

आपको आधिकारिक दस्तावेज में अधिक जानकारी मिलेगी ।

Comments

धन्यवाद ... मेरे लिए काम किया !!

— हिदायत रहमान

इसके लिए धन्यवाद। मैंने कई घटकों और मॉड्यूल को उस बिंदु पर आयात करने के मुद्दे पर चलाया है जहां यह AppModuleटेस्टबेड कॉन्फ़िगरेशन में सिर्फ आयात करने के लिए कहीं अधिक समझ में आता है । क्या आप इसके खिलाफ सिफारिश करेंगे?

— mcheah

@ जोनाथन शायद आपके द्वारा घोषित घटक की खुद की निर्भरता है? एक इकाई परीक्षण में, मोक्स का उपयोग करना बेहतर होता है।

— किम कर्न

Answer 2

आप भी उपयोग कर सकते हैं NO_ERRORS_SCHEMA

describe('AppComponent', () => {
beforeEach(async(() => {
  TestBed.configureTestingModule({
    declarations: [
      AppComponent
    ],
    schemas: [NO_ERRORS_SCHEMA]
  }).compileComponents();
}));

https://2018.ng-conf.org/mocking-dependencies-angular/

Comments

क्या कोई संभावित मुद्दे हैं जो इससे उत्पन्न होंगे? यह एक सुविधाजनक फिक्स की तरह लगता है, लेकिन क्या कोई महत्वपूर्ण त्रुटियां हैं, जिन्हें इससे समाप्त किया जाएगा?

— मचहा

यह क्या है के परीक्षण किए गए दस्तावेज़ों का कहना है: "। NO_ERRORS_SCHEMA भी लापता घटकों के बारे में आपको बता रहा से संकलक से बचाता है और विशेषताएँ कि आपने अनजाने में छोड़े गए या गलत वर्तनी आप प्रेत कीड़े का पीछा करते हुए कि संकलक एक पल में पकड़ा है | घंटे बर्बाद कर सकता है।"

— किम कर्न

आप निश्चित रूप से अपनी यूनिट परीक्षणों में अतिरिक्त निहित व्यवहार को लागू करने के लिए अभ्यस्त नहीं हैं: NO_ERRORS_SCHEMA का उपयोग करने से आपको 'नकली' और 'खींचे गए' के ​​बीच निर्भरता को 'ग्रे' जोन में डालने के लिए प्रोत्साहन मिलेगा। उन आश्रितों के लिए कोई भी बदलाव संभावित रूप से असंबद्ध यूनिट परीक्षणों के ब्रेकिंग को ट्रिगर कर सकते हैं - कोई अच्छा

— औसत

Answer 3

मेरे लिए माता-पिता में घटक आयात करने से समस्या हल हो गई।

describe('AppComponent', () => {
  beforeEach(async(() => {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          NavComponent
        ]
      }).compileComponents();
    }));

इसमें spec of the parentजहां यह घटक उपयोग किया जाता है वहां इसे जोड़ें ।

Answer 4

एक और कारण एक से अधिक हो सकता है .compileComponents()के लिए beforeEach()अपने परीक्षण के मामले में

उदाहरण के लिए

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

beforeEach(() => {
  TestBed.configureTestingModule({
    imports: [HttpClientModule],
    declarations: [Test1Component],
    providers: [HttpErrorHandlerService]
  }).compileComponents();
});

Answer 5

चरण 1: कल्पना फ़ाइल की शुरुआत में स्टब्स बनाएं।

@Component({selector: 'app-nav', template: ''})
class NavComponent{}

चरण 2: घटक की घोषणाओं में स्टब्स जोड़ें।

TestBed.configureTestingModule({
  imports: [
    RouterTestingModule
  ],
  declarations: [
    AppComponent,
    NavComponent
  ],
}).compileComponents();