I have a dynamic component in Angular, it won't import any modules such Common and Forms module

I have a component that use a dynamic component to display a child component:

in parent component, the child is declared as such

@ViewChild('lscRef', { read: ViewContainerRef, static: false }) // Set static: false to ensure availability after view initialization
lscRef!: ViewContainerRef;


the tempalte is as follows:

<p-dialog [(visible)]="preview" header="Track Preview">
<ng-template pTemplate="message" let-message>
<div class="flex flex-column align-items-center w-full gap-3 border-bottom-1 surface-border">
<div>
<ng-template #lscRef></ng-template>
</div>
<p-button (click)="next()" [disabled]="currentIndex === track.length - 1">Next</p-button>
</div>
</ng-template>
</p-dialog>


the load component code is as follows:

loadComponent(): void {
if (!this.lscRef) return; // Ensure lscRef is available before proceeding

const item = this.track[this.currentIndex];
console.log(item)

this.lscRef.clear();

const component = this.componentMap[item.type];
console.log(component)

if (component) {
const componentRef = this.lscRef.createComponent(component); // Use 'component' here
componentRef.changeDetectorRef.detectChanges();
if (componentRef.instance && item.data) {
console.log(componentRef.instance)
const deepCopiedData = structuredClone ? structuredClone(item.data) : JSON.parse(JSON.stringify(item.data));

console.log('Assigning deep-copied data:', deepCopiedData);

componentRef.instance.data = deepCopiedData; }
}
}


The errors I get are :

1. 
   Can't bind to 'ngIf' since it isn't a known property of 'div' [duplicate] even though the CommonModule is imported.
   
   
2. 
   Can't bind to ngModel since it isn't a known property of input error even though the FormsModule is imported.
   

Continue reading...