loading...

[Solved] ag-Grid: Looking for component [agSetColumnFilter] but it wasn't found.

lysofdev profile image Esteban Hernández ・2 min read

We use AgGrid extensively in our Dashboard-style web application to show the user large datasets. The community version of Ag Grid contains the majority of its popular features but we ended up buying the enterprise version for the Set Filter, among other reasons.

However, when trying to use the Set Filter we ran into a confusing bug. Upon clicking on the filter button, we would be presented with the following error message in the console and no Set Filter to be found.

userComponentRegistry.js:215 ag-Grid: Looking for component [agSetColumnFilter] but it wasn't found.
core.js:15724 ERROR TypeError: Cannot read property 'componentFromFramework' of null
    at UserComponentFactory.push../node_modules/ag-grid-community/dist/lib/components/framework/userComponentFactory.js.UserComponentFactory.lookupComponentClassDef (userComponentFactory.js:283)
    at UserComponentFactory.push../node_modules/ag-grid-community/dist/lib/components/framework/userComponentFactory.js.UserComponentFactory.createComponentInstance (userComponentFactory.js:343)
    at UserComponentFactory.push../node_modules/ag-grid-community/dist/lib/components/framework/userComponentFactory.js.UserComponentFactory.createAndInitUserComponent (userComponentFactory.js:110)
    at UserComponentFactory.push../node_modules/ag-grid-community/dist/lib/components/framework/userComponentFactory.js.UserComponentFactory.newFilterComponent (userComponentFactory.js:73)
    at FilterManager.push../node_modules/ag-grid-community/dist/lib/filter/filterManager.js.FilterManager.createFilterInstance (filterManager.js:421)
    at FilterManager.push../node_modules/ag-grid-community/dist/lib/filter/filterManager.js.FilterManager.createFilterWrapper (filterManager.js:453)
    at FilterManager.push../node_modules/ag-grid-community/dist/lib/filter/filterManager.js.FilterManager.getOrCreateFilterWrapper (filterManager.js:383)
    at StandardMenuFactory.push../node_modules/ag-grid-community/dist/lib/headerRendering/standardMenu.js.StandardMenuFactory.showPopup (standardMenu.js:54)
    at StandardMenuFactory.push../node_modules/ag-grid-community/dist/lib/headerRendering/standardMenu.js.StandardMenuFactory.showMenuAfterButtonClick (standardMenu.js:45)
    at HeaderComp.push../node_modules/ag-grid-community/dist/lib/headerRendering/header/headerComp.js.HeaderComp.showMenu (headerComp.js:147)

We googled and googled and googled and googled but found no solution. There's a single question replicating this issue in Stack Overflow but the answer simply states that one should try using a custom filter instead. Wrong answer.

After reading through the extensive Ag Grid documentation, we came upon a solution so simple we questioned whether we truly deserved to be called software developers. It turns out we had forgotten to import the Ag Grid Enterprise package into our project.

To resolve the above error, simply add the following line to your main.ts file.

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import 'ag-grid-enterprise'; // <-- This will fix it.

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

I hope this post can save you the wasted hours we spent trying to figure out why the Set Filter was missing.

Posted on by:

lysofdev profile

Esteban Hernández

@lysofdev

Software Engineer specializing on performant web applications.

Discussion

markdown guide
 

I had the same problem, good thing I found your blog post. Thanks!