কৌণিক 2 উপাদান সংলাপে সমস্যা রয়েছে - আপনি কি এটি @ এনজিএমডিউল.এন্ট্রি কম্পোনেন্টগুলিতে যুক্ত করেছেন?

Question

আমি https://matory.angular.io/compferences/comp घटक/dialog এ ডকগুলি অনুসরণ করার চেষ্টা করছি তবে নীচের বিষয়টি কেন তা বুঝতে পারি না?

আমি আমার উপাদানটিতে নীচে যুক্ত করেছি:

@Component({
  selector: 'dialog-result-example-dialog',
  templateUrl: './dialog-result-example-dialog.html',
})
export class DialogResultExampleDialog {
  constructor(public dialogRef: MdDialogRef<DialogResultExampleDialog>) {}
}

আমার মডিউলে আমি যুক্ত করেছি

import { HomeComponent,DialogResultExampleDialog } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog
  ],

// ...

তবুও আমি এই ত্রুটি পেয়েছি ...

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:53:0 caused by: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:50
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345
    error_handler.js:52 ORIGINAL EXCEPTION: No component factory found for DialogResultExampleDialog. Did you add it to @NgModule.entryComponents?
    ErrorHandler.handleError @ error_handler.js:52
    next @ application_ref.js:346
    schedulerFn @ async.js:91
    SafeSubscriber.__tryOrUnsub @ Subscriber.js:223
    SafeSubscriber.next @ Subscriber.js:172
    Subscriber._next @ Subscriber.js:125
    Subscriber.next @ Subscriber.js:89
    Subject.next @ Subject.js:55
    EventEmitter.emit @ async.js:77
    NgZone.triggerError @ ng_zone.js:329
    onHandleError @ ng_zone.js:290
    ZoneDelegate.handleError @ zone.js:246
    Zone.runTask @ zone.js:154
    ZoneTask.invoke @ zone.js:345

Answer 1

entryComponentsআপনার নিজের ভিতরে গতিশীলভাবে তৈরি উপাদানগুলি যুক্ত করতে হবে@NgModule

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

দ্রষ্টব্য: কিছু ক্ষেত্রে অলস লোডযুক্ত মডিউলগুলিরentryComponents অধীনে কাজ করা হবে না, কারণ কোনও কাজের ভিত্তিতে এগুলি আপনার (মূল) মধ্যে রাখেapp.module

Comments

ধন্যবাদ! এই জন্য সর্বত্র খুঁজছিলেন। আমার নির্দিষ্ট ক্ষেত্রে, আমি এছাড়াও করতে উপাদান যোগ করার জন্য প্রয়োজন declarationsকাজ জিনিসপত্র পেতে

— Jasdeep খালসা

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

— বাবা

যদি আপনি ইতিমধ্যে তাদের সেখানে আছে? তারা কেন বলবে না?

— স্যাম আলেকজান্ডার

@ সাম অ্যালেক্সান্দার আপনার প্রশ্নটি যেমন প্রশংসা করেছেন তেমন প্রশস্ত তবে আপনি বন্য অনুমান করছেন; আপনি কি আপনার অলস বোঝা মডিউলটির ভিতরে ব্যবহার করেন?

— একো

অলস লোড মডিউল ডায়ালগ 2.0.0-beta.2 হিসাবে কাজ

— charlie_pl

Answer 2

আপনার entryComponentsঅধীনে ব্যবহার করা দরকার @NgModule।

এটি গতিশীল যুক্ত উপাদানগুলির জন্য যা ব্যবহার করে যুক্ত করা হয় ViewContainerRef.createComponent()। এন্ট্রি কম্পোনেন্টগুলিতে তাদের যুক্ত করা অফলাইন টেম্পলেট সংকলককে তাদের সংকলন করতে এবং তাদের জন্য কারখানা তৈরি করতে বলে।

রুট কনফিগারেশনে নিবন্ধিত উপাদানগুলি স্বয়ংক্রিয়ভাবে যুক্ত করা entryComponentsহয় কারণ router-outletএটি ViewContainerRef.createComponent()ডিওমে রাউন্ডযুক্ত উপাদানগুলি যুক্ত করতে ব্যবহৃত হয়।

সুতরাং আপনার কোড মত হবে

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

Comments

উঃ ... আমার দুটি সংলাপ ছিল যা অন্যথায় অভিন্ন ছিল তবে একটিতে আমার এটি পরীক্ষা করে একটি পরীক্ষার রুট ছিল। আমি সেই পরীক্ষার রুটটি সরিয়ে দিয়েছি এবং যথেষ্ট নিশ্চিত ... রাউটিংটি আমাকে "সহায়তা" করেছিল। > :(

— টম

@ সুনিল গার্গ আমার আরও একটি সমস্যা আছে। আমার ডায়ালগ শো কিন্তু এটি স্বয়ংক্রিয়ভাবে 1 সেকেন্ডের মধ্যেই বন্ধ হয়ে যায়। আমাকে সাহায্য করুন.

— প্রিয়াঙ্কা সি

Answer 3

এটি ঘটছে কারণ এটি একটি গতিশীল উপাদান এবং আপনি এটি এর entryComponentsঅধীনে যোগ করেন নি@NgModule ।

কেবল সেখানে এটি যুক্ত করুন:

@NgModule({
  /* ----------------- */
  entryComponents: [ DialogResultExampleDialog ] // <---- Add it here

কৌণিক দলটি কীভাবে আলোচনা করে তা দেখুন entryComponents:

entryComponents?: Array<Type<any>|any[]>

এই মডিউলটি সংজ্ঞায়িত করা হলে সংকলন করা উচিত এমন উপাদানগুলির একটি তালিকা নির্দিষ্ট করে। এখানে তালিকাভুক্ত প্রতিটি উপাদানগুলির জন্য, কৌণিক একটি কম্পোনেন্টফ্যাক্টরি তৈরি করবে এবং এটি কম্পোনেন্টফ্যাক্টরি রিসোলভারে সঞ্চয় করবে।

এছাড়াও, এটি @NgModuleঅন্তর্ভুক্ত করার পদ্ধতিগুলির তালিকা entryComponents...

আপনি দেখতে পাচ্ছেন যে এগুলি সমস্তই alচ্ছিক (প্রশ্ন চিহ্নগুলিতে দেখুন) সহ entryComponentsউপাদানগুলির একটি অ্যারে গ্রহণ করে:

@NgModule({ 
  providers?: Provider[]
  declarations?: Array<Type<any>|any[]>
  imports?: Array<Type<any>|ModuleWithProviders|any[]>
  exports?: Array<Type<any>|any[]>
  entryComponents?: Array<Type<any>|any[]>
  bootstrap?: Array<Type<any>|any[]>
  schemas?: Array<SchemaMetadata|any[]>
  id?: string
})

Comments

আমার সাথে একই ঘটনা এবং কাজ করবে না: এটি দেখায়: ত্রুটি: ডায়ালগ কনফার্ম কম্পিউটারের জন্য কোনও উপাদান ফ্যাক্টরি পাওয়া যায় নি। আপনি কি এটি @ এনজিএমডিউল.এন্ট্রি কম্পোনেন্টগুলিতে যুক্ত করেছেন? কোন ধারণা?

— নাম লে

আপনাকে এটি এনজিএফটারভিউআইনিট (@ কৌনিক / মূল থেকে) এ প্রবেশ করানো দরকার

— প্যাট্রিক পানেক

Answer 4

আপনি যদি MatDialogকোনও পরিষেবার ভিতরে ব্যবহার করার চেষ্টা করছেন - আসুন এটি কল করুন 'PopupService'এবং সেই পরিষেবাটি একটি মডিউলে সংজ্ঞায়িত হয়েছে:

@Injectable({ providedIn: 'root' })

তাহলে এটি কাজ নাও করতে পারে। আমি অলস লোডিং ব্যবহার করছি, তবে এটি প্রাসঙ্গিক কিনা তা নিশ্চিত নয়।

তোমাকে করতেই হবে:

• PopupServiceব্যবহার করে - আপনার ডায়লগটি খোলে এমন উপাদানটিতে আপনার সরাসরি সরবরাহ করুন [ provide: PopupService ]। এটি এটি MatDialogউপাদানটির (ডিআই সহ) উদাহরণটি ব্যবহার করতে দেয় । আমি মনে করি যে এই উপাদানটিতে openডায়ালগ উপাদান হিসাবে একই উপাদানটি কলিংয়ের একই মডিউলে থাকা উচিত।
• আপনার অ্যাপ্লিকেশনটিতে ডায়ালগ উপাদানটি সরান mod আধুনিক (যেমন কিছু অন্যান্য উত্তর বলেছে)
• matDialogআপনি যখন আপনার পরিষেবা কল করবেন তখন একটি রেফারেন্স পাস করুন ।

আমার গণ্ডগোলিত উত্তরটি ক্ষমা করুন, পয়েন্টটি হ'ল providedIn: 'root'জিনিসগুলি ভঙ্গ করছে কারণ ম্যাটডায়লগের একটি উপাদান পিগ-ব্যাক করতে হবে।

Comments

এটা ঘটেছে! প্রকৃতপক্ষে এন্ট্রি কম্পোনেন্টটি দেখার পরিবর্তে আপনার পরিষেবা যুক্ত করুন, ভুল ত্রুটি বার্তা!

— টিবি

আমার জন্য একই হচ্ছে, কিন্তু আমি এই উত্তরটি থেকে বুঝতে পারি না, সমাধানটি কোন বিন্দু? বা সব 3 প্রয়োজন?

— কোডিং_ইডিয়ট

আমার একই সমস্যা ছিল

— এমজেভিএম

Answer 5

অলস লোডিংয়ের ক্ষেত্রে, আপনাকে কেবল অলস লোডযুক্ত মডিউলটিতে ম্যাটডায়ালগমডুল আমদানি করতে হবে । তারপরে এই মডিউলটি তার নিজস্ব আমদানি করা ম্যাটডায়লগমডিউল সহ এন্ট্রি উপাদান রেন্ডার করতে সক্ষম হবে :

@NgModule({
  imports:[
    MatDialogModule
  ],
  declarations: [
    AppComponent,
    LoginComponent,
    DashboardComponent,
    HomeComponent,
    DialogResultExampleDialog        
  ],
  entryComponents: [DialogResultExampleDialog]

Answer 6

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

সেই কারণে, আমি প্রাইমএনজি ডায়ালগটি ব্যবহার করে শেষ করেছি , যা আমি ব্যবহার করতে বেশ সোজা পেয়েছি:

m-dialog.component.html:

<p-dialog header="Title">
  Content
</p-dialog>

m-dialog.component.ts:

@Component({
  selector: 'm-dialog',
  templateUrl: 'm-dialog.component.html',
  styleUrls: ['./m-dialog.component.css']
})
export class MDialogComponent {
  // dialog logic here
}

m-dialog.module.ts:

import { NgModule } from "@angular/core";
import { CommonModule } from "@angular/common";
import { DialogModule } from "primeng/primeng";
import { FormsModule } from "@angular/forms";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    DialogModule
  ], 
  exports: [
    MDialogComponent,
  ], 
  declarations: [
    MDialogComponent
  ]
})
export class MDialogModule {}

কেবলমাত্র আপনার উপাদানটির এইচটিএমএলে আপনার কথোপকথন যুক্ত করুন:

<m-dialog [isVisible]="true"> </m-dialog>

প্রাইমএনজি প্রাইমফ্রিজ ডকুমেন্টেশনগুলি অনুসরণ করা সহজ এবং খুব সুনির্দিষ্ট।

Comments

আপনার কেবল গতিশীল তৈরি উপাদানগুলির প্রয়োজন না হওয়া পর্যন্ত টপিক-স্টার্টার সমস্যার মুখোমুখি হবেন না। যদি আপনি চেষ্টা করেন (এমনকি প্রাইমং দিয়েও) ডায়ালগ সার্ভিস তৈরি করে যা গতিশীল উপাদান তৈরি করে - আপনি ঠিক একই সমস্যার মুখোমুখি হবেন ...

— ডিকব্রাস

Answer 7

ডক্সেentryComponents বর্ণিত হিসাবে আপনাকে এটি অবশ্যই যুক্ত করতে হবে ।

@NgModule({
  imports: [
    // ...
  ],
  entryComponents: [
    DialogInvokingComponent, 
    DialogResultExampleDialog
  ],
  declarations: [
    DialogInvokingComponent,   
    DialogResultExampleDialog
  ],
  // ...
})

সংজ্ঞায়িত সংলাপ সহ একটি অ্যাপ্লিকেশন মডিউল ফাইলের সম্পূর্ণ উদাহরণ এখানে entryComponents।

Answer 8

আপনি যদি আমার মতো হন এবং এই থ্রেডটি ভেবে দেখছেন "তবে আমি কোনও উপাদান যুক্ত করার চেষ্টা করছি না, আমি কোনও প্রহরী / পরিষেবা / পাইপ ইত্যাদি যুক্ত করার চেষ্টা করছি" " তাহলে সমস্যাটি সম্ভবত আপনি কোনও রাউটিং পথে ভুল টাইপ করেছেন। এটাই আমি করেছি। আমি ঘটনাক্রমে এই উপাদানটিতে একটি প্রহরী যুক্ত করেছি: canActivate: বিভাগের পরিবর্তে কোনও পথের বিভাগ। আমি আইডিই স্বতঃপূরণ পছন্দ করি তবে আপনাকে কিছুটা ধীরে ধীরে মনোযোগ দিতে হবে। আপনি যদি একেবারে এটি খুঁজে না পান তবে যে নামটির বিরুদ্ধে এটি অভিযোগ করছে তার জন্য একটি বিশ্বব্যাপী অনুসন্ধান করুন এবং কোনও নাম স্লিপ-আপ করেন নি তা নিশ্চিত করার জন্য প্রতিটি ব্যবহারের দিকে তাকান।

Answer 9

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

Answer 10

যদি এখানে পরিষেবা থেকে কাউকে ডায়ালগ কল করতে হয় তবে সমস্যাটি কীভাবে সমাধান করা যায় তা এই। আমি উপরের কয়েকটি উত্তরের সাথে একমত, আমার উত্তর সেবার ক্ষেত্রে ডায়লগ কল করার জন্য যদি কেউ কারও মুখোমুখি হতে পারে।

উদাহরণস্বরূপ একটি পরিষেবা তৈরি করুন ডায়ালগ সার্ভিস তারপরে আপনার ডায়ালগ ফাংশনটিকে পরিষেবার ভিতরে নিয়ে যান এবং নীচের কোডের মতো কল করুন এমন উপাদানটিতে আপনার কথোপকথনটি যুক্ত করুন:

 @Component({
  selector: "app-newsfeed",
  templateUrl: "./abc.component.html",
  styleUrls: ["./abc.component.css",],
  providers:[DialogService]
})

অন্যথায় আপনি ত্রুটি পেতে