Can't bind to 'ngIf' since it isn't a known property of 'div' in production build

Question

I can able to run through locally. Getting error only in production build.

I have used

 import { CommonModule } from \'@angular/common\';
 imports:           


        

Answer 1

You should add CommonModule either in the root component or the related component,

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

Also, add CommonModule to the imports property of @NgModule and your component to the declarations property.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule
  ],
  providers: [],
    bootstrap: [AppComponent]
  })

Answer 2

Other solution if none of the above works is just to restart your ng serve, that worked for me. Or maybe try this method first before pulling your hairs out.

Answer 3

After adding browser module its working fine.

 import { BrowserModule } from '@angular/platform-browser';
 @NgModule({
     imports: [BrowserModule ]
  })

Answer 4

I had exactly the same error, and I had included both CommonModule and BrowserModule and yet I still saw the same error message on my browser.

Finally, I found the cause of my problem was that I forgot to add my component to app.module.ts, in case someone else is dealing with the same behavior.

Answer 5

This error can also occur if your component is NOT included in the declarations section of the module:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';            // <-- required

import { InventoryRoutingModule } from './inventory-routing.module';
import { InventoryComponent } from './pages/inventory/inventory.component';

@NgModule({
  declarations: [InventoryComponent],                      // <-- In my case, this was missing
  imports: [CommonModule, InventoryRoutingModule]
})
export class InventoryModule {}