I have a simple scenario, where I am trying to show error from server to field level. But error are not shown on template. Following is the code and package.json contents

@Component({
    selector: 'app-root',
    standalone: true,
    template: `
        <form [formGroup]="formGroup">
            <ng-container *ngIf="formGroup.controls['username'].errors !== null ">
                {{formGroup.controls['username'].errors['err']}}
            </ng-container>
        </form>
    `,
    imports: [
        CommonModule,
        ReactiveFormsModule,
        NgIf
    ],
})
export class AppComponent {
    formGroup: FormGroup;

    constructor() {
        this.formGroup = new FormGroup({
            username: new FormControl(),
        }) ;

        // load data from server
        const errorFromServer = 'Username already exists';
        this.formGroup.controls['username'].setErrors({'err': errorFromServer});
        if (this.formGroup.controls['username'].errors) {
            // Following line displays error on the browser console but no error is shown on template
            console.log(this.formGroup.controls['username'].errors);
        }
        // Updated formgroup value
        this.formGroup.updateValueAndValidity();
        // still no error is shown on template
    }
}