Verify

ndop verify checks the components and pages you or an agent wrote with Ndop. It reports every problem with its file, line and rule, often with the fix, and exits with an error until there are none.

npx @ndop/cli verify src/app/settings

pnpm dlx @ndop/cli verify src/app/settings

yarn dlx @ndop/cli verify src/app/settings

bunx @ndop/cli verify src/app/settings

Paths can be files or folders; src/app by default.

Install

The checks need a linter and a browser driver, so they live in a separate dev dependency, @ndop/verify, which ndop init --verify adds. The render step also needs Chromium:

npm install --save-dev @ndop/verify

pnpm add --save-dev @ndop/verify

yarn add --save-dev @ndop/verify

bun add --save-dev @ndop/verify

npx playwright install chromium

pnpm dlx playwright install chromium

yarn dlx playwright install chromium

bunx playwright install chromium

Without Chromium, every other step still runs, and the result says why rendering was skipped.

What it checks

1. Usage

   Your templates, against the components' metadata: a selector no component has, with the closest real one; a component that isn't installed, with its ndop add command; a misspelled input; a value outside an input's allowed ones; a required input left unbound; a part outside the part it must sit in, such as a dialog title outside its dialog.

2. Build

   The checked components, built through your app's own build target, so your Angular version, styles, path aliases and strict template checks apply. Type and template errors come back with their file and line.

3. Lint

   Ndop's ESLint rules, with your project's own ESLint config when it has one. See the rules.

4. Render

   Each component in Chromium, in light and dark: axe checks its accessibility, console errors are reported, and a screenshot of each is saved to .ndop/verify/, which init adds to .gitignore. Components with required inputs are skipped, since verify can't invent their data; verify the page that uses them.

Only .ndop/verify/ is written to; your files and angular.json are never changed.

Options

--skip render is the quick loop while iterating; the full run takes a few seconds per component.

JSON output

With --json, verify prints one object an agent can act on:

{
  "ok": false,
  "steps": [
    { "name": "usage", "ok": false, "durationMs": 5 },
    { "name": "build", "ok": true, "durationMs": 2292 },
    { "name": "lint", "ok": true, "durationMs": 21 },
    { "name": "render", "ok": true, "durationMs": 2000 }
  ],
  "problems": [
    {
      "file": "src/app/settings/settings.ts",
      "line": 12,
      "column": 9,
      "rule": "usage/wrong-nesting",
      "severity": "error",
      "message": "DialogTitle must be inside [ndDialog]."
    }
  ],
  "screenshots": [".ndop/verify/Settings.light.png", ".ndop/verify/Settings.dark.png"]
}

Rules are namespaced by step: usage/…, build/TS2322 or build/NG8002, ndop/… for the lint rules, and axe/… for accessibility.

Lint rules

@ndop/eslint-plugin holds the rules verify runs. You can also add them to your own ESLint config, alongside angular-eslint's:

import angular from 'angular-eslint';
import ndop from '@ndop/eslint-plugin';
import tseslint from 'typescript-eslint';

export default tseslint.config(
  {
    files: ['**/*.ts'],
    extends: [...tseslint.configs.recommended, ...angular.configs.tsRecommended],
    processor: angular.processInlineTemplates,
  },
  {
    files: ['**/*.html'],
    extends: [...angular.configs.templateRecommended],
  },
  ...ndop.configs.recommended,
);