Same Issue occured : Can't bind to 'ngIf' since it isn't a known property of 'div'

Issue

Hi So I'm using Angular 13 and while running "ng serve" my vscode shows these errors : [Question1][1]

And Moderators before you go on and mark this as duplicate, STOP !! this is not. [NotASuplicate][2]

I've tried the mentioned solutions :

• Add "BrowserModule" in root module and add "CommonModule" in child module.(I have just 1 module and it has BrowserModule mentioned)
• Make sure you are using "ngIf" and not "ngif".(Well I'm not)

Following is how my project looks like : [ProjectStructure][3]

Plz, anyone got any idea how to fix this ? [1]: https://i.stack.imgur.com/z2zqR.jpg [2]: https://i.stack.imgur.com/5mWSH.jpg [3]: https://i.stack.imgur.com/44W9p.png

Solution

after some digging around and trial error finally I was able to solve this. So posting this solution incase anyone else ends up in similar situation.

So search through all reported "Problems" check if you got an error message like this.

Can’t resolve all parameters for SomeComponent: [object Object], (?)

You'll notice that if your "Can't bind to 'ngIf' since it isn't a known property of" error is not resolved by previously mentioned solutions that I tried then those errors must be reported in the html file of above mentioned SomeComponent's html template only, and if that's the case keep on reading.

The SomeComponent's ts file should be using a injected user defined service something like following :

export class SomeComponent
{
    constructor(private _DataService : DataService)
    {

In that case open your DataService.ts and make sure its body looks something like this :

@Injectable({
    providedIn: 'root',
})
export class DataService
{

The above part {providedIn: 'root',} needs to be present and you app.module.ts should look like following :

@NgModule({
    declarations: [
        AppComponent,
        SomeComponent
    ],
    imports: [
        BrowserModule
    ],
    entryComponents: [
        SomeComponent
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

The above part providers: [] should be identical incase you are only using user defined services.

As you might have noticed such kind a problem we will face when you are migrating your old Angular project to new Angular version.

PS: Incase your animate.css animations are not working you would also need to address this.

Answered By - Rahul Pawar