কৌণিক 2 'উপাদান' একটি পরিচিত উপাদান নয়

Question

আমি অন্য মডিউলে অ্যাপমোডুলের ভিতরে আমি তৈরি করা একটি উপাদান ব্যবহার করার চেষ্টা করছি। যদিও আমি নিম্নলিখিত ত্রুটি পেয়েছি:

"আনকাড (প্রতিশ্রুতিতে): ত্রুটি: টেমপ্লেট বিশ্লেষণ ত্রুটিগুলি:

'পরিচিতি-বাক্স' একটি পরিচিত উপাদান নয়:

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

আমার প্রকল্প কাঠামো বেশ সহজ:

আমি আমার পৃষ্ঠাগুলি পৃষ্ঠাগুলি ডিরেক্টরিতে রাখি, যেখানে প্রতিটি পৃষ্ঠা পৃথক মডিউলে রাখা হয় (যেমন গ্রাহক-মডিউল) এবং প্রতিটি মডিউলে একাধিক উপাদান থাকে (যেমন গ্রাহক-তালিকা-উপাদান, গ্রাহক-অ্যাড-উপাদান এবং অন্যান্য)। আমি আমার কন্টাক্টবক্স কম্পোনেন্টটি সেই উপাদানগুলির মধ্যে ব্যবহার করতে চাই (উদাহরণস্বরূপ গ্রাহক-অ্যাড-উপাদানগুলির মধ্যে)।

আপনি দেখতে পাচ্ছেন যে আমি উইজেট ডিরেক্টরিতে পরিচিতি-বাক্স উপাদান তৈরি করেছি যাতে এটি মূলত অ্যাপমোডুলের মধ্যে থাকে। আমি যোগাযোগবক্স কম্পোনেন্ট আমদানিটি app.module.ts এ যুক্ত করেছি এবং এটিকে অ্যাপমোডুলের ঘোষণার তালিকায় রেখেছি। এটি কাজ করে না তাই আমি আমার সমস্যা googled এবং পাশাপাশি যোগাযোগ রফতানিতে কন্টাক্টবক্স কম্পোনেন্ট যুক্ত করেছি। সাহায্য করেনি। আমি কাস্টমারসএডডকম্পোন্টে কন্টাক্টবক্স কম্পোনেন্ট এবং তার পরে অন্য একটিতে (বিভিন্ন মডিউল থেকে) রাখার চেষ্টা করেছি তবে একাধিক ঘোষণা রয়েছে বলে আমি ত্রুটি পেয়েছি।

আমি কী মিস করছি?

Comments

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

— জোশুয়া মাইকেল ওয়াগনার

Answer 1

আমি যখন এই জাতীয় ত্রুটি পেয়েছি তখন এই 5 টি পদক্ষেপ আমি করি।

• আপনি কি নিশ্চিত যে নামটি সঠিক? (উপাদানটিতে সংজ্ঞায়িত নির্বাচকও পরীক্ষা করুন)
• একটি মডিউল মধ্যে উপাদান ঘোষণা?
• যদি এটি অন্য মডিউলে থাকে তবে উপাদানটি রফতানি করবেন?
• এটি যদি অন্য মডিউলে থাকে তবে সেই মডিউলটি আমদানি করবেন?
• ক্লাইটি পুনরায় চালু করবেন?

আমি কাস্টমারসএডডকম্পোন্টে কন্টাক্টবক্স কম্পোনেন্ট এবং তার পরে অন্য একটিতে (বিভিন্ন মডিউল থেকে) রাখার চেষ্টা করেছি তবে একাধিক ঘোষণা রয়েছে বলে আমি ত্রুটি পেয়েছি।

আপনি কোনও উপাদান দুটিবার ঘোষণা করতে পারবেন না। আপনার উপাদানটিকে একটি নতুন পৃথক মডিউলে ডিক্লেয়ার এবং এক্সপোর্ট করা উচিত। এর পরে আপনার নিজের উপাদানটি ব্যবহার করতে চান এমন প্রতিটি মডিউলে আপনার এই নতুন মডিউলটি আমদানি করা উচিত।

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

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

Comments

আপনার পদক্ষেপগুলি আমাকে সাহায্য করেনি তবে সম্ভবত এটি এঙ্গুলার 2 এ আমি বেশ নতুন, তাই আমি তাদের উত্তর দেব এবং সম্ভবত আমরা সমাধানটি একসাথে খুঁজে বের করব। আমি নিশ্চিত যে নামটি সঠিক, আমি অ্যাপমোডুলিতে উপাদানটি ঘোষনা করেছি, আমি অ্যাপমোডুলিতে উপাদানটি রফতানি করেছি এবং ক্লাইটি পুনরায় চালু করেছি। আমি আমার গ্রাহকরা অ্যাডকোম্পোন্টে অ্যাপমোডুল আমদানি করার চেষ্টাও করেছি তবে এর ফলে ত্রুটি হয়েছে: সর্বাধিক কল স্ট্যাকের আকার অতিক্রম করেছে (আমি অনুমান করি যে আমরা কৌনিক 2 তে অ্যাপমোডুল আমদানি করি না)।

— অরণহা

আপনার অ্যাপোমোডুলেলে নয়, আলাদা আলাদা মডিউলে আপনার উপাদানটি ঘোষণা এবং রফতানি করা উচিত। এর পরে আপনার প্রতিটি উপাদানটি এই নতুন মডিউলটি আমদানি করা উচিত যা আপনি আপনার উপাদানটি ব্যবহার করতে চান না।

— রবিন ডিজখফ

ঠিক আছে, আমি এখন এটি পেয়েছি। একমাত্র প্রশ্ন: আমি যখন নতুন নির্মিত মডিউলটি আমদানি করব (উইজেটসমডুল বলুন) এটি আআআআআআআআআআআলএল সমস্ত উপাদান লোড করবে, ডান? এটি কিছু ওভারহেড তবে সম্ভবত আমি কিছু ভুল বুঝছি। আমি অবশ্যই যোগাযোগবক্সমডুল তৈরি করতে পারি তবে এটি একটি সামান্য উপাদান হিসাবে অনেক। কোন ইঙ্গিত?

— অরণহা

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

— রবিন ডিজখফ

"এটি যদি অন্য মডিউলে থাকে তবে উপাদানটি রফতানি করবেন?" আমার জন্য কাজ!

— স্টিভেন

Answer 2

আমারও একি দশা. দেখা গেল যে ng generate component(সিএলআই সংস্করণ .1.১.৪ ব্যবহার করে) সন্তানের উপাদানগুলির জন্য অ্যাপমোডুলিতে একটি ঘোষণা যুক্ত করেছে, তবে এটি টেস্টবেড মডিউলে নয় যা এটি অনুকরণ করে।

"নায়কদের ভ্রমণ" নমুনা অ্যাপ্লিকেশনটিতে HeroesComponentনির্বাচক সহ একটি রয়েছে app-heroes। অ্যাপ্লিকেশন দৌড়ে জরিমানা যখন পরিবেশিত, কিন্তু ng testএই ত্রুটি বার্তা উত্পাদিত: 'app-heroes' is not a known element। যোগ করার পদ্ধতি HeroesComponentমধ্যে ঘোষণা ম্যানুয়ালি configureTestingModule(ইন app.component.spec.ts) এই ত্রুটি অবলুপ্তি ঘটিয়েছে।

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

  it('should create the app', () => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  });
}

Comments

এটি আমার সমস্যা ছিল - পরীক্ষার ফাইলে আমদানি যুক্ত করতে ভুলে গেছেন।

— সেলোরিও

Answer 3

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

আমি টার্মিনালটি বন্ধ করার পরে (এটি এনজি সার্ভ চলছিল) এবং আমার আইডিই পুনরায় চালু করার পরে, বার্তাটি প্রদর্শিত হবে না।

Comments

সমস্যাটি আদর্শ-নির্দিষ্ট। ওয়েবস্টর্ম নিয়ে আমারও একই সমস্যা। কৌণিক-ক্লিমে পরিবর্তিত পরিবর্তনগুলির জন্য ওয়েবস্টর্মকে অবহিত করা হয় না সুতরাং এটির কোনও নতুন উপাদান 'দেখুন' করতে আপনাকে আইডিই পুনরায় চালু করতে হবে!

— স্কাইবক্স

ভিএস কোড নিয়ে আমার একই সমস্যা আছে তবে আয়নিক 2 এর সাথেও a একটি পৃষ্ঠায় এটি কাজ করে। একটি উপাদান মধ্যে ত্রুটি আছে আয়ন- * একটি পরিচিত উপাদান নয় । আমি আপনার পরামর্শটি আয়নিক পরিবেশন বন্ধ করতে এবং আইডিই পুনরায় চালু করার চেষ্টা করেছি , তবে কিছুই কার্যকর হয় না। আপনি কি এর জন্য আরও একটি সমাধান জানেন? যাইহোক - কোড যাইহোক কাজ করে।

— সেবাস্তিয়ান অর্টম্যান

ভিএসকোডের ক্ষেত্রেও একই সমস্যা ছিল। সম্পাদক পুনরায় চালু করার পরে বার্তাটি চলে গেল।

— কুইলক্ল্যাশব্রিট

Answer 4

আমার একই ইস্যু প্রস্থ পিএইচপি ঝড় সংস্করণ 2017.3 আছে। এটি আমার জন্য এটি ঠিক করে: ইন্টেলিজ সমর্থন ফোরাম

এটি একটি ত্রুটি প্রস্থ ছিল @ কৌণিক ভাষা পরিষেবা: https://www.npmjs.com/package/@angular/language-service

Comments

এটি ওয়েবস্টর্ম 2018.3

— মোহাম্মদ মাহমুদ

Answer 5

আমার ক্ষেত্রে আমার অ্যাপ্লিকেশন, মডিউল একাধিক স্তরের ছিল তাই মডিউল আমি আমদানি করার চেষ্টা ছিল যে আসলে এটি ব্যবহৃত মডিউল পিতা বা মাতা মধ্যে যোগ করা হয়েছিল pages.module.tsপরিবর্তে, app.module.ts।

Answer 6

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

Answer 7

আমার ক্ষেত্রে সমস্যাটি মডিউলে উপাদান ঘোষণার অনুপস্থিত ছিল, তবে ঘোষণাটি যুক্ত করার পরেও ত্রুটিটি থেকে যায়। আমি সার্ভারটি বন্ধ করে দিয়েছিলাম এবং ত্রুটিটি চলে যাওয়ার জন্য পুরো প্রকল্পটি ভিএস কোডে পুনর্নির্মাণ করেছি।

Answer 8

এই বিভ্রান্ত কাঠামো আমাকে বাদাম চালাচ্ছে। প্রদত্ত যে আপনি একই মডিউলের অন্য উপাদান অংশের টেম্পলেটে কাস্টম উপাদানটিকে সংজ্ঞায়িত করেছেন, তারপরে আপনাকে মডিউলে রফতানি ব্যবহার করার প্রয়োজন হবে না (যেমন অ্যাপ্লিকেশন mod আপনার কেবলমাত্র উল্লিখিত মডিউলের @ এনজিএমডিউল নির্দেশিকায় ঘোষণাপত্রটি নির্দিষ্ট করতে হবে:

// app.module.ts

import { JsonInputComponent } from './json-input/json-input.component';

@NgModule({
  declarations: [
    AppComponent,
    JsonInputComponent
  ],
  ...

টেমপ্লেটে কাস্টম উপাদানটি ব্যবহার করার জন্য আপনাকে ( JsonInputComponentএই উদাহরণে) মধ্যে AppComponent( এই উদাহরণে) আমদানি করার দরকার নেই । উভয় উপাদান সংজ্ঞায়িত করা হয়েছে (উদাহরণস্বরূপ অ্যাপ্লিকেশন): মডিউল নামের সাথে আপনার কেবল কাস্টম উপাদানটিকে উপসর্গ করা দরকার:JsonInputComponentAppComponent

<form [formGroup]="reactiveForm">
  <app-json-input formControlName="result"></app-json-input>
</form>

অ্যাপ্লিকেশন-জসন-ইনপুটটি জাসন-ইনপুট নয় লক্ষ্য করুন!

ডেমো এখানে: https://github.com/lovefamilychildrenhappiness/AngularCustomComp घटक Vmitted

Answer 9

আমি কৌণিক শুরু করছি এবং আমার ক্ষেত্রে সমস্যাটি ছিল আমি 'আমদানি' বিবৃতি যুক্ত করার পরে ফাইলটি সংরক্ষণ করি নি।

Answer 10

রুটের মডিউলগুলি (এটি কোনও উত্তর হিসাবে দেখেনি)

প্রথম চেক করুন: আপনি যদি এটির মডিউলটির ভিতরে থাকা উপাদানটি ঘোষণা করে এবং রফতানি করে থাকেন তবে আপনি যে মডিউলটি এটি ব্যবহার করতে চান তা আমদানি করে এবং উপাদানটির নাম এইচটিএমএলের ভিতরে সঠিকভাবে রেখেছিলেন।

অন্যথায়, আপনি আপনার রাউটিং মডিউলের অভ্যন্তরে কোনও মডিউল মিস
করতে পারেন : যখন আপনার কাছে কোনও রুট সহ একটি রাউটিং মডিউল থাকে যা অন্য মডিউল থেকে কোনও উপাদানকে নিয়ে যায়, আপনি সেই রুট মডিউলটির মধ্যে সেই মডিউলটি আমদানি করা গুরুত্বপূর্ণ। তা না হলে কৌণিক CLI ত্রুটি দেখাবে: component is not a known element।

উদাহরণ স্বরূপ

1) নিম্নলিখিত প্রকল্প কাঠামো থাকা:

├───core
│   └───sidebar
│           sidebar.component.ts
│           sidebar.module.ts
│
└───todos
    │   todos-routing.module.ts
    │   todos.module.ts
    │
    └───pages
            edit-todo.component.ts
            edit-todo.module.ts

2) আপনার অভ্যন্তরে todos-routing.module.tsএকটি রুট রয়েছে edit.todo.component.ts(এর মডিউলটি আমদানি না করে):

  {
    path: 'edit-todo/:todoId',
    component: EditTodoComponent,
  },

রুটটি ঠিক কাজ করবে! তবে যখন আমদানি sidebar.module.tsভিতরে edit-todo.module.tsআপনি একটি ত্রুটি পেতে হবে: app-sidebar is not a known element।

স্থির করুন: যেহেতু আপনি দ্বিতীয় edit-todo.component.tsধাপে একটি রুট যুক্ত করেছেন তাই আপনাকে edit-todo.module.tsআমদানি হিসাবে যুক্ত করতে হবে , তার পরে আমদানি করা সাইডবার উপাদানটি কাজ করবে!

Answer 11

আমি একই সমস্যা ছিল। আমার ক্ষেত্রে আমি app.module.ts এ প্যারেন্টের উপাদানটি ঘোষণা করতে ভুলে গিয়েছি

একটি উদাহরণ হিসাবে যদি আপনি ব্যবহার করছেন <app-datapicker>মধ্যে নির্বাচক ToDayComponentটেমপ্লেট, আপনি উভয় ডিক্লেয়ার করা উচিত ToDayComponentএবং DatepickerComponentএ app.module.ts

Answer 12

মনে হয় আপনার একটি উপাদান রয়েছে:

পণ্য-list.component.ts:

import { Component } from '@angular/core';
    
    @Component({
        selector: 'pm-products',  
        templateUrl: './product-list.component.html'
    })
    
    
    export class ProductListComponent {
      pageTitle: string = 'product list';
    }

এবং আপনি এই ত্রুটি পান:

Src / app / app.componal.ts: 6: 3 - ত্রুটি NG8001: 'pm-product' তে কোনও ত্রুটি নেই বলে জানা যায়নি:

1. যদি 'pm-product' একটি কৌণিক উপাদান হয়, তবে এটি এই মডিউলটির অংশ কিনা তা যাচাই করুন।

app.component.ts:

import { Component } from "@angular/core";
@Component({
  selector: 'pm-root', // 'pm-root'
  template: `
  <div><h1>{{pageTitle}}</h1>
  <pm-products></pm-products> // not a known element ?
  </div>
  `
})
export class AppComponent {
  pageTitle: string = 'Acme Product Management';
}

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

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// --> add this import (you can click on the light bulb in the squiggly line in VS Code)
import { ProductListComponent } from './products/product-list.component'; 

@NgModule({
  declarations: [
    AppComponent,
    ProductListComponent // --> Add this line here

  ],
  imports: [
    BrowserModule
  ],
  bootstrap: [AppComponent],


})
export class AppModule { }

Answer 13

এই প্রশ্নটি পুরানো এবং বিজোড় মনে হতে পারে, কিন্তু যখন আমি একটি মডিউল (অলস লোডিং) লোড করার চেষ্টা করছিলাম এবং একই ত্রুটিটি পেয়েছিলাম তখন বুঝতে পেরেছিলাম যে বৃহত মডিউলটির অংশ হিসাবে চালিত উপাদানটির জন্য আমি একটি রফতানি ধারা অনুপস্থিত ।

এই Angular.io লিঙ্কটি ব্যাখ্যা করে : কেন একটি মডিউলের ভিতরে উপাদান / পরিষেবাগুলি ডিফল্টরূপে ব্যক্তিগত (বা সুরক্ষিত) থাকে। এগুলি সর্বজনীন করতে আপনাকে সেগুলি রফতানি করতে হবে।

@ লাইভ-লাভ কোড নমুনার সাথে @ রবিন জিকোফের উত্তরে সম্প্রসারণ করা , এটি আমার ক্ষেত্রে প্রযুক্তিগতভাবে অনুপস্থিত ছিল (কৌণিক 8):

@NgModule({
  declarations: [
    SomeOtherComponent,
    ProductListComponent
  ],
  imports: [
    DependantModule
  ],
  exports: [ProductListComponent] 
  //<- This line makes ProductListComponent available outside the module, 
  //while keeping SomeOtherComponent private to the module
})
export class SomeLargeModule { }