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