AngularDirectives are causing issues in my application.
After organizing my app into separate modules and adding
import { CommonModule } from '@angular/common';import { BrowserModule } from '@angular/platform-browser';app.modules.ts file, I continue to encounter the following error.
Can't bind to 'ngForOf' since it isn't a recognized property of 'tr'.
I have searched for solutions online, but most suggestions simply mentioned to include CommonModule, which I have already done.
Below are the relevant 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 necessary 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
/* remaining 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' },
// 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 { }