将BrowserModule添加到@NgModule()中的imports:[]，如果它是根模块(AppModule)，否则是CommonModule。

// older Angular versions
// import {BrowserModule, CommonModule} from '@angular/common';

import { BrowserModule } from '@angular/platform-browser'
..
..
@NgModule({
  imports: [BrowserModule, /* or CommonModule */],
  ..
})

如果您正在创建自己的模块，则在自己的模块中导入CommonModule

你必须在使用ngFor、ngIf等内置指令的模块中导入CommonModule。

import { CommonModule } from '@angular/common'
       
@NgModule({
    imports: [
        CommonModule
    ]
})
    
export class ProductModule { }

以我为例，问题是我的队友在模板中提到了*ngfor而不是*ngfor。奇怪的是，没有正确的错误来处理这个问题(在Angular 4中)。

需要记住的事情:

当使用自定义模块(除AppModule之外的模块)时，需要导入其中的公共模块。

yourmodule.module.ts

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

@NgModule({
  imports: [
    CommonModule
  ],
  exports:[ ],
  declarations: []
})

自定义模块需要通用模块

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


@NgModule({
  imports: [
    CommonModule
  ]
})

当使用"app-routing. "我们忘记导入CommonModule了。记得导入!

import { CommonModule } from "@angular/common";
@NgModule({  imports: [ CommonModule]})

我有同样的错误，但我有CommonModule导入。相反，我在不应该的地方留下了逗号，因为在分割模块时需要复制/粘贴:

@NgModule({
    declarations: [
        ShopComponent,
        ShoppingEditComponent
    ],
    imports: [
        CommonModule,
        FormsModule,
        RouterModule.forChild([
            { path: 'shop', component: ShopComponent }, <--- offensive comma
        ])
    ]
})

app.module.ts修复并更改为:在app模块中导入BrowserModule

import { BrowserModule } from '@angular/platform-browser';

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

我得到了同样的错误， 你可以通过以下方法之一进行修复:

如果没有嵌套模块 a.在App模块中导入CommonModule b.导入你在App模块中添加*ngFor的组件，在declarations中定义

// file App.modules.ts
@NgModule({
  declarations: [
    LoginComponent // declarations of your component
  ],
  imports: [
    BrowserModule
    DemoMaterialModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  providers: [
    ApiService, 
    CookieService, 
    {
      provide: HTTP_INTERCEPTORS,
      useClass: ApiInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent]
})

c.如果你使用单独的模块文件进行路由，那么在routing模块中导入CommonModule否则在App模块中导入CommonModule

// file app.routing.modules.ts
import { LoginComponent } from './login/login.component';
import { CommonModule } from "@angular/common";

const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent }
];

@NgModule({
  imports: [RouterModule,RouterModule.forRoot(routes), CommonModule],
  exports: [RouterModule]
})

如果您有嵌套模块，则执行该特定模块的第一步

在我的案例中，第二种方法解决了我的问题。 希望这对你有所帮助

我开始在Angular8基础上的live项目得到了上述问题，但当使用“app-routing。我们忘记导入CommonModule了。记得导入!

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

@NgModule({
  imports: [
    CommonModule
]})

它将解决你的错误。

对我来说，问题是我没有在我的app.module.ts中导入定制的模块HouseModule。我有其他的进口。

文件:app.module.ts

import { HouseModule } from './Modules/house/house.module';

@NgModule({
  imports: [
    HouseModule
  ]
})

我有一个问题，因为**代替*

*ngFor="let ingredient of ingredients"

**ngFor="let ingredient of ingredients"

我遇到过类似的错误(*ngIf)，即使我所有的导入都是OK的，并且组件呈现时没有任何其他错误+路由是OK的。

在我的例子中，AppModule没有包含这个特定的模块。奇怪的是，它并没有抱怨这一点，但这可能与Ivy使用ng serve的方式有关(类似于根据路由加载模块，但不考虑它的依赖关系)。

如果您没有在特性模块中声明路由组件，也会发生这种情况。例如:

feature.routing.module.ts:

...
    {
        path: '',
        component: ViewComponent,
    }
...

feature.module.ts:

     imports: [ FeatureRoutingModule ],
     declarations: [],

注意ViewComponent不在declarations数组中，而它应该在。

未来的读者

检查以下每一项:

该组件是在SINGLE angular模块中声明的 确保你有import {CommonModule} from '@angular/common'; 重新启动IDE/编辑器 重新启动开发服务器(ng serve)

所以请确保

指令中没有语法错误 浏览器(在应用程序模块)和公共(在其他/子)模块被导入(与上面提到的Günter Zöchbauer相同) 如果你在应用程序中有路由，那么路由模块应该导入到应用程序模块中 所有路由组件的模块也被导入到App模块中，例如: app-routing.module。Ts为: const routes: routes = [ {path: "，组件:CustomerComponent}， {path: 'admin'，组件:AdminComponent} ];

然后App模块必须导入@NgModule()中的CustomerComponent和AdminComponent模块。

通过在其他(新/自定义)模块中导入CommonModule，许多答案似乎趋于一致。 这一步在所有情况下都是不够的。

完整的解决方案分为两步:

让NgIf, NgFor等指令对你的项目可见。 在主组件中以正确的方式重新组装所有内容

点1 主模块中的BrowserModule似乎足够访问NgFor了。 Angular文档把它写在这里:。

CommonModule用于导出所有基本的Angular指令和管道，比如NgIf、NgForOf、DecimalPipe等等。由BrowserModule重新导出，

参见此处接受的答案:CommonModule vs BrowserModule

点2 唯一需要改变的是(在我的情况下)如下:

导入模块 导入组件 Ng构建(重要!) ng服务

app.module.ts

@NgModule({
    imports: [
        BrowserModule,
        OtherModule
    ],
    declarations: [OtherComponent, AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {
}

other.html

<div *ngFor='let o of others;'> 
</div>

other.component.ts

@Component({
    selector: 'other-component',
    templateUrl: './other.html'
})
export class OtherComponent {
}

app.module.ts

@NgModule({
    imports: [],
    providers: []
})
export class OtherModule{
}

对于Angular 10:

将BrowserModule添加到routes模块的导入中。 确保你在app模块声明中添加了不工作的组件。

如果不执行第2步，将触发此错误!

请务必重新启动ng服务!!

为了防止有人在尝试导入CommonModule后仍然遇到错误，请尝试重新启动服务器。它竟然有效

我收到了错误，因为我正在使用的组件没有在模块的declarations:[]部分中注册。

添加组件后，错误消失了。我本希望看到比这条错误消息更清晰的信息来指出真正的问题。

可能有以下原因:

你的模块在imports[]中没有CommonModule 你使用*ngFor或*ngIf的组件不是任何模块的一部分。 你可能在*ngFor中有拼写错误，比如**ngFor或*ngFor等。 如果一切正常，重新启动你的应用程序，即ng serve或IDE，即VS Code, IntelliJ等。

在所有代码中使用正确的语法后，请查看是否在angular模块的声明中提到了你的组件。 如下所示:

@NgModule ({ 声明:[ AppComponent, YourComponent ),

对我来说，解决问题的方法是对我的项目做一个git克隆并运行(像往常一样):

npm install

我也有同样的问题，即使我已经在“module”中导入了“BrowserModule”和“CommonModule”。它没有工作，我的错误是，没有添加“NgModule.declarations”我的组件。

@NgModule ({
   declarations: [
     Your_Component // here
   ]
}) 

当ngFor语法没有正确编写时，这个错误也会被抛出，在我的例子中，我有:

<ng-template *ngForOf="let key of SomeObject; index as i">

它通过使用以下语法得到了修复:

<ng-template ngFor let-key [ngForOf]="SomeObject" let-i="index">

将该组件添加到app.module中

import { ModalComponent } from './modal/modal.component';

@NgModule({
  declarations: [ModalComponent],
  entryComponents: [ModalComponent],
  
  }),
  providers: [
  ],
  bootstrap: [AppComponent]
})

我有一个问题，因为json数据中的空白。

在我的例子中，问题是，我在*ngFor中使用了const而不是let。

如果你已经采用了(BrowserModule, CommonModule, FormsModule) 它仍然没有工作

然后，您所要做的就是检查模块中是否声明了有错误的组件

作为将来的参考，我正在Angular 12上做一些单元测试，遇到了这个问题。

我的问题是我正在使用ng bootstrap库并测试一个用NgbModal创建新模态的方法。

我得到这些警告，因为我忘记导入弹出窗口所创建的组件。

我不需要导入FormsModule、CommonModule或BrowserModule。

因此，如果您遇到这些错误，请确保您试图创建实例的组件在导入中列出。

有点晚了，但我最近遇到了这种情况。这个答案没有解决我的问题。

我的前提

我在项目中使用了自定义目录结构。有问题的组件位于components目录中。 我发现类似错误的组件是使用CLI原理图和——skip-import选项创建的 NPX ng g c——skip-import ../components/my-component

解决方案

因为我使用了——skip-import(见注释)选项，我发现我的组件没有添加到模块中的declarations数组中。将组件添加到相同的组件中解决了这个问题。

注意:如果没有这个，你就不能在app目录外创建组件。

如果您有模块实现，则必须导入组件并在声明中设置组件

祝你编程好运:)

只是在修改了几个组件后出现了同样的问题。没有语法错误，所有模块都导入了，但是重新启动服务器解决了这个问题。 错误发生在一个组件中，该组件是在几十次成功提交之前添加的。

以防别人遇到同样的问题。

我认为我的情况是一个罕见的情况，但我还是会回答。

我没有任何语法错误，我导入了BrowserModule，我重新声明了我的IDE (VS Code)，但我仍然在我的模板中有红线，因为我使用了*ngFor。

这是因为我正在使用一个扩展，Angular语言服务，但它相当老了。更新后，错误停止出现。

就我而言， 我已经在我的共享模块和组件将要使用的功能模块中包含了CommonModule，但在我的情况下，我在服务器启动(编译)时保存了一些文件，也许这就是为什么它没有正确地获取所包含模块的注册表

我重启了我的本地服务器，它解决了我的问题

我已经在mycomponent.module中导入了CommonModule。和app.module中的BrowserModule。ts，将MyComponent添加到@ngModule的声明中，并重置vscode，就像前面提到的所有解决方案一样。

最终解决了这个问题，我没有通过获取请求迭代接收到的数据，而是使用与ElementModel匹配的硬编码数据模拟elements数组。它工作没有问题。

意识到我的ElementModel接口与我从取回请求接收到的数据不匹配。

希望这能帮助到一些人。

在我的例子中，这个组件没有在app.module.ts中列出。