কৌণিক 2 কর্ম পরীক্ষার 'উপাদান-নাম' একটি পরিচিত উপাদান নয়

Question 1

অ্যাপকোম্পোন্টে, আমি এইচটিএমএল কোডে ন্যাভ উপাদান ব্যবহার করছি। ইউআই ঠিক আছে। এনজি সার্ভিস করার সময় কোনও ত্রুটি নেই। এবং যখন আমি অ্যাপ্লিকেশনটি দেখি তখন কনসোলে কোনও ত্রুটি নেই।

কিন্তু যখন আমি আমার প্রকল্পের জন্য কর্ম চালাচ্ছি তখন একটি ত্রুটি রয়েছে:

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({
  declarations: [
    AppComponent,
    CafeComponent,
    ModalComponent,
    NavComponent,
    NewsFeedComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    JsonpModule,
    ModalModule.forRoot(),
    ModalModule,
    NgbModule.forRoot(),
    BootstrapModalModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

আমি ব্যবহার করছি NavComponentআমারAppComponent

app.componal.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.componal.html

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

আমি একটি অনুরূপ প্রশ্ন দেখেছি, তবে সেই প্রশ্নের উত্তর বলে যে আমাদের এনএভি উপাদানটিতে এনজিএমডুল যুক্ত করা উচিত যার একটি রফতানি ছিল তবে আমি যখন এটি করি তখন সংকলন ত্রুটি পাচ্ছি।

এছাড়াও রয়েছে: app.componal.spec.ts

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

Question 2

ইউনিট পরীক্ষায় আপনি আপনার অ্যাপ্লিকেশনের অন্যান্য অংশ থেকে বিচ্ছিন্নভাবে উপাদানটি পরীক্ষা করতে চান, অ্যাঙ্গুলারটি আপনার মডিউলের নির্ভরতা যেমন উপাদান, পরিষেবাদি ইত্যাদির সাথে ডিফল্টরূপে যোগ করবে না। সুতরাং আপনার পরীক্ষাগুলিতে আপনাকে এটি ম্যানুয়ালি করতে হবে। মূলত, আপনার এখানে দুটি বিকল্প রয়েছে:

ক) পরীক্ষায় আসল ন্যাভ কমম্পোনেন্ট ঘোষণা করুন

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

আপনি অফিসিয়াল ডকুমেন্টেশনে আরও তথ্য পাবেন ।

Question 3

আপনি ব্যবহার করতে পারেন NO_ERRORS_SCHEMA

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

https ://2018.ng-conf.org/mocking-d dependferences-angular/

Question 4

আমার জন্য পিতামাত্রে উপাদানটি আমদানি করা সমস্যার সমাধান করেছে।

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

spec of the parentএই উপাদানটি ব্যবহৃত হয় যেখানে এটি যুক্ত করুন।

Question 5

আরও একটি কারণ সেখানে একাধিক হতে পারে যে .compileComponents()জন্য beforeEach()আপনার পরীক্ষার ক্ষেত্রে

যেমন

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

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

Question 6

পদক্ষেপ 1: নির্দিষ্ট ফাইলের শুরুতে স্টাবগুলি তৈরি করুন।

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

পদক্ষেপ 2: উপাদানগুলির ঘোষণায় স্টাবগুলি যুক্ত করুন।

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