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

Question

ngFor isn't working in my app.

I split my app into separate modules and included import { CommonModule } from '@angular/common'; into my child module and import { BrowserModule } from '@angular/platform-browser'; into my app.modules.ts file, but I still get the following error.

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

I have tried looking at other questions but all those just said to include CommonModule, which I am.

These are my files:

crud-list.component.html

<table class="table table-bordered table-striped">
  <thead>
    <tr>
      <th>Id</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let item of cruds'>
      <td>{{item.OrderNumber}}</td>
    </tr>
  </tbody>
</table>

crud-list.component.ts

import { Component, OnInit } from '@angular/core';
import { CrudRequestService } from '@modules/crud/crud-services/crud-request.service';

@Component({
  selector: 'app-crud-list',
  templateUrl: './crud-list.component.html',
  styleUrls: ['./crud-list.component.scss']
})
export class CrudListComponent {
  public cruds: Array<any>;

  constructor(private objService: CrudRequestService) {
    this.objService.get().subscribe(
      (oDataResult: any) => { this.cruds = oDataResult.value; },
      error => console.error(error)
    );
  }
}

crud.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { CrudListComponent } from '@modules/crud/crud-list/crud-list.component';
import { CrudFormComponent } from '@modules/crud/crud-form/crud-form.component';
import { CrudComponent } from '@modules/crud/crud.component';

const routes: Routes = [
  {
    path: '', component: CrudComponent, children: [
      { path: '', component: CrudListComponent },
      { path: 'create', component: CrudFormComponent },
      { path: 'edit/:id', component: CrudFormComponent }
    ]
  },
];

@NgModule({
  imports: [CommonModule, RouterModule.forChild(routes)],
  declarations: [CrudComponent]
})

export class CrudModule { }

app.module.ts

/* all the imports */

@NgModule({
  declarations: [
    AppComponent,
    ForbidenAccessComponent,
    PageNotFoundComponent,
    AppHeaderComponent,
    AppFooterComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    NgbModule,
    AppRoutingModule,
    CoreModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtInterceptor,
      multi: true,
    },
    BreadcrumbsService,
    AccordionService,
    ModalService,
    RequestService,
    IdentityProviderService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts

/* imports */

const routes: Routes = [
  { path: 'home', canActivate: [AuthGuard], component: HomeComponent },
  { path: 'crud', canActivate: [AuthGuard], loadChildren: () => import('@modules/crud/crud.module').then(m => m.CrudModule)},
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  // The error status pages
  { path: '403', component: ForbidenAccessComponent },
  { path: '404', component: PageNotFoundComponent },
  { path: '**', redirectTo: '/404' }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes)
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Solution 1

When I recreate your problem in a stackblitz I don't have an issue.

https://stackblitz.com/edit/angular-60533597

Make sure that you add your components to the module declarations as well as to the Routes.

Solution 2

Found the problem. While the app was running with no other issues than the one stated, when I went to replicate the problem on StackBlitz, the code there gave me an error, telling me that I needed to add the CrudListComponent on my @NgModule declaration, so all I had to do was to add the component there, rebuild the app and it worked.

crud.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Routes, RouterModule } from '@angular/router';

import { CrudListComponent } from '@modules/crud/crud-list/crud-list.component';
import { CrudFormComponent } from '@modules/crud/crud-form/crud-form.component';
import { CrudComponent } from '@modules/crud/crud.component';

const routes: Routes = [
  {
    path: '', component: CrudComponent, children: [
      { path: '', component: CrudListComponent },
      { path: 'create', component: CrudFormComponent },
      { path: 'edit/:id', component: CrudFormComponent }
    ]
  },
];

@NgModule({
  declarations: [CrudComponent, CrudListComponent, CrudFormComponent],
  imports: [CommonModule, RouterModule.forChild(routes)]
})

export class CrudModule { }

Solution 3

crud.module.ts

//crud module should export crud component
@NgModule({
  imports: [CommonModule, RouterModule.forChild(routes)],
  declarations: [CrudComponent],
  exports: [CrudComponent]
})

export class CrudModule { }

you may also be missing adding CommonModule in your AppModule's imports array.

hopefully, this solves your problem!

Solution 4

I had the same problem with Ionic 5 & Angular 9 and searched for a solution for hours. Basically I identified 3 major reasons.

1. Clean & rebuild (or re-install) your project. Ionic 5 example: cordova clean; ionic cordova build android (or rm -rf node_modules; npm install) in project's dir.

2. Typically this is an issue with CommonModule not being included in your component's module (or BrowserModule not being included in your app's module). Ionic 5 example:

list.module.ts

import { CommonModule } from '@angular/common';
import { ListPage } from './list';
...

@NgModule({
  imports: [
    CommonModule,
    ...
  ],
  declarations: [ListPage]
})
export class ListModule {}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
...

@NgModule({
  exports: [
    FormsModule,
    ReactiveFormsModule
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    ...
  ],
  declarations: [AppComponent],
  providers: [
    StatusBar,
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

3. Depending what version of Angular you are running, if it has Ivy running, (likely not if you're using Ionic 5 currently) then you will need to have the ModalComponent in the entryComponents of the parent module as well as in the declarations. In the following example the CalendarModule shows the ListComponent as modal. Ionic 5 example:

calendar.module.ts

import { CommonModule } from '@angular/common';
...
import { CalendarPage } from './calendar';
import { ListPage } from "../../modals/list/list";

@NgModule({
  imports: [
    CommonModule,
    ...
  ],
  declarations: [CalendarPage, ListPage],
  entryComponents: [ListPage],
  providers: []
})
export class CalendarModule {}

P.S.: To de- & activate Ivy set Angular compiler options in TypeScript config in

tsconfig.json

"angularCompilerOptions": {
    ...
    "enableIvy": false
 },
 

Solution 5

This issue is present in the angular 9. I was using angular(9.0.1) version so upgraded to ~10.0.9 and now it's working.

View more solutions