angular structural directives (*ngFor, *ngIf) not working after i upgrade from 8 to 10

Question

I am using an angularmaterial project and i did an angular upgrade from v8 to v10 and when i try to add *ngFor, its not working. i think structural directives are not working. I am getting below error message.

core.js:7824 Can't bind to 'ngForOf' since it isn't a known property of 'li'.

my view

<ul>
        <li *ngFor="let item of items">{{item}}</li>
</ul>

my component

    import { Component, OnInit } from '@angular/core';
    import { FormGroup, FormBuilder, Validators } from '@angular/forms';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {
      items=[1,2,3,4,5];
      newHome: HomeModel = new HomeModel();
      newHomeForm: FormGroup;
    
      constructor(private formBuilder: FormBuilder) { }
}

my package.json

{
  "name": "test-web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.0.2",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "~10.0.2",
    "@angular/compiler": "~10.0.2",
    "@angular/core": "~10.0.2",
    "@angular/flex-layout": "^10.0.0-beta.32",
    "@angular/forms": "~10.0.2",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "~10.0.2",
    "@angular/platform-browser-dynamic": "~10.0.2",
    "@angular/router": "~10.0.2",
    "hammerjs": "^2.0.8",
    "rxjs": "~6.6.0",
    "tslib": "^1.9.0",
    "zone.js": "~0.10.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1000.0",
    "@angular/cli": "~10.0.0",
    "@angular/compiler-cli": "~10.0.2",
    "@angular/language-service": "~10.0.2",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "^3.9.6"
  }
}

Module code

import { NgModule } from '@angular/core';
import { HomeComponent } from './home/home.component';
import { ReactiveFormsModule } from '@angular/forms';
import { RegistrationComponent } from 'src/app/specification/registration/registration.component';
import { LoginComponent } from 'src/app/specification/login/login.component';
import { CustomerDashboardComponent } from 'src/app/specification/customer-dashboard/customer-dashboard.component';
   

@NgModule({
    declarations: [
        HomeComponent,
        RegistrationComponent,
        LoginComponent,
        CustomerDashboardComponent,
        ],
    imports: [
        ReactiveFormsModule,
        // FlexLayoutModule
    ]
})

export class HomeModule { }

I have start wuth angularmaterial v8 and upgraded to v10. after that when i try to add *ngIf,*ngFor, i am not getting the expected result. I gave *ngIf="true" that also not working. Please help me on this.

Answer 1

Add BrowserModule to imports: [] in @NgModule()

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

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

Try this also

You have to import 'CommonModule' in the module where you are using these in-built directives like ngFor,ngIf etc.