angular2 template - *ngFor is not working in angular 2

Question

app.module.ts

import { NgModule }       from '@angular/core';
import { BrowserModule }  from '@angular/platform-browser';
import { FormsModule }    from '@angular/forms';
import { AppComponent }         from './app.component';
import { routing }  from './app.routing';
import { HttpModule, JsonpModule } from '@angular/http';
import { LoginComponent }       from './auth/login.component';
import { SignupComponent }       from './register/signup.component';

import { HomeComponent }    from './home/home.component';
import { SpinnerComponent} from './uiComponents/page-spinner/Spinner-Component';
import { SpinnerService} from './uiComponents/page-spinner/spinner-service';
import { authProviders }  from './auth/auth.providers';
import { LocalStorageService} from './state/local-storage.service';
import {CommonModule} from '@angular/common'

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,JsonpModule,CommonModule,
    routing
   // CrisisModule
  ],
  declarations: [
      AppComponent,
      LoginComponent,
      HomeComponent,
      SpinnerComponent,
      SignupComponent

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


}

loads.module.ts

import {NgModule} from '@angular/core';

    import {LoadsRoutingModule} from './loads.routing';
    import {LoadsService} from './services/loads.service';

    import {
        LoadtypelistComponent,
        LoadsComponent,
        AnimalsComponent,
        BoatComponent,
        BulkComponent,
        CarComponent,
        ContainerComponent,
        EquipmentComponent,
        FurnitureComponent,
        MovingHouseComponent,
        OthersComponent,
        PalletizedComponent,
        ParcelsComponent,
        LoadsShared1Component,
        LoadsShared2Component
    } from './components/index';

    @NgModule({
        imports: [
            LoadsRoutingModule
        ],
        declarations: [
            LoadtypelistComponent,
            LoadsComponent,
            AnimalsComponent,
            BoatComponent,
            BulkComponent,
            CarComponent,
            ContainerComponent,
            EquipmentComponent,
            FurnitureComponent,
            MovingHouseComponent,
            OthersComponent,
            PalletizedComponent,
            ParcelsComponent,
            LoadsShared1Component,
            LoadsShared2Component
        ],
        providers: [LoadsService]
    })
    export class LoadsModule {

     }

Component

import {Component, AfterViewInit,OnInit} from '@angular/core';
import {LoadsService} from '../services/loads.service';
import {VehicleClass} from '../models/file1'

@Component({
    selector: 'loads-parcels',
    templateUrl: 'Loads/_LoadParcels'
})
export class ParcelsComponent implements OnInit {
  classes;
  errorMessage:any;

  cc=['one','two','three']
  constructor(private loadsService: LoadsService) {}
    ngOnInit(){
     // this.loadsService.getVehicleclasses().then(classes => {this.classes = classes;},error =>  this.errorMessage = <any>error);        
    }


}

Component's template

 <div *ngFor="let c of cc">{{c}}
 </div>

I get the following error: ngFor error

EXCEPTION: Uncaught (in promise): Error: Template parse errors: Can't bind to 'ngForOf' since it isn't a known property of 'div'

Any help, please?

Answer 1

You probably created another module and declared component you are using there, but you forgot to import CommonModule which provides common directives such as *ngIf and *ngFor. You don't need to do this in your AppModule because you import BrowserModule there which exports CommonModule, so these directives are available in AppModule.