CUSTOM_ELEMENTS_SCHEMA NgModule.schemas এ যুক্ত হয়েছে তবুও ত্রুটি দেখাচ্ছে

Question

আমি সবেমাত্র অ্যাঙ্গুলার 2 আরসি 4 থেকে আরসি 6 এ আপগ্রেড করেছি এবং এটি করতে সমস্যা হচ্ছে।

আমি আমার কনসোলে নিম্নলিখিত ত্রুটিটি দেখতে পাচ্ছি:

Unhandled Promise rejection: Template parse errors:
'cl-header' is not a known element:
1. If 'cl-header' is an Angular component, then verify that it is part of this module.
2. If 'cl-header' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("<main>
    [ERROR ->]<cl-header>Loading Header...</cl-header>
    <div class="container-fluid">
      <cl-feedbackcontai"): AppComponent@1:4

এখানে আমার শিরোনাম অংশ:

import { Component } from '@angular/core';
import { Router } from '@angular/router';

// own service
import { AuthenticationService } from '../../../services/authentication/authentication.service.ts';

import '../../../../../public/css/styles.css';

@Component({
  selector: 'cl-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent { // more code here... }

এখানে আমার শিরোনাম মডিউল:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA }      from '@angular/core';
import { RouterModule } from '@angular/router';
import { CommonModule }      from '@angular/common';
import { FormsModule }      from '@angular/forms';

import { HeaderComponent }  from './../../../components/util_components/header/header.component.ts';

@NgModule({
    declarations: [ HeaderComponent ],
    bootstrap:    [ HeaderComponent ],
    imports: [ RouterModule, CommonModule, FormsModule ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class HeaderModule { }

আমি ব্যবহারের মডিউল নামে একটি মোড়ক মডিউল তৈরি করেছি যা শিরোনামডিটিকে আমদানি করে:

import { NgModule }      from '@angular/core';

import {HeaderModule} from "./header/header.module";
// ...

@NgModule({
    declarations: [ ],
    bootstrap:    [ ],
    imports: [ HeaderModule]
})
export class UtilModule { }

যা শেষ পর্যন্ত অ্যাপমোডিয়ুল দ্বারা আমদানি করা হয়:

import { NgModule }      from '@angular/core';

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

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

import {UtilModule} from "./modules/util_modules/util.module";
import {RoutingModule} from "./modules/routing_modules/routing.module";

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [BrowserModule, UtilModule, RoutingModule]
})
export class AppModule { }

আমার বোঝার জন্য আমি ত্রুটিটি ছাড়িয়ে যাওয়ার জন্য SCHEMA ব্যবহার করে ত্রুটি বার্তার নির্দেশাবলী অনুসরণ করছি। তবে মনে হচ্ছে এটি কাজ করে না। আমি কি ভুল করছি? (আমি আশা করি এটির কিছুই পরিষ্কার হয় নি আমি ঠিক এই মুহূর্তে দেখি না this এই সংস্করণে আপগ্রেড করতে গত 6 ঘন্টা ব্যয় করা হয়েছে ...)

Comments

আপনি যদি এটিকে আপনার সাথে যুক্ত করেন তবে AppModuleকী আপনি এখনও এটিকে আপনার উপাদানটিতে যুক্ত করতে হবে?

— আলেসান্দ্রো রেস্টা

এখানে একই, আমার জন্য কেবল "স্কিমাগুলি যুক্ত: [CUSTOM_ELEMENTS_SCHEMA]" কবজির মতো কাজ করেছে। আপনাকে ধন্যবাদ :)

— আইয়ন

আপনি যদি এই প্রশ্নের উত্তর হিসাবে আপনার "ফিক্স" যুক্ত করেন তবে এটি সহায়ক হবে, যাতে আপনার প্রশ্নটি জুড়ে আসা অন্যদের কাছে এটি পরিষ্কার হয়ে যায় যে আপনার সমাধানটি ব্যবহার করে তারা কীভাবে উপকৃত হতে পারে:]

— ড্যানি বুলিস

Answer 1

এই বিষয়ে আরও কিছুটা যুক্ত করতে চেয়েছি।

নতুন কৌণিক 2.0.0 চূড়ান্ত প্রকাশের সাথে (সেপ্টেম্বর 14, 2016), আপনি যদি কাস্টম এইচটিএমএল ট্যাগ ব্যবহার করেন তবে তা এটি রিপোর্ট করবে Template parse errors। একটি কাস্টম ট্যাগ এমন একটি ট্যাগ যা আপনি আপনার এইচটিএমএলে ব্যবহার করেন যা এই ট্যাগগুলির মধ্যে একটি নয় ।

দেখে মনে হচ্ছে লাইনটি schemas: [ CUSTOM_ELEMENTS_SCHEMA ]প্রতিটি উপাদানটিতে যুক্ত করা দরকার যেখানে আপনি কাস্টম এইচটিএমএল ট্যাগ ব্যবহার করছেন।

সম্পাদনা করুন:schemas ঘোষণা একটি হওয়া প্রয়োজন @NgModuleপ্রসাধক। নীচের উদাহরণটিতে একটি কাস্টম উপাদান সহ একটি কাস্টম মডিউল দেখায় CustomComponentযা সেই উপাদানটির জন্য এইচটিএমএল টেমপ্লেটে যে কোনও এইচটিএমএল ট্যাগকে মঞ্জুরি দেয়।

custom.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CustomComponent } from './custom.component';

@NgModule({
  declarations: [ CustomComponent ],
  exports: [ CustomComponent ],
  imports: [ CommonModule ],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CustomModule {}

custom.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-custom-component',
  templateUrl: 'custom.component.html'
})
export class CustomComponent implements OnInit {
  constructor () {}
  ngOnInit () {}
}

custom.component.html

এখানে আপনি যে কোনও HTML ট্যাগ ব্যবহার করতে পারেন।

<div class="container">
  <boogey-man></boogey-man>
  <my-minion class="one-eyed">
    <job class="plumber"></job>
  </my-minion>
</div>

Comments

আমার একটি খুব সাধারণ অ্যাপ্লিকেশন রয়েছে যার একক মডিউলে একাধিক উপাদান রয়েছে। আমি এটি আমার মডিউলে যুক্ত করেছি ... আমি এখনও ত্রুটি পেয়েছি ...

— নিকোলাস আইরিসারি

ধন্যবাদ কালেব একটি সাধারণ পরীক্ষা চালানোর সময় আমি ত্রুটিগুলি পেয়েছিলাম। যদিও আমি এটি আবিষ্কার করেছি ... আমি CUSTOM_ELEMENTS_SCHEMAআমার ইউনিট পরীক্ষা নকল মডিউলটিতে যোগ করছিলাম না । আমি তা করার সাথে সাথে এটি অভিযোগ করা বন্ধ করে দিয়েছে।

— নিকোলাস আইরিসারি

অনুমোদিত কাস্টম উপাদানগুলি সংজ্ঞায়নের জন্য কি কোনও উপায় আছে? ব্যবহারের CUSTOM_ELEMENTS_SCHEMAফলে ত্রুটি হতে পারে যা খুঁজে পাওয়া শক্ত, তবে আমি এর জন্য কাস্টম উপাদানগুলির নাম ব্যবহার করতে চাইng-content ঐ নির্দিষ্ট উপাদানের ত্রুটি ঘটাচ্ছে নাম ছাড়া তাদের জন্য উপাদান যে শুধু ng-সামগ্রী হবে ... তৈরি ছাড়া আমার নিয়ন্ত্রণ বিভাগে

— জেসন গোয়ামাত

@ কালেব আপনি দয়া করে কী বোঝাতে চাইছেন তার একটি দ্রুত কোড উদাহরণ প্রদান করতে পারেন মনে হচ্ছে schemas: [ CUSTOM_ELEMENTS_SCHEMA ]আপনি এইচটিএমএল ট্যাগ ব্যবহার করছেন এমন প্রতিটি উপাদানটিতে লাইন যুক্ত করা দরকার ? দেখে মনে হচ্ছে Componentসাজসজ্জাকারী কোনও schemasপরামিতি গ্রহণ করছেন না ।

— ড্যানি বুলিস 26:58

আরে @ ড্যানিবুলিস, Componentসাজসজ্জারের পরিবর্তে, এটি সাজসজ্জারীর মধ্যে পাওয়া যায় NgModule। আপনাকে সেই উপাদানটির জন্য একটি মডিউল তৈরি করতে হবে এবং তারপরে আপনি সেখানে স্কিমাটি নির্দিষ্ট করতে পারবেন। ডক্স এবং একটি উদাহরণের সাথে লিঙ্ক।

— কালেব

Answer 2

এটি দ্বারা স্থির:

ক) schemas: [ CUSTOM_ELEMENTS_SCHEMA ]প্রতিটি উপাদান যোগ বা

খ) যোগ করা

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

এবং

schemas: [
  CUSTOM_ELEMENTS_SCHEMA
],

আপনার মডিউল।

Comments

এটি ঘোষণা করতে ভুলবেন না ... এটি @ কৌনিক / কোরে অবস্থিত। এর মতো কিছু মাপসই করা উচিত:import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

— rlasjunies

এই পোস্টটি অনুসরণ করার পদ্ধতিটিতে সহায়তা করতে পারে: माध्यम.com

— কার্লোস ই

স্কিমা যুক্ত করা: [CUSTOM_ELEMENTS_SCHEMA] প্রতিটি উপাদানগুলিতে, কৌশলটি করেছেন! ধন্যবাদ!

— পেড্রো ফেরেরিরা

কৌনিক 9 এ স্কিমার অস্তিত্ব নেই

— রেনিল বাবু

Answer 3

আপনি যদি কাস্টম উপাদানগুলির সাথে কোনও উপাদান পরীক্ষা করে নিচ্ছেন তবে ইউনিট পরীক্ষা করার সময় এটিও উপস্থিত হতে পারে। সেক্ষেত্রে কাস্টম_সংশ্লিষ্ট_সেমিমাটিকে টেস্টিংমডুলিতে যুক্ত করা দরকার যা সেই উপাদানটির জন্য .spec.ts ফাইলের শুরুতে সেটআপ হয়ে যায়। Header.componal.spec.ts সেটআপ কীভাবে শুরু হবে তার উদাহরণ এখানে রয়েছে:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

describe('HeaderComponent', () => {
  let component: HeaderComponent;
  let fixture: ComponentFixture<HeaderComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [PrizeAddComponent],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA
      ],
    })
      .compileComponents();
  }));

Comments

ধন্যবাদ! এটি খুঁজে পেতে আমাকে অনেক # এবং @% দীর্ঘ সময় নিয়েছে

— এফ্লাত

Answer 4

@NgModule({})'App.module.ts' এর নীচে নিম্নলিখিতগুলি যুক্ত করুন :

import {CUSTOM_ELEMENTS_SCHEMA} from `@angular/core`;

এবং তারপর

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
]

আপনার 'app.module.ts' এর মতো দেখতে হবে:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [],
  imports: [],
  schemas: [ CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Comments

তবে এখন আপনার পুরো অ্যাপ্লিকেশনটি কাস্টম ট্যাগগুলিকে মঞ্জুরি দিচ্ছে।

— EE33

Answer 5

এটি আমার পক্ষেও কার্যকর হয়নি। আমি বদলে গেছি

CUSTOM_ELEMENTS_SCHEMA

জন্য

NO_ERRORS_SCHEMA

যা এই নিবন্ধে প্রস্তাবিত হয়েছিল: https://scotch.io/tutorials/angular-2-transc شمول-used-ng- content

এখন এটা কাজ করছে.

Comments

নিস! এটা আমার জন্য কাজ করেছে। আমি আমার উপাদান HTML এ XML উপাদান যুক্ত করতে চেয়েছিলাম এবং আমি ত্রুটি পেয়েছি। অনেক অনেক ধন্যবাদ

— সেলসো সোয়ারস

কৌণিক উপাদানগুলির মধ্যে কৌণিক উপাদানগুলির মধ্যে কৌণিক উপাদানগুলির পরিবেশন করা হয়েছিল (কৌণিক 8) যুক্ত করা CUSTOM_ELEMENTS_SCHEMAকোনও উপকারে আসে NO_ERRORS_SCHEMAনি তবে কৌতুকটি করেছিল এবং একক কৌণিক উপাদানগুলির সমস্ত বাসা বাঁধাই এখন কবজির মতো কাজ করে

— যোগী

এটি আমার পক্ষে কাজ করেছে TestBed। এলিমেন্টটি ভাল কাজ করছিল তবে পরীক্ষা ব্যর্থ হয়েছিল। যোগ করা হয়েছে schemas: [NO_ERRORS_SCHEMA], এবং এটি সব ভাল।

— ভিএসও

Answer 6

util.component.ts

@Component({
    selector: 'app-logout',
    template: `<button class="btn btn-primary"(click)="logout()">Logout</button>`
})
export class LogoutComponent{}

util.module.ts

@NgModule({
    imports: [...],
    exports: [
        LogoutComponent
    ],
    declarations: [LogoutComponent]
})
export class AccountModule{};

লগআউট কম্পোনেন্টটি রফতানি করা দরকার

dashboard.module.ts
আমদানিতে আমদানি AccountModuleযেখানে আমরা ব্যবহারকারীর থেকে<app-logout> আমদানি {AccountModule use ব্যবহার করতে চাই ;

@NgModule({
  imports: [
    CommonModule, AccountModule
  ],
  declarations: [DashboardComponent]
})
export class DashboardModule { }

dashboard.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  template: `<div><app-logout></app-logout></div>`
})
export class DashboardComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
}

আমার আমদানি এবং ব্যবহারের প্রয়োজন নেই CUSTOM_ELEMENTS_SCHEMA।
তবে ড্যাশবোর্ড.মডিউল অলস বোঝা থাকা অবস্থায় এটি কাজ করছে না। অলস লোডিংয়ের ক্ষেত্রে
ব্যবহার CUSTOM_ELEMENTS_SCHEMAকরার সময় ত্রুটিটি দমন করা হয় তবে উপাদানটি ডোমে যুক্ত হয় না।

Comments

আইডিএম +1 আর ত্রুটি নয়, তবে কোনও ডোম আপডেট নেই, '-' দিয়ে নির্বাচিতদের নির্বাচিতদের কাজ করার চেষ্টা করার জন্য এই কাজটি হল #### !!! && ù * $

— ব্যবহারকারী 1568220

অনেক অনেক ধন্যবাদ, আমি এক সপ্তাহ পরে, আমি জানতে পেরেছিলাম যে এটি

— আয়নিকের

@ অরুন - আপনার সমাধানটি 100% নির্ভুল, 1) রফতানিতে যোগ করা প্রয়োজন এবং 2) কাস্টম_সামগ্রী_স্কিমার প্রয়োজন নেই

— আশ্বিন

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

— ডেভিড

Answer 7

কৌণিক পদার্থযুক্ত উপাদানগুলির সাথে আমার ইউনিট পরীক্ষাগুলির সাথে একই রকম ত্রুটি উপস্থিত হয়েছিল। উপরের @ ড্যান স্টার্লিং-তালবার্টের উত্তর অনুসারে, এটি আমার উপাদান .spec ফাইলে যুক্ত হয়েছে এবং আমার ইউনিট পরীক্ষাগুলি থেকে ত্রুটিটি সাফ হয়ে গেছে।

Import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'

তারপরে উত্পন্ন প্রতিটি () বিবৃতিতে স্কিমা যুক্ত করুন:

beforeEach(asyn(() => {
    declarations: [ AboutComponent ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
.compileComponents();
}));

আমার কর্ম ত্রুটিটি ছিল: যদি 'মাদুর প্যানেল-শিরোনাম' কোনও ওয়েব উপাদান হয় তবে এই বার্তাটি দমন করতে এই উপাদানটির '@ এনজিএমডিউল.সেমাস' এ 'CUSTOM_ELEMENTS_SCHEMA' যুক্ত করুন।

Answer 8

কেবল পোস্টটি পড়ুন এবং কৌনিক 2 ডক্স অনুসারে:

export CUSTOM_ELEMENTS_SCHEMA
Defines a schema that will allow:

any non-Angular elements with a - in their name,
any properties on elements with a - in their name which is the common rule for custom elements.

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

Comments

নামে একটা ড্যাশ? কেন এইরকম বোকা কনভেনশন চাপিয়ে দেওয়া?

— ম্যারিয়ান

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

— ম্যারিয়ান

Answer 9

এটি বরং দীর্ঘ পোস্ট এবং এটি সমস্যার আরও বিস্তারিত ব্যাখ্যা দেয়।

সমস্যাটি (আমার ক্ষেত্রে) তখন আসে যখন আপনার একাধিক স্লট সামগ্রী প্রযোজনা হয়

আরও দেখুন বিষয়বস্তু অভিক্ষেপ আরও তথ্যের জন্য।

উদাহরণস্বরূপ, আপনার যদি এমন কোনও উপাদান থাকে যা দেখতে এরকম দেখাচ্ছে:

এইচটিএমএল ফাইল:

 <div>
  <span>
    <ng-content select="my-component-header">
      <!-- optional header slot here -->
    </ng-content>
  </span>

  <div class="my-component-content">
    <ng-content>
      <!-- content slot here -->
    </ng-content>
  </div>
</div>

টিএস ফাইল:

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss'],
})
export class MyComponent {    
}

এবং আপনি এটি ব্যবহার করতে চান:

<my-component>
  <my-component-header>
    <!-- this is optional --> 
    <p>html content here</p>
  </my-component-header>


  <p>blabla content</p>
  <!-- other html -->
</my-component>

এবং তারপরে আপনি টেমপ্লেট বিশ্লেষণ ত্রুটিগুলি পান যা একটি পরিচিত কৌণিক উপাদান নয় এবং বাস্তবে তা নয় - এটি আপনার উপাদানটির কোনও এনজি-সামগ্রীর উল্লেখ মাত্র:

এবং তারপরে সহজতম ফিক্সটি যুক্ত করা হচ্ছে

schemas: [
    CUSTOM_ELEMENTS_SCHEMA
],

... আপনার app.module.ts এ

---

তবে এই সমস্যার জন্য একটি সহজ এবং পরিষ্কার পদ্ধতি রয়েছে - ব্যবহারের পরিবর্তে <my-component-header> রয়েছে - সেখানে স্লটে html sertোকানোর - আপনি এই কাজের জন্য কোনও শ্রেণীর নাম ব্যবহার করতে পারেন:

এইচটিএমএল ফাইল:

 <div>
  <span>
    <ng-content select=".my-component-header">  // <--- Look Here :)
      <!-- optional header slot here -->
    </ng-content>
  </span>

  <div class="my-component-content">
    <ng-content>
      <!-- content slot here -->
    </ng-content>
  </div>
</div>

এবং আপনি এটি ব্যবহার করতে চান:

<my-component>
  <span class="my-component-header">  // <--- Look Here :) 
     <!-- this is optional --> 
    <p>html content here</p>
  </span>


  <p>blabla content</p>
  <!-- other html -->
</my-component>

সুতরাং ... আর কোনও উপাদান নেই যা বিদ্যমান নেই তাই এতে কোনও সমস্যা নেই, কোনও ত্রুটি নেই, অ্যাপ্লিকেশন.মডিউল.টসে CUSTOM_ELEMENTS_SCHEMA এর দরকার নেই

সুতরাং আপনি যদি আমার মতো হয়ে থাকেন এবং মডিউলে CUSTOM_ELEMENTS_SCHEMA যুক্ত করতে না চান - আপনার উপাদানটি এভাবে ব্যবহার করা ত্রুটিগুলি উত্পন্ন করে না এবং আরও পরিষ্কার।

এই সমস্যা সম্পর্কে আরও তথ্যের জন্য - https://github.com/angular/angular/issues/11251

কৌণিক বিষয়বস্তু অভিক্ষেপ সম্পর্কে আরও তথ্যের জন্য - https://blog.angular-university.io/angular-ng-content/

আপনি https://scotch.io/tutorials/angular-2-transc شمول-used-ng-content এছাড়াও দেখতে পারেন

Comments

এটি আমি যা খুঁজছিলাম ঠিক সেটাই ছিল, ভাগ করার জন্য ধন্যবাদ!

— রোমোয়েল্ড

Answer 10

উপরের স্বীকৃত উত্তরগুলি আমার ত্রুটিগুলি পুরোপুরি ঠিক করে নি বলে আমি একটি অতিরিক্ত তথ্য যোগ করতে চাই।

আমার দৃশ্যে, আমার একটি পিতা-মাতা উপাদান রয়েছে, যা একটি শিশু উপাদান ধারণ করে। এবং সেই শিশু উপাদানটিতে আরও একটি উপাদান রয়েছে।

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

Answer 11

আমি মনে করি আপনি একটি কাস্টম মডিউল ব্যবহার করছেন। আপনি নিম্নলিখিত চেষ্টা করতে পারেন। আপনার মডিউল.মডিউল.টস ফাইলগুলিতে আপনাকে নিম্নলিখিতটি যুক্ত করতে হবে :

import { GridModule } from '@progress/kendo-angular-grid';
@NgModule({
  declarations: [ ],
  imports: [ CommonModule, GridModule ],
  exports: [ ],
})

Answer 12

এটি আমার পক্ষে কার্যকর হয়নি (২.০.০ ব্যবহার করে)। আমার জন্য যা কাজ করেছিল তা পরিবর্তে রাউটার টেস্টিংমডুল আমদানি করছিল।

আমি নির্দিষ্ট ফাইলটিতে রাউটার টেস্টিংমডুল আমদানি করে এটি সমাধান করেছি।

import {
    RouterTestingModule
} from '@angular/router/testing';

  beforeEach(() => {

        TestBed.configureTestingModule({
            providers: [
                App,
                AppState,
                Renderer,
                {provide: Router,  useClass: MockRouter }
            ],
            imports: [ RouterTestingModule ]
        });

    });

Answer 13

আমার জন্য, আমার এটি দেখার দরকার ছিল:

1. If 'cl-header' is an Angular component, then verify that it is part of this module.

এর অর্থ হল আপনার কম্পোনেন্ট এ অন্তর্ভুক্ত নেই যে app.module.ts। নিশ্চিত করুন যে এটি আমদানি করা হয়েছে এবং তারপরে declarationsবিভাগে অন্তর্ভুক্ত রয়েছে ।

import { NgModule }      from '@angular/core';

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

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

import { UtilModule } from "./modules/util_modules/util.module";
import { RoutingModule } from "./modules/routing_modules/routing.module";

import { HeaderComponent } from "./app/components/header.component";

@NgModule({
    bootstrap: [AppComponent],
    declarations: [
        AppComponent,
        HeaderComponent
    ],
    imports: [BrowserModule, UtilModule, RoutingModule]
})
export class AppModule { }

Answer 14

আমি সবেমাত্র আমদানি করেছি ClarityModuleএবং এটি সমস্ত সমস্যার সমাধান করেছে। একবার চেষ্টা করে দেখো!

import { ClarityModule } from 'clarity-angular';

এছাড়াও, আমদানিতে মডিউল অন্তর্ভুক্ত করুন।

imports: [ ClarityModule ],

Comments

আরে, haniশানী। আপনি কেন দয়া করে এটির জন্য একটি ব্যাখ্যা যুক্ত করতে পারেন?

— f.khantsis

যদি আমরা এর জন্য ডকুমেন্টেশনটি পরিদর্শন করি CUSTOM_ELEMENTS_SCHEMA, Angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA এ আমরা দেখতে পাব যে CUSTOM_ELEMENTS_SCHEMA এনজিএমডুলকে ড্যাশ কেস (-) -র মতো একই অংগিক উপাদান রাখার অনুমতি দেয় {এই দৃশ্যের মতো} স্পষ্টতা মডিউল যখন আমদানি করা হয় তখন ডিফল্টরূপে সমস্ত ক্লার-আইকন ইত্যাদি অন্তর্ভুক্ত থাকে এবং আমরা স্বচ্ছতা মডিউলের অন্যান্য কার্যকারিতাও ব্যবহার করতে পারি।

— ইশানী

এটি এখানে সমস্যার অপ্রাসঙ্গিক। স্বচ্ছতা মডিউল আমদানি করে কীভাবে আপনি এটি সমাধান করবেন ?? @Ishani

— HelloWorld

যদি আপনি সমস্যার বিবৃতিটি পড়ে থাকেন তবে কৌণিক সনাক্ত করতে সক্ষম হয় না clr-headerThe একই ত্রুটিটি clr-iconঅন্যদের জন্য আসে । যেমনটি আমি আমার পূর্ববর্তী মন্তব্যে উল্লেখ করেছি, স্পষ্টতা মডিউলটিতে এটি ডিফল্ট থাকে। আমি আশা করি এটি আপনার প্রশ্নের উত্তর দিয়েছে।

— haniশানী

Answer 15

/app/app.module.ts ফাইলে এই সমস্যাটি সমাধান করুন

আপনার উপাদানটি আমদানি করুন এবং এটি ঘোষণা করুন

import { MyComponent } from './home-about-me/my.component';

@NgModule({
  declarations: [
    MyComponent,
  ]

Answer 16

আপনি কি ওয়েবপ্যাকটি ব্যবহার করেছেন ... হ্যাঁ দয়া করে ইনস্টল করুন

angular2-template-loader

এবং এটি রাখা

test: /\.ts$/,
   loaders: ['awesome-typescript-loader', 'angular2-template-loader']

Comments

আমি ডিফল্ট পরীক্ষাগুলি পাথ করতে পারি না যা এনজি জি দ্বারা উত্পাদিত উপাদান দ্বারা তৈরি হয়েছিল এবং একই ত্রুটি পেয়েছিল। এই বিষয়টির কোনও কিছুই সহায়ক ছিল না :( আমি তখনই ত্রুটিগুলি সরিয়ে ফেলি যখন আমি উপাদানগুলি নির্দিষ্ট ফাইলগুলির জন্য মন্তব্য করা হয়েছিল :(

— Nesquik27

আমি ঠিক বুঝতে পেরেছি যে কাস্টম ট্যাগগুলি কেবলমাত্র v2 এর নীচে কৌণিকের সাথে কাজ করছিল ?! আমি ইউটিউবে কিছু পরীক্ষা করেছি এবং আমি v4 পরিবেশে v2 থেকে আমার কোডটি পরীক্ষা করার চেষ্টা করছি

— Nesquik27