Can't bind to 'ngForOf' since it isn't a known property of 'div'

Question

When adding an ngFor to a div I get the following warning and it appears to be stopping my HTML from rendering.

I only have the one module on my app and the BrowserModule is imported in the imports which seemed to fix the problem for most people but it's not working for me.

HTML:

<div *ngFor="let animal of animals" class="animal-row">
    <img />
    <div class="animal-info">
        <p class="animal-name"><i class="fad fa-monkey"></i> Alfie (Alifie-Moon)</p>
        <div class="row">
            <div id="species" class="col">
                <p id="species-text"><i class="fad fa-paw-claws"></i> <span>Skunk</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-paw"></i> <span>American</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-home-heart"></i> <span>01.01.01</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-watch-fitness"></i> <span>3 Years</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-hotel"></i> <span>1-A</span></p>
            </div>
            <div class="col">
                <p><i class="fad fa-smile"></i> <span>Good</span></p>
            </div>
        </div>
    </div>
</div>

app.module.ts:

// Angular & 3rd Part Imports
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastNotificationsModule } from 'ngx-toast-notifications';
import { RouterModule } from '@angular/router';
import { JwtModule } from '@auth0/angular-jwt';
// Providers
import { ErrorInterceptorProvider } from './_services/error.interceptor';
// Services
import { AuthService } from './_services/auth.service';
import { ModuleService } from './_services/module.service';
// Components
import { appRoutes } from './routes';
import { AppComponent } from './app.component';
import { NavComponent } from './nav/nav.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { SubnavComponent } from './subnav/subnav.component';
import { CommonModule } from '@angular/common';

export function tokenGetter() {
   return localStorage.getItem('token');
}


@NgModule({
   declarations: [
      AppComponent,
      NavComponent,
      LoginComponent,
      DashboardComponent,
      SubnavComponent
   ],
   imports: [
      BrowserModule,
      CommonModule
      BrowserAnimationsModule,
      HttpClientModule,
      FormsModule,
      ToastNotificationsModule,
      RouterModule.forRoot(appRoutes),
      JwtModule.forRoot({
         config: {
            // tslint:disable-next-line: object-literal-shorthand
            tokenGetter: tokenGetter,
            whitelistedDomains: ['localhost:5000'],
            blacklistedRoutes: ['localhost:5000/api/auth']
         }
      })
   ],
   providers: [
      AuthService,
      ErrorInterceptorProvider,
      ModuleService
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

I don't know if this is relevant but I did have a file called module.ts (that was an interface) that I renamed to navLinks, just in case it created a conflict - is it possible Angular thought that was another module?

Answer 1

Turns out the problem was that I hadn't declared my component I was working on in app.module.ts - as soon as that was declared this resolved the issue

Answer 2

There can be any one of the reasons:

1. Your module does not have CommonModule in imports[]
2. Your component, where you are using *ngFor, is not a part of any module i.e. appModule imported CommonModule because *ngFor and *ngIf etc are initialized in CommonModule.
3. You might have syntax error in *ngFor i.e. **ngFor or *ngfor etc. typo.
4. If everything seems fine then restart your IDE i.e. VS Code, IntelliJ etc.

Answer 3

Add BrowserModule and CommonModule in @NgModule

@NgModule({
   import: [BrowserModule,CommonModule]
})

Take a look at this link

Answer 4

Whenever we break our application to have a multilevel parent and child structure of modules, we may face this issue. In my application there is the main app module known as app.module.ts and also other child modules that we’re unable to access this directive globally.

To resolve this issue we need to import BrowserModule in the application’s main module i.e app.module.ts file and also import CommonModule in the child module.

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