any component is not a known element.

Hello,

I’m adding infragistics angular ui to an existing angular application. I get this error: ‘igx-drop-down’ is not a known element:

I followed the steps mentioned here: https://es.infragistics.com/community/blogs/b/infragistics/posts/step-by-step-with-images-to-add-ignite-ui-for-angular-in-an-existing-angular-project

In package.json:

“igniteui-angular”: “^9.0.9”,

“igniteui-angular-charts”: “^9.0.1”,

“igniteui-angular-core”: “^9.0.1”,

“igniteui-angular-maps”: “^9.0.1”,

app.module.ts:

import {

IgxAutocompleteModule,

IgxButtonModule,

IgxDropDownModule,

IgxInputGroupModule,

IgxDatePickerModule,

IgxDialogModule,

IgxIconModule,

IgxSelectModule,

IgxTimePickerModule

} from ‘igniteui-angular’;

In Imports:

IgxAutocompleteModule,

IgxButtonModule,

IgxDatePickerModule,

IgxDropDownModule,

IgxInputGroupModule,

IgxDialogModule,

IgxIconModule,

IgxSelectModule,

IgxTimePickerModule,

In component:

<igx-drop-down #cinemaPanelmaxHeight=”350px”>

<igx-drop-down-item-group *ngFor=”let town of towns | groupContains: cinema.value” [label]=”town.name”>

<igx-drop-down-item *ngFor=”let cinema of town.cinemas | contains: cinema.value” [value]=”cinema”>

{{cinema}}

</igx-drop-down-item>

</igx-drop-down-item-group>

</igx-drop-down>

Error:

<igx-drop-down #cinemaPanel maxHeight=”350px”> [ERROR ->]<igx-drop-down-item-group *ngFor=”let town of towns | groupContains: cinema.value” [label]=”town.name”) ‘igx-drop-down’ is not a known element: 1. If ‘igx-drop-down’ is an Angular component, then verify that it is part of this module. 2. If ‘igx-drop-down’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. (” </mat-form-field>

 

Hello Sam,

The tutorial you are referring to is a bit outdated. There is a new easier way of adding Ignite UI for Angular to an existing project. I suggest you to take a look at the following topics in our official documentation:

Installing and Creating a Project

Installing Ignite UI for Angular

As I have seen, you are trying to use our dropdown component. Here you can find documentation about it as well. I hope that with help of those three topics you will be able to resolve the error you are facing.

Please let me know if you have any additional questions.

Best Regards,
Martin Evtimov
Entry Level Software Developer
Infragistics, Inc.

Hi Martin,

Thanks for your response. I was able to fix the issue.

The component in which I was using igx-drop-down was declared in a shared module. I declared IgxDropDownModule import in the shared module and the igx component works fine.

Thanks,

Sam

Hello Sam,

I am glad that you managed to achieve your requirement.

Thank you for using Infragistics components.

Best Regards,

Martin Evtimov

Entry Level Software Developer

Infragistics, Inc.