Ag-grid not loading data Cannot read properties of null (reading 'componentFromFramework')

I'am trying to fill ag-grid v20 with data from an observable. here is my ts component

i subscribe on ngOnInit to the api call, mapping the data to suit the columns def putting the data into a variable waiting the grid to be ready, and onGridReady i'am testing if the array is not empty and then trying to put the data into the ag-grid, it's only work with developer console opened

assets?: AssetElement[] = [];
  tmpAssets?: AssetElement[] = [];
  assets$?: Observable<AssetElement[]>;

  gridApi?: GridApi;
  private subscription?: Subscription;

  constructor(private router: Router,
              private selectedRowsService: SelectedRowsService,
              private myRamService: MyRamService) {
  }

  ngOnInit(): void {
    const busObjArr: AssetElement[] = [];
    this.subscription = this.myRamService.getAssests().pipe(
      map(res =>
        res.reduce((acc, bo) =>
          acc.concat(buildRowDataFromCollection(bo, 'assets', 'application_')), busObjArr)
      ), tap(res => console.log('new value'))
    ).subscribe(res =>
      this.assets = res
    );
  }

  updateSelection() {
    const array = this.gridApi?.getSelectedRows();
    this.router.navigate(['update']);
  }

  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;
    console.log('Grid is ready !!! assets : ' + this.assets?.length);
    // @ts-ignore
    if (this.assets?.length >= 0) {
      this.loadData(params.api);
    }
  }

  onClick() {
    this.gridApi?.updateRowData({add: this.assets});
    this.subscription?.unsubscribe();
  }

  ngAfterViewInit(): void {
    this.tmpAssets = this.assets;
  }

  onFirstDataRendered($event: any) {
    console.log('onFirstDataRendered !!! assets : ' + this.assets?.length);
  }

  loadData(gridApi: GridApi) {
    // @ts-ignore
    gridApi.setRowData(this.tmpAssets);

  }

and here my html

<div class="card card-bordered">
  <div class="card-header">
    <button (click)="onClick()" class="btn btn-lg btn-discreet-info ">DataRefresh</button>
    <button (click)="updateSelection()" class="btn btn-lg btn-discreet-info ">Update Selection</button>
  </div>
  <div class="card-body h-100 w-100 d-flex flex-column">
    <div style="height: 50rem">
      <div class="ag-theme-sg-bootstrap ag-theme-sg-bootstrap-condensed flex-grow-1 h-100">
          <ag-grid-angular
          #agGrid
          (gridReady)="onGridReady($event)"
          [rowSelection]="'multiple'"
          [rowData]="tmpAssets"
          [columnDefs]="columnDefs"
          (firstDataRendered)="onFirstDataRendered($event)"
          [onGridReady]=""
          headerHeight="30"
          style="height: 100%">
        </ag-grid-angular>
      </div>
    </div>
  </div>
  <div class="card-footer">CARD FOOTER</div>
</div>

the issue is when i open the developer console the data is loading perfectly, but when i'am closing it i'am getting the following error

core.js:5973 ERROR TypeError: Cannot read properties of null (reading 'componentFromFramework')
    at push.lXBk.UserComponentFactory.lookupComponentClassDef (userComponentFactory.js:277:1)
    at push.xPbl.CellComp.chooseCellRenderer (cellComp.js:638:1)
    at new CellComp (cellComp.js:75:1)
    at rowComp.js:959:1
    at Array.forEach (<anonymous>)
    at push.3oHf.RowComp.createCells (rowComp.js:958:1)
    at push.3oHf.RowComp.createRowContainer (rowComp.js:182:98)
    at push.3oHf.RowComp.setupNormalRowContainers (rowComp.js:255:1)
    at push.3oHf.RowComp.setupRowContainers (rowComp.js:237:1)
    at push.3oHf.RowComp.init (rowComp.js:80:1)

Kinds Regards,