Recently, I made the leap from angular 7 to angular 11 in my app. Everything was running smoothly until I decided to incorporate angular universal for server-side rendering.
Shortly after implementing server-side rendering, a flurry of errors cropped up, all stating "Can't change readonly 'xyz' member of object [Object Object]". These members belong to an object passed from the parent component to the child component using @Input()
Now, I have some burning questions:
- Is it considered bad practice to manipulate objects that are passed as Input?
- Why does this issue arise specifically with Angular universal (server-side rendering) and not with client-side rendering?
Here's an example of one such component:
export class BannerComponent {
@Input() banners : Offer[]
constructor(private analyticService : AnalyticService) { }
ngOnChanges() {
if(this.banners) {
this.banners.forEach(banner => {
if(!banner.bannerImage.startsWith("http"))
banner.bannerImage = environment.imageHost + banner.bannerImage;
})
}
}
recordEvent(banner : Offer) {
this.analyticService.eventEmitter(banner.category.name, "Click on banner", banner.offerDetail + "-" + banner.merchant.name, AnalyticService.AVG_AFFILIATE_CLICK_VALUE);
}
}
And here is my offer class:
import { Store } from "./store";
import { Category } from "./category";
export class Offer {
id: number;
merchant: Store;
offerDetail: string;
link: string;
openExternal: boolean;
logoPath: string;
lastDate: Date;
banner: boolean;
bannerImage: string;
category : Category;
offerDescription?: string;
}
Additionally, there are two other models - Store and Category.