I encountered the error Can't bind to 'ngForOf' since it isn't a known property of 'li'.
Despite trying the suggested solutions, such as importing BrowserModule in the main module (app.module.ts) and importing CommonModule in the child module, I couldn't resolve it.
I'm working on implementing lazy loading and I suspect that the issue might be related to my component structure.
https://i.sstatic.net/jQV2x.png
When using *ngFor in price.component.html, I receive the following error:
<ul>
<li *ngFor="let book of booksList">{{ book.author }}</li>
</ul>
Can't bind to 'ngForOf' since it isn't a known property of 'li'.
app.module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
CoreModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app-routing.module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: () => import('./landing/landing.module').then(m => m.LandingModule) },
{ path: 'books', loadChildren: () => import('./books/books.module').then(m => m.BooksModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
books.module
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BooksRoutingModule } from './books-routing.module';
@NgModule({
declarations: [],
imports: [
CommonModule,
BooksRoutingModule
]
})
export class BooksModule { }
books-routing.module
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthorsComponent } from './authors/authors.component';
import { PriceComponent } from './price/price.component';
import { CommonModule } from '@angular/common';
const routes: Routes = [
{ path: '', component: PriceComponent },
{ path: '/authors', component: AuthorsComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes), CommonModule],
exports: [RouterModule],
declarations: [AuthorsComponent, PriceComponent]
})
export class BooksRoutingModule { }
EDIT
price.component
import { Component, OnInit } from '@angular/core';
import { BookInfoService } from '../../book-info.service';
@Component({
selector: 'app-price',
templateUrl: './price.component.html',
styleUrls: ['./price.component.scss']
})
export class PriceComponent implements OnInit {
booksList={};
constructor( private httpBooks: BookInfoService ) { }
ngOnInit(): void {
this.httpBooks.getBookDetails().subscribe( (result) => {
this.booksList = result;
console.log('book list ---> ' + this.booksList);
})
}
}
Console output from the price page: