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.

Add Your HTML template code where you have use ngIf on div element — mayur, Feb 06 '17 at 09:17
Does this answer your question? [Can't bind to 'ngIf' since it isn't a known property of 'div'](https://stackoverflow.com/questions/39058075/cant-bind-to-ngif-since-it-isnt-a-known-property-of-div) — dota2pro, Apr 23 '21 at 08:57

score 93 · Answer 1 · answered Sep 07 '20 at 02:21

93

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.

answered Sep 07 '20 at 02:21

jmanz

1,031
1
8
6

4

This worked for me! Thanks so much for mentioning this!!! Can't believe this isn't a more accepted answer. By the way, if you're wondering where, it should be in imports: imports: [..., ModalPageModule], – Jonathan Sep 11 '20 at 01:33
6

The error message is so bad, how are we supposed to find this lol. Thanks! – Maxime Dupré Oct 09 '20 at 20:51
1

I think this is the best answer. Thanks, man! – Pullat Junaid Jan 18 '21 at 12:50
After going through all the posts. Finally read this comment and I felt dumb not to check app.modules.ts. Thanks for the answer – farhankhwaja Mar 10 '21 at 23:27
great, it was my issue as well and this solved it – Yasser Jarouf Mar 16 '21 at 12:42
99% of my problems are forgetting this and forgetting that.. is this an angular probem or what !! – nab Mar 31 '21 at 02:54
Thank you for this answer, while my component was in its module, the module it belonged to wasn't in the app module and had me spinning my wheels for quite a while. – dmoore1181 Jun 10 '21 at 17:30
Same issue here (forgetting to add component into app.module declarations). What a strange red herring error message! – Jim Jun 12 '21 at 17:09
This stumped me for quite some time. I completely forgot to add it to the declarations. – Joshua Poling Sep 13 '21 at 22:44
If it still don't work and your hot reloading then abort and compile again. – Jane Sep 29 '21 at 21:05
In my case I had to import the module in which the component was declared – hyena May 30 '23 at 14:59

score 39 · Accepted Answer · answered Feb 06 '17 at 11:17

39

After adding browser module its working fine.

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

answered Feb 06 '17 at 11:17

raj m

1,863
6
21
37

14

It really looks like Angular's error handling could 'know' (or guess) that ngIf is one of it's own directives, and 'know' that it is in BrowserModule. The error message in the browser console could suggest 'Have you imported BrowserModule'? Probably the biggest shortcoming in Angular IMHO is the error messages can be less than helpful when things go wrong. – Wallace Howery Jan 01 '18 at 18:28
1

Leave it to Angular where you need to close your eyes, touch your nose, and hop on your left foot to make a default feature work properly. – nesterenes Dec 20 '21 at 21:05

score 35 · Answer 3 · answered Sep 30 '20 at 17:45

35

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 {}

answered Sep 30 '20 at 17:45

psyklopz

2,283
4
24
29

4

You saved my day. Common mistake, and I spend 1 hour for googling a proper solution. – ohdev Dec 01 '20 at 14:34
1

Thank you sir, this has to have more upvotes i guess – Grijan Apr 08 '21 at 12:12
I wasted 1 hour on this, thanks for saving me a few more ... – gneric Apr 25 '21 at 14:47
I was pulling my hair out until I found this. Nothing else worked. Thanks a lot. – Manish Pradhan Dec 01 '22 at 21:03
I had this error in one my unit tests; seems I needed to include a child component in the TestBed config. This answer got me to the solution. – paddotk Feb 27 '23 at 15:47

Shadoweb · Answer 4 · 2021-03-12T11:24:52.387

18

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.

PS: This is not the OP's issue as he's on production, this is only for development environment.

edited Mar 12 '21 at 11:24

answered Oct 25 '20 at 09:23

Shadoweb

5,812
1
42
55

I run into this issue and it did be solved after restart `ng serve`! – Huan Nov 09 '20 at 13:04
Same for me. I moved a form control into another component and started getting the `ngIf` error. Rebooting the dev server fixed. Thanks. – plusheen Jun 17 '21 at 11:17
Works combined with dist + node_modules folders deletion – cactuschibre Aug 13 '21 at 12:49

score 10 · Answer 5 · edited Oct 01 '20 at 07:59

10

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]
  })

edited Oct 01 '20 at 07:59

psyklopz

2,283
4
24
29

answered Apr 19 '20 at 07:42

Vijayanath Viswanathan

8,027
3
25
43

score 2 · Answer 6 · answered Jul 15 '21 at 09:27

In my case, I already had a component with the same name in app.module.ts, which led to my new component not being parsed correctly and resulting in "can't bind to 'ngIf'", basically same issue as above with missing declaration in app.module.ts

solution:

existing component:

import { DialogComponent } from './common/button-popup/dialog/dialog.component';

I had to add an alias for the new component

import { DialogComponent } from './common/button-popup/dialog/dialog.component';
import { DialogComponent as DialogGenericComponent } from './common/dialog/dialog.component';

score 2 · Answer 7 · answered Jun 09 '22 at 06:56

2

if your project working fine but underline with the error. update Angular language service extension. to update press Ctrl + Shift + x and search Angular language service then update the extension and reload through the extension

answered Jun 09 '22 at 06:56

Chamin Thilakarathne

347
1
6
19

score 1 · Answer 8 · answered Jun 25 '23 at 06:42

If your component is standalone for ex -

@Component({
selector: 'app-delete-alert',
templateUrl: './delete-alert.component.html',
styleUrls: ['./delete-alert.component.scss'],
standalone: true,
})

Then import CommonModule in the same file.

@Component({
selector: 'app-delete-alert',
templateUrl: './delete-alert.component.html',
styleUrls: ['./delete-alert.component.scss'],
standalone: true,
imports:[CommonModule]
})

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

8 Answers8

Linked