Angular AOT "ng build" Template Errors - Fix NG-codes in CI

A production ng build uses the AOT (ahead-of-time) compiler, which type-checks templates far more strictly than the dev server. Templates that "worked" under ng serve can fail AOT with NG8002 (unknown binding), NG6002 (missing declaration), or template type errors.

What this error means

ng build fails with an NG-coded template error - a binding to a property that does not exist, a component not declared/imported, or a template expression type mismatch. It passes ng serve but fails the production build.

ng build output

✖ Error: src/app/user.component.html:4:18 - error NG8002: Can't bind to
'usr' since it isn't a known property of 'app-avatar'.

4   <app-avatar [usr]="user"></app-avatar>
                   ~~~~~~~~~~~~~

Common causes

AOT is stricter than the dev compiler

AOT fully type-checks templates and validates bindings against component inputs. A typo'd input, an unknown element, or a wrong type that JIT tolerated fails the build.

Component/module not declared or imported

A component used in a template is not declared in the module (or imported into a standalone component), so AOT cannot resolve it (NG6002 and related).

How to fix it

Fix the template against the real API

Correct binding names to match the component's @Input()s and declare/import every component used.

HTML / TS

// match the @Input() name
// component: @Input() user!: User;
// template:
<app-avatar [user]="user"></app-avatar>

Run AOT in CI before deploy

Build with AOT locally (ng build) to reproduce - ng serve alone hides these.
Keep strictTemplates enabled in angularCompilerOptions so the dev server catches them too.
Declare/import every component, directive, and pipe a template uses.

How to prevent it

Enable strictTemplates so dev surfaces AOT-level template errors.
Run a production ng build in CI, not just ng serve.
Keep template bindings aligned with component @Input()/@Output() names.