The NG8001 error indicates that the clr-datagrid element is not recognized

The issue persists with clr-column clr-row, despite importing ClarityModule correctly.

import { GestionFournisseursComponent } from './gestion-fournisseurs/gestion-fournisseurs.component';
import {ClarityModule} from '@clr/angular';


@NgModule({
  declarations: [GestionFournisseursComponent],
  imports: [
    CommonModule,
    ReferentielRoutingModule,
    ClarityModule
  ]
})
export class ReferentielModule { }

HTMl:

<clr-datagrid></clr-datagrid>

Error:

Error: src/app/main/referentiel/gestion-fournisseurs/gestion-fournisseurs.component.html:2:1 - error NG8001: 'clr-datagrid' is not a known element:

  1. If 'clr-datagrid' is an Angular component, then verify that it is part of this module.
  2. If 'clr-datagrid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2


src/app/main/referentiel/gestion-fournisseurs/gestion-fournisseurs.component.ts:6:16
  6   templateUrl: './gestion-fournisseurs.component.html',
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  Error occurs in the template of component GestionFournisseursComponent.

I attempted importing the ClarityDatagridModule exclusively, reinstalled clarity, angular, dependencies, but the same error persists. Any assistance would be greatly appreciated.

Thank you in advance.

Answer №1

Encountering a similar issue, I found that when using Angular 12.2.17 and Clarity 12.0.7, I faced an error after adding Clarity with the command below:

ng add @clr/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2b9b6bffdb4ba">[email protected]</a>

To resolve this error, I utilized the following command:

npm install @clr/ui --save

This solution was sourced from the Clarity documentation at . It effectively resolved the issue in my scenario.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it possible to create a crossfade effect using angular animate and ngFor in my project?

I am trying to initiate an animation whenever I update the collection I provide in *ngFor: //JS state : string = 'a'; colors = { a: ['red','blue','green','yellow'], b: ['orange'] } public o ...

Issue observed with the functionality of checkAll and uncheckAll after a user interacts with a single checkbox

After completing an Angular course on Udemy, I decided to implement a custom checkbox in my Angular app. However, I encountered an issue where the UI was not updating properly when using checkAll and uncheckAll functions after the user interacted with an i ...

The Mongoose buffer timing out occurred when the model was being used in a linked project

The task: I developed a ShoppingCard project to test TypeScript references. The issue: When models are directly included in the main project, the MongoDB connection works successfully. https://github.com/pzoli/shoppingcard-api Tested at http://localho ...

Angular Batch Email UI Design Delivery

Looking to develop a user interface design resembling the process of sending batch emails. Are there any Angular libraries that can help create a UI similar to the one shown in this image? https://i.sstatic.net/cRvGx.jpg ...

Angular 2 - Troubleshooting [(ngModel)] Not Refreshing When [Value] Changes

In my code, I am successfully setting the value of an input by calculating two other ngModels. However, despite the input value updating, the ngModel itself remains unchanged. Take a look at the snippet below: <ion-item> <ion-label>Total p ...

Utilizing functional components and formatter functionality in React with react-jsx-highcharts

Exploring the capabilities of react-jsx-highcharts through a polar chart. Software Versions: React: 17.0.1 react-jsx-highcharts: 4.2.0 typescript: 4.0.3 I opt for functional components in my code, hence no usage of "class" or "this." The snippet f ...

Troubleshooting a GetStaticProps problem in Next.js

I'm currently facing an issue with retrieving posts from my WordPress site. After running tests on the URL endpoint, it seems to be functioning properly with client-side rendering. However, when I attempt to utilize the getStaticProps function, the re ...

Error: Unable to locate the specified Typescript function

For the source code, please visit https://github.com/zevrant/screeps I am encountering an issue with my implementation of interfaces in TypeScript. When trying to call the implemented interface, I am getting the following error: "TypeError: spawn.memory.t ...

Specifying data type in the fetch method

Screenshot depicting fetch function I'm currently working on a project using Next.js with Typescript and trying to retrieve data from a Notion database. I've encountered an error related to setting up the type for the database_id value. Can anyon ...

received TypeError when using combineLatest

import { combineLatest } from 'rxjs'; const obs1 = getAndCreateObservableOne(); const obs2 = getAndCreateObservableTwo(); console.log('Initial output', obs1, obs2); obs1.subscribe(e => console.log('Second output', e)); o ...

Is there a way for me to reach my Store through a service?

Recently, I started using NgRx with effects to handle sending API requests. The setup is pretty straightforward - my API requests are managed in a service, and my effect utilizes this service. @Injectable({ providedIn: 'root' }) export class M ...

Objects That Are Interconnected in Typescript

I have been delving into TS and Angular. I initially attempted to update my parent component array with an EventEmitter call. However, I later realized that this was unnecessary because my parent array is linked to my component variables (or so I believe, ...

Filter dynamic values in the mat-select dropdown using the mat-select-filter component

I'm having trouble using the mat-select-filter to filter data: <mat-form-field *ngIf="fundComplexesList"> <mat-select placeholder="Using array of objects"> <mat-s ...

The variance between executing code with and without breakpoints in JUnit using Selenium's Chrome Driver

My goal is to complete the sign-in page and then use selenium to navigate to a custom form. Everything seems to be working fine when I have a break point set, but as soon as I remove it, the session gets cleared out. The Angular authentication mechanism re ...

Setting up personalized colors for logging in Angular 2 with ng2-logger

Recently, I decided to try out a new tool called ng2-logger to improve the visualization of my console logs. https://www.npmjs.com/package/ng2-logger However, I've noticed that the colors it generates are random. Is there a way for me to choose spec ...

Create an entity with a field that holds a value type based on the value of another key field

Essentially, I am looking to create a customized "Pair" data type For example: type Pair<T extends Record<string, string | number>, K extends keyof T> = { field: K, value: T[K] } So, if we have: type Rabbit = { name: string, a ...

Troubleshooting problem with @Input number in Angular 2

Here is the component in question: <component value="3"></component> This is the code for the component: private _value:number; get value(): number { return this._value; } @Input() set value(value: number) { console.log(v ...

"Learn how to trigger an event from a component loop up to the main parent in Angular 5

I have created the following code to loop through components and display their children: parent.component.ts tree = [ { id: 1, name: 'test 1' }, { id: 2, name: 'test 2', children: [ { ...

Can you customize the "rem" values for individual Web Components when using Angular 2's ViewEncapsulation.Native feature?

I'm interested in creating a component with ViewEncapsulation.Native that utilizes Bootstrap 4 while others are using Bootstrap 3. Below is the component code with Bootstrap 4: import { Component, ViewEncapsulation } from '@angular/core'; i ...

Leveraging Observables in an Angular 2 component to broadcast data to multiple components

Is it possible to utilize Observables in components and which other components can subscribe to them? BugListComponent - The component is injected in the boot.ts file where all services are loaded (where bootstrap is located) import {Subject, BehaviorSub ...