title: Angular & ag-grid: cannot register framework component using frameworkComponents
body: <p>As part of an Angular application, I am developing a table based on ag-grid and I want to render a certain cell as an html link.</p>
  
  <p>As I am building the columnDefs dynamically, I would like to avoid hardcoding the cell renderer component (<strong>ForeignKeyRendererComponent</strong> in the code below) in the column definition.</p>
  
  <p>Unfortunately, I am not able to register the framework components as per the manual: <a href="https://www.ag-grid.com/javascript-grid-components/#registering-framework-components" rel="noreferrer">https://www.ag-grid.com/javascript-grid-components/#registering-framework-components</a></p>
  
  <p>When I do so, I am getting this error:</p>
  
  <blockquote>
    <p>Error: No component factory found for fkRenderer. Did you add it to
    @NgModule.entryComponents?</p>
    
    <p>at noComponentFactoryError (core.js:3256)</p>
  </blockquote>
  
  <p>The only way this works is by referencing the cell renderer component directly in the column definition, like this: <code>cellRendererFramework: ForeignKeyRendererComponent</code>.</p>
  
  <hr>
  
  <p><strong>My setup &amp; what I have tried:</strong></p>
  
  <p>Angular v6.1.10</p>
  
  <p>ag-grid v21.0.1</p>
  
  <p><strong>module.ts</strong></p>
  
  <pre><code>@NgModule({
    imports: [
      AgGridModule.withComponents([ForeignKeyRendererComponent]),
      ...
    ],
    declarations: [
      ForeignKeyRendererComponent,
      ...
    ],
    entryComponents: [
      ForeignKeyRendererComponent
    ],
  });
  </code></pre>
  
  <p><strong>component.html</strong></p>
  
  <pre><code>&lt;ag-grid-angular style="height: 500px;"
                   class="ag-theme-balham"
                   [context]="context"
                   (gridReady)="onGridReady($event)"
                   [gridOptions]="gridOptions"
                   [frameworkComponents]="frameworkComponents"
                   [rowData]="rowData"
                   [columnDefs]="columnDefs"
                   rowSelection="multiple"
                   pagination=true
                   paginationPageSize=10&gt;
  &lt;/ag-grid-angular&gt;
  </code></pre>
  
  <p><strong>component.ts</strong></p>
  
  <pre><code>  private gridOptions: GridOptions = {
      defaultColDef: {
        filter: true
      },
      animateRows: true,
      isExternalFilterPresent: this.isExternalFilterPresent.bind(this),
      doesExternalFilterPass: this.doesExternalFilterPass.bind(this),
      frameworkComponents: { fkRenderer: ForeignKeyRendererComponent }
    };
  ...
  this.columnDefs.push({
    headerName: translation,
    field: columnNames[index],
    sortable: true,
    filter: customFilter,
    editable: true,
    cellRendererFramework: 'fkRenderer'
  });
  </code></pre>
  
  <p>I have also tried to specify the frameworkComponents independently of the gridOptions: <code>this.frameworkComponents = { fkRenderer: ForeignKeyRendererComponent }</code>, but got the same error.</p>
  
  <hr>
  
  <p><strong>EDIT: Tried Sean Landsman's suggestion:</strong></p>
  
  <p>Same frameworkComponents definition:</p>
  
  <pre><code>frameworkComponents = { fkRenderer: ForeignKeyRendererComponent };
  </code></pre>
  
  <p>But with column definition like this:</p>
  
  <pre><code>...
  cellRenderer: 'fkRenderer'
  ...
  </code></pre>
  
  <p>In this case, I am getting a new error:</p>
  
  <blockquote>
    <p>custom-error-handler.ts:14 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 CellComp.push../node_modules/ag-grid-community/dist/lib/rendering/cellComp.js.CellComp.chooseCellRenderer
    (cellComp.js:632)
        at new CellComp (cellComp.js:80)
        at RowComp.push../node_modules/ag-grid-community/dist/lib/rendering/rowComp.js.RowComp.createNewCell
    (rowComp.js:610)
        at rowComp.js:594
        at Array.forEach ()
        at RowComp.push../node_modules/ag-grid-community/dist/lib/rendering/rowComp.js.RowComp.insertCellsIntoContainer
    (rowComp.js:587)
        at RowComp.push../node_modules/ag-grid-community/dist/lib/rendering/rowComp.js.RowComp.refreshCellsInAnimationFrame
    (rowComp.js:503)
        at AnimationFrameService.push../node_modules/ag-grid-community/dist/lib/misc/animationFrameService.js.AnimationFrameService.executeFrame
    (animationFrameService.js:84)
        at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask
    (zone.js:421)</p>
  </blockquote>