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:      [  CommonModule ] 

Full error is shown below.

client:101 Template parse errors:enter code here`Can't bind to 'ngIf' since it isn't a known property of 'div'.  ("move" class="transport-remove">Remove</a></div>          <div id="carTypeDiv_1" class="veh-inv-out" [ERROR ->]*ngIf="vehicleData.vesselType == 'road'">             <ul id="carTypeList_1" class="veh-slides">     "): VehicleDirective@10:52 Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("t:" (click)="removeField($event)" title="Remove" class="transport-remove">Remove</a></div>          [ERROR ->]<div id="carTypeDiv_1" class="veh-inv-out" *ngIf="vehicleData.vesselType == 'road'">             <ul "): VehicleDirective@10:9 Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("l)]="vehicleData.makeSelect" (change)="appendModel($event.target.value)">                   <option [ERROR ->]*ngFor="let make of vehicle.makes">{{make}}</option>                </select>             </div> "): VehicleDirective@28:26 Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("[(ngModel)]="vehicleData.makeSelect" (change)="appendModel($event.target.value)">                   [ERROR ->]<option *ngFor="let make of vehicle.makes">{{make}}</option>                </select>             </d"): VehicleDirective@28:18 Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("t" id="modelSelect" [(ngModel)]="vehicleData.modelSelect" class="prefixbox">                <option [ERROR ->]*ngFor="let model of vehicle.models">{{model}}</option>             </select></div>             <br c"): VehicleDirective@36:23 Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("delSelect" id="modelSelect" [(ngModel)]="vehicleData.modelSelect" class="prefixbox">                [ERROR ->]<option *ngFor="let model of vehicle.models">{{model}}</option>             </select></div>          "): VehicleDirective@36:15 Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("refixbox">                         <option value="">SELECT</option>                         <option [ERROR ->]*ngFor="let year of vehicle.years">{{year}}</option>                      </select>                  "): VehicleDirective@47:32 Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("class="prefixbox">                         <option value="">SELECT</option>                         [ERROR ->]<option *ngFor="let year of vehicle.years">{{year}}</option>                      </select>          "): VehicleDirective@47:24 Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("ateSelect" [(ngModel)]="vehicleData.stateSelect" class="prefixbox">                         <option [ERROR ->]*ngFor="let state of vehicle.regStates">{{state}}</option>                      </select>            "): VehicleDirective@55:32 Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("" id="stateSelect" [(ngModel)]="vehicleData.stateSelect" class="prefixbox">                         [ERROR ->]<option *ngFor="let state of vehicle.regStates">{{state}}</option>                      </select>    "): VehicleDirective@55:24 Can't bind to 'ngForOf' since it isn't a known property of 'option'. ("lorSelect" [(ngModel)]="vehicleData.colorSelect" class="prefixbox">                         <option [ERROR ->]*ngFor="let color of vehicle.colors">{{color}}</option>                      </select>               "): VehicleDirective@68:32 Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations". ("" id="colorSelect" [(ngModel)]="vehicleData.colorSelect" class="prefixbox">                         [ERROR ->]<option *ngFor="let color of vehicle.colors">{{color}}</option>                      </select>       "): VehicleDirective@68:24 

What is the reason. I have verified many solution. could not find the soultion. Same code is working fine with local.

Answer 1

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 2

After adding browser module its working fine.

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