Can't bind to 'ngForOf' since it isn't a known property of 'tr'. CommonModule and BrowserModule are imported

Really odd problem. I’m getting an error when I try to use *ngFor on a tr element:

<table>
<tbody>
<tr *ngFor="let item of productsData">
<!-- some Code -->
<tr>
</tbody>
</table>

In my component.ts file I have this:

productsData: ProductDataModel[] = [];

  constructor(private productService: ProductService) { }

  ngOnInit(): void {
    this.SubscribeForData();
  }

  SubscribeForData() {
    this.productService.GetAllProducts().subscribe(result => {
      if (result.success) {
        this.productsData = result.model;
      }
    });
  }

This particular component is in a child module so has the CommonModule imported in the @NgModule from ‘@angular/common’ and the app.module.ts has BrowserModule imported from ‘@angular/platform-browser’.

app.module.ts:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Module which component is declared in:

@NgModule({
  declarations: [
    AllProductsComponent
  ],
  imports: [
    CommonModule,
    UserAccountsRoutingModule,
    FormsModule,
    ReactiveFormsModule,
  ]
})

I have used *ngFor else where without any issues.

The angular version I am running is 14.0.4

>Solution :

Looks like you’re not importing the child module in your AppModule.