javascriptangulartypescriptangular8angular-aot

ngClass and ngIf condition fail to compile when aot is set to true

I have a div with a ngClass condition:

<div [ngClass]="{ 'active': nbActive === 1 }" >
    <!-- some stuff -->
</div>

And a similar div with a ngIf condition:

<div *ngIf="nbActive === 1">
    <!-- some stuff -->
</div>

Below is the NbActive declaration:

export class WhyChooseUsComponent implements OnInit {
   nbActive: 0;
   constructor() { }
   // some stuff
}

If in my production configuration, I set:

"aot": true,
"buildOptimizer": true,

Then I get the following error:

This condition will always return 'false' since the types '0' and '1' have no overlap.

I don't get any error if I set aot and buildOptimizer to false and everything is working as expected.
Where does this issue come from and how can I fix this?

Solution

  • You wrote 

       nbActive: 0;

    Which means the only acceptable value for nbActive is 0.

    You might needed this instead: 

       nbActive: number = 0;