যদি '<নির্বাচনকারী>' একটি কৌণিক উপাদান হয়, তবে এটি এই মডিউলটির অংশ কিনা তা যাচাই করুন

Question

আমি 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একটি ওয়েব উপাদান তারপর যোগ CUSTOM_ELEMENTS_SCHEMAকরার @NgModule.schemasএই বার্তাটি দমন করতে এই উপাদানের।

সাহায্য করুন.

Answer 1

আপনার 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

চিয়ার্স!

Comments

আপনার যদি এখনও সমস্যা হয় তবে আপনার উপাদানটির .ts ফাইলে আপনার নির্বাচককে ঘোষিত পরীক্ষা করতে ভুলবেন না। আপনি যখন পিতামাতার এইচটিএমএল ফাইলে আপনার উপাদানটি রেখেছেন তখন আপনি এইচটিএমএল কোডটিতে "অ্যাপ্লিকেশন" যুক্ত করতে ভুলে যেতে পারেন।

— জেয়ার্ড

@ ইনপুট নামটি ভুল হওয়ার কারণে আমার এই ত্রুটি হয়েছিল। খুব বিভ্রান্তিকর, সুতরাং সমস্যা সমাধানের সময় আপনার উপাদান ট্যাগের ইনপুটগুলি সরান।

— বেন রিকোট

আমি এখনও এই নিয়ে সমস্যা আছে। আমি কৌনিক উপাদান / রেডিও থেকে MatRadioModule আমদানি করছি এবং সেই মডিউলের দিকনির্দেশগুলি এই ত্রুটিটি ছুঁড়ে দিচ্ছে।

— সৌরিত্র দাশ গুপ্ত

এটি আর কৌণিকের সর্বশেষ সংস্করণের জন্য বৈধ নয় (আমি এটি v.8 তে পরীক্ষা করেছি)

— ড্যানি

Answer 2

সম্ভবত এটি htmlট্যাগ উপাদানটির নাম হিসাবে

আপনি htmlএই জাতীয় কিছু ব্যবহার করুন<mycomponent></mycomponent>

আপনার অবশ্যই এটি ব্যবহার করা উচিত <app-mycomponent></app-mycomponent>

Comments

htmlট্যাগের নাম selectorসম্পত্তি নির্ধারণ করে । এই ক্ষেত্রে হয় my-component।

— টমাসজ জাকুব রূপ

Answer 3

আপনি কি এটি নিজের 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 {
}

Comments

আপনি ভুলে গেছেনexports

— টমাসজ জাকুব রূপ

আমি তৃতীয় পক্ষের কৌণিক উপাদানটি আমদানি ও রফতানি করতে সক্ষম হওয়ায় এটি আমাকে সহায়তা করেছিল। ধন্যবাদ

— শুভম অ্যাররা

Answer 4

আপনার ফাইলের নাম.কম্পলেন্টস.টে আপনার নির্বাচককে পরীক্ষা করুন

বিভিন্ন এইচটিএমএল ফাইলগুলিতে ট্যাগটি ব্যবহার করে আমি বলব

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

Answer 5

আমার ক্ষেত্রে আমি উপ-উপাদানগুলি ব্যবহার করে এমন একটি উপাদানটির জন্য ইউনিট পরীক্ষা লিখছিলাম এবং সেই সাব-উপাদানগুলি টেম্পলেটে ছিল কিনা তা নিশ্চিত করার জন্য আমি পরীক্ষা লিখছিলাম:

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

আমি একটি ত্রুটি পাই নি, তবে একটি সতর্কতা:

সতর্কতা: '' অ্যাপ-সাক্ষাত্কার 'কোনও পরিচিত উপাদান নয়:

1. যদি 'অ্যাপ-সাক্ষাত্কার' কোনও কৌণিক উপাদান হয়, তবে এটি এই মডিউলটিরই অংশ কিনা তা যাচাই করুন। সতর্কতা: '' অ্যাপ-সাক্ষাত্কার 'কোনও পরিচিত উপাদান নয়:
2. যদি 'অ্যাপ-সাক্ষাত্কার' কোনও কৌণিক উপাদান হয়, তবে এটি এই মডিউলটিরই অংশ কিনা তা যাচাই করুন।
3. যদি 'অ্যাপ-সাক্ষাত্কার' কোনও ওয়েব উপাদান হয় তবে এই বার্তাটি দমন করতে এই উপাদানটির '@ এনজিএমডিউল.সেমাস' এ 'CUSTOM_ELEMENTS_SCHEMA' যুক্ত করুন ''

এছাড়াও, subcomponent হয়নি না পরীক্ষা করার সময় ব্রাউজারের ভিতরে প্রদর্শন করুন।

আমি ব্যবহৃত ng g c newcomponentতাই তারা ইতিমধ্যে appmodule ঘোষণা করা হয়েছে, কিন্তু, সব উপাদান জেনারেট করতে না পরীক্ষা মডিউল যে উপাদান আমি spec'ing যায়নি।

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

Answer 6

আপনাকে অবশ্যই আপনার অ্যাপকম্পোন্টেন্টের একই মডিউলে আপনার মাইকম্পোন্ট কমম্পোনেন্টটি ঘোষণা করতে হবে।

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

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

Answer 7

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

Comments

চূড়ান্ত পদক্ষেপটি এমন একটি প্রকল্পে আমার যা প্রয়োজন ছিল যা আমি কিছুক্ষণের মধ্যেও স্পর্শ করি নি। 'এনপিএম ইনস্টল "" এনজি আপডেট "এবং তারপরে" এনপিএম আপডেট "

— জেফ লঙ্গো

Answer 8

আমার ক্ষেত্রে আমার একটি ভাগ করা মডিউলে একটি উপাদান ছিল।

উপাদানটি লোড হচ্ছে এবং ভালভাবে কাজ করেছে তবে টাইপস্ক্রিপ্টটি লাল রেখার সাথে এইচটিএমএল ট্যাগ হাইলাইট করেছিল এবং এই ত্রুটি বার্তাটি দেখিয়েছিল।

এই উপাদানটির ভিতরে, আমি লক্ষ্য করেছি যে আমি কোনও আরএক্সজেএস অপারেটর আমদানি করিনি।

import {map} from 'rxjs/operators';

আমি যখন এই আমদানি যুক্ত করি ত্রুটি বার্তাটি অদৃশ্য হয়ে যায়।

উপাদানটির ভিতরে সমস্ত আমদানি পরীক্ষা করুন ।

আশা করি এটি কাউকে সাহায্য করবে।

Answer 9

কোন মডিউলটিতে প্যারেন্ট উপাদানটি ঘোষিত হচ্ছে তা পরীক্ষা করুন ...

যদি আপনার মূল উপাদানটি ভাগ করা মডিউলে সংজ্ঞায়িত করা হয় তবে আপনার শিশু মডিউলটি অবশ্যই আবশ্যক।

অভিভাবক উপাদানটি একটি ভাগ করা মডিউলে ঘোষণা করা যেতে পারে এবং ফাইল ডিরেক্টরি কাঠামো / নামকরণের ভিত্তিতে যৌক্তিক এমন মডিউলটি নয়, এমনকি কৌনিক সিএলআই এটি আমার ক্ষেত্রে ভুল মডিউলে যুক্ত করেছে।

Answer 10

আশা করি আপনি করছেন 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 { }

Answer 11

আপনার উপাদানগুলি.মডিউল.টসগুলিতে আপনার এই জাতীয় আইওনিকমডুল আমদানি করা উচিত:

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

তারপরে এইভাবে আয়নিকমডুল আমদানি করুন:

  imports: [
    CommonModule,
    IonicModule
  ],

সুতরাং আপনার উপাদান.মডিউল.টগুলি এর মতো হবে:

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

Answer 12

না export **default** class MyComponentComponent!

সম্পর্কিত সমস্যা যা শিরোনামের অধীনে আসতে পারে, যদি নির্দিষ্ট প্রশ্ন না থাকে:

আমি দুর্ঘটনাক্রমে একটি ...

export default class MyComponentComponent {

... এবং এগুলি খুব খারাপ করে দিয়েছে।

কেন? ভিএস কোড আমদানিটি আমার মডিউলটিতে যুক্ত করলে আমি এতে যুক্ত করেছিলাম declarations, তবে পরিবর্তে ...

import { MyComponentComponent } from '...';

এটি ছিল

import MyComponentComponent from '...';

এবং এটি ডাউন স্ট্রিমের উপরে মানচিত্র তৈরি করে নি, ধরে নেওয়া হয়েছে যেহেতু এটি "সত্যই" ডিফল্ট আমদানির সাথে কোথাও নামকরণ করা হয়নি।

export class MyComponentComponent {

কোন default। লাভ।