I am currently working on an Angular project using version 8.0.0.
To integrate a shopping cart feature into my Angular project, I decided to incorporate the NgShoppingCart library by following the instructions provided here.
After adding the library in my app.module, as per the guidelines, I proceeded to add the following code snippet in one of my components:
constructor(private cartService: CartService<TourCartItem>) {
}
ngOnInit() {
}
add() {
const item = new TourCartItem({id: 1, name: 'My item'});
item.setId(9);
item.setName('Test item');
item.setPrice(10);
item.setQuantity(10);
this.cartService.addItem(item);
}
Upon adding an item, everything functions correctly, and I can see the item stored in localStorage.
However, upon reloading the page, all items are reset, which leads me to suspect that there might be an issue with the implementation.
Below is a snippet from my app.module:
@NgModule({
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
SharedModule.forRoot(),
ShoppingCartModule.forRoot({
itemType: TourCartItem,
serviceType: 'localStorage',
serviceOptions: {storageKey: 'ToursCart', clearOnError: true},
}),
CoreModule,
ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
],
providers: [],
bootstrap: [CoreComponent]
})
export class AppModule {
constructor() {
if (!environment.production) {
console.log('app');
}
}
}
The code for my custom class TourCartItem is shown below:
export class TourCartItem extends CartItem {
// Class definition here
}
If anyone has experience with installing and troubleshooting this particular library, your assistance would be greatly appreciated. Thank you in advance.