angular/components · error

Could not find tile at given position.

Error message

Could not find tile at given position.

What it means

MatGridListHarness.getTileAtPosition scans the rendered tile harnesses for one whose row/col span covers the requested position. When no tile occupies that cell it throws this error, since the harness API only returns existing tiles.

Source

Thrown at src/material/grid-list/testing/grid-list-harness.ts:86

    // The tile coordinator respects the colspan and rowspan for calculating the positions
    // of tiles, but it does not create multiple position entries if a tile spans over multiple
    // columns or rows. We want to provide an API where developers can retrieve a tile based on
    // any position that lies within the visual tile boundaries. For example: If a tile spans
    // over two columns, then the same tile should be returned for either column indices.
    for (let i = 0; i < this._tileCoordinator.positions.length; i++) {
      const position = this._tileCoordinator.positions[i];
      const {rowspan, colspan} = tiles[i];
      // Return the tile harness if the given position visually resolves to the tile.
      if (
        column >= position.col &&
        column <= position.col + colspan - 1 &&
        row >= position.row &&
        row <= position.row + rowspan - 1
      ) {
        return tileHarnesses[i];
      }
    }
    throw Error('Could not find tile at given position.');
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

  1. Verify the row/col values are zero-based and match the actual tile placement (colspan/rowspan included).
  2. Print or assert the full tile layout first with harness.getTiles() and inspect each tile's position before querying.
  3. Ensure the tiles you expect are actually rendered (no *ngIf hiding them) before calling getTileAtPosition.
  4. Catch the error in tests when the absence of a tile at a position is the expected assertion.

Example fix

// before
const tile = await grid.getTileAtPosition({ row: 2, col: 3 });
// after
const tiles = await grid.getTiles();
const tile = tiles.find(async t => (await t.getPosition()) .row === 2 && ...) // or guard:
const pos = { row: 2, col: 3 };
let tile;
try { tile = await grid.getTileAtPosition(pos); } catch { /* tile absent as expected */ }
Defensive patterns

Strategy: try-catch

Validate before calling

const tiles = await grid.getTiles();
const positions = await Promise.all(tiles.map(t => t.getPosition()));
const exists = positions.some(p => pos.row >= p.row && pos.row < p.row + (p.rowspan ?? 1) && pos.col >= p.col && pos.col < p.col + (p.colspan ?? 1));
if (!exists) return null; // skip lookup

Try / catch

let tile: MatGridTileHarness | null = null;
try {
  tile = await grid.getTileAtPosition({ row: 2, col: 3 });
} catch (e) {
  if (e instanceof Error && e.message.includes('Could not find tile')) {
    tile = null; // expected absence in this test
  } else { throw e; }
}

Prevention

When it happens

Trigger: Calling harness.getTileAtPosition({row: r, col: c}) during a test where no tile spans that cell — e.g. wrong coordinates for the layout, an off-by-one after a colspan/rowspan change, or querying a cell beyond the grid's cols rows.

Common situations: Test code written against an older tile layout; tiles rendered conditionally so the expected tile isn't in the DOM; miscounting because grid positions are zero-based while tests assumed one-based.

Related errors


AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/4978c737272e52ce. Report an issue: GitHub.