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.
Top comments (2)
I appreciate this is very late to the party but in the next release, v29, the warnings will be improved so that you will have got the following console warning in the situation above. Hopefully this will help prevent others losing time in the future.
I had the same problem, good thing I found your blog post. Thanks!