Angular "error TS" in component template type-check in CI

By Daniel Zoghalchali·Latchkey

With strictTemplates, Angular type-checks bindings inside templates. A property bound to the wrong type, a missing input, or an undefined member raises a standard TypeScript error (TS2322, TS2339) and fails the build.

What this error means

ng build fails with a error TSxxxx whose location points inside an HTML template, such as "Type 'string' is not assignable to type 'number'".

src/app/user.component.html:5:18 - error TS2322: Type 'string' is not assignable
to type 'number'.
5   <app-age [value]="user.name"></app-age>

Common causes

A binding type does not match the input

A template binds a value whose type differs from the @Input() type, which strict template checking rejects.

A property accessed that does not exist

A template reads a member missing from the component class, producing TS2339 under strict templates.

How to fix it

Correct the binding or the type

1. Open the template at the line in the error.
2. Bind a value of the expected type, or widen/correct the input type.
3. Re-run the build.

<app-age [value]="user.age"></app-age>  <!-- number, matches @Input() value: number -->

Add the missing member to the class

If the template reads a property the class lacks, declare it on the component.

export class UserComponent {
  age = 0;
}

How to prevent it

• Keep strictTemplates on so template type errors are caught.
• Type component inputs precisely so wrong bindings fail fast.
• Run the AOT build in CI, not just ng serve.

Frequently asked questions

Related guides

References

• Node.js documentation
• npm CLI documentation
• GitHub Actions documentation