Angular throws error: can't bind to “ngIf” since it isn't a known property of “ng-container”

Question

I am making a project migration from Angular 7 to 11, and one particular module renders with this error:

Can't bind to "ngIf" since it isn't a known property of "ng-container"

I have CommonModule imported for the module, and previously module worked with Angular 7.

To load the component I use routing, and it seems to be working fine as ngOnInit executes API call based on router :id .

Any thoughts?

UPD I didn't specify that my component which causes errors was loaded as I direct route like {path: 'some-path', component: SomeComponent} in the parent module. I changed it to lazy loading approach and it works now. Not sure what caused errors and why it worked in the 7th version.

Answer 1

You should use *ngIf="condition" instead of ng-If="condition"

With CommonModule imported a working solution should look like:

<ng-container *ngIf="condtition">TEST</ng-container>

https://angular.io/api/common/NgIf

Please make sure BrowserModule and BrowserAnimationsModule is imported only once (normally in appModule ). All other modules should import CommonModule .

Answer 2

Make sure that you imported common module

import { CommonModule } from '@angular/common';

@NgModule({
    imports: [
        CommonModule
    ]
})

and in angular you need to use *ngIf rather than ng-if (it is for angularjs)

Answer 3

I believe you have written it wrong.. It should be * ngIf instead of ng-if