无法绑定到“ngIf”，因为它不是生产构建中“div”的已知属性

Question

我可以在本地运行。仅在生产版本中出错。

我用过

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

完整的错误如下所示。

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

是什么原因。我已经验证了许多解决方案。找不到灵魂。相同的代码在本地工作正常。

Answer 1

我遇到了完全相同的错误，我同时包含了 CommonModule 和 BrowserModule，但我仍然在浏览器上看到相同的错误消息。

最后，我发现我的问题的原因是我忘记将我的组件添加到 app.module.ts，以防其他人正在处理相同的行为。

Answer 2

如果您的组件未包含在模块的declarations 部分中，也会发生此错误：

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

Answer 3

如果上述方法均无效，则其他解决方案只是重新启动您的ng serve，这对我有用。或者在拔毛之前先试试这个方法。

PS：这不是 OP 的问题，因为他在生产中，这仅适用于开发环境。

Answer 4

添加浏览器模块后，它工作正常。

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

Answer 5

您应该在根组件或相关组件中添加 CommonModule，

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

另外，将CommonModule 添加到@NgModule 的imports 属性，并将您的组件添加到declarations 属性。

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

Answer 6

就我而言，我已经在 app.module.ts 中有一个同名的组件，这导致我的新组件没有被正确解析并导致“无法绑定到 'ngIf'”，基本上是相同的问题如上所述，app.module.ts 中缺少声明

解决方案：

现有组件：

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

我必须为新组件添加别名

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