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

This question has been asked multiple times here and after going through enough solutions, I am positing because the common solution of making sure I have CommonModule in my child module and BrowserModule in my app.module.ts is not working.

HTML Child-Module

<div class="container bg-success">
  hi  <---- this works just fine
</div>
<ul>
  <li *ngFor="let product of products">
    <h2>{{ product.name }} ${{ product.id}}</h2>
  </li>
</ul>

component in child-module

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.css'],
})
export class ChildComponent implements OnInit {
  constructor() {}

  products = [
    {
      id: 1,
      name: 'Licensed Frozen Hat',
    },
  ];

  ngOnInit(): void {}
}

Child Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ChildComponent} from './components/child-component.component';

@NgModule({
  declarations: [ChildComponent],
  imports: [CommonModule],
})
export class ChildModule {}

App Module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ConfigurationModule } from './modules/configuration/configuration.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    NgbModule,
    BrowserModule,
    AppRoutingModule,
    ConfigurationModule,
    HttpClientModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}