Warning in console Angular 9: Can't bind to 'ngForOf' since it isn't a known property of 'li'

Question

I'm using a *ngFor of array and it don't show data. I have imported BrowserModule in my app.module.ts and CommonModule in my child module.

Chrome console show this warning: Can't bind to 'ngForOf' since it isn't a known property of 'li'.

My code:

.ts

import { Component, OnInit } from '@angular/core';
import { ProductService } from '../../coco-api/services/product.service';
import { Product } from 'src/app/model/product.model';
import { async } from 'rxjs/internal/scheduler/async';

@Component({
  selector: 'app-coco-workbench-product-list',
  templateUrl: './coco-workbench-product-list.component.html',
  styleUrls: ['./coco-workbench-product-list.component.css']
})
export class CocoWorkbenchProductListComponent implements OnInit {

  public products: Array<any>;

  constructor(
    private productService: ProductService
  ) { }

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

  getProducts() {
    this.productService.getAll().toPromise().then(data => {
      this.products = data.data;
    })
      .catch();
  }

}

template:

<li *ngFor="let p of products">
    {{p}}
</li>

child.module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CocoWorkbenchProductListComponent } from './coco-workbench-product-list/coco-workbench-product-list.component';



@NgModule({
  declarations: [CocoWorkbenchProductListComponent],
  imports: [
    CommonModule
  ]
})
export class CocoWorkbenchProductModule { }

app.module.ts

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

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { ViewsModule } from './views/views.module';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ViewsModule,
    HttpClientModule ,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The products property may not appear to have information, but doing the following in the template displays [Object object], [Object object]

{{products}}

Answer 1

How are you referencing the child module and the child component from your app module/component?

You probably need to export the CocoWorkbenchProductListComponent from CocoWorkbenchProductModule and import CocoWorkbenchProductModule in your AppModule.