Not able to use cx-media component with a media container

Question

Below codes on Spartacus version 2.0 work fine. the template file:

<ng-container *ngIf="data$ | async as data">
  <cx-media [container]="data.media" [title]="data | json"></cx-media>
</ng-container>

the ts file:

@Component({
  selector: 'app-custom-banner',
  templateUrl: './custom-banner.component.html',
})
export class CustomBannerComponent {

  data$: Observable<CmsBannerComponent> = this.componentData.data$;

  constructor(protected componentData: CmsComponentData<CmsBannerComponent>) {}

}

But it's not compiling on spartacus version 4 and giving below errors.

Type 'CmsBannerComponentMedia | CmsResponsiveBannerComponentMedia | undefined' is not assignable to type 'MediaContainer'.
  Type 'undefined' is not assignable to type 'MediaContainer'.ngtsc(2322)

Error: src/app/spartacus/features/custom-cms-components/custom-banner/custom-banner.component.html:3:14 - error TS2322: Type 'CmsBannerComponentMedia | CmsResponsiveBannerComponentMedia | undefined' is not assignable to type 'MediaContainer'.
  Type 'undefined' is not assignable to type 'MediaContainer'.

3   <cx-media [container]="data.media" [title]="data | json"></cx-media>
               ~~~~~~~~~

  src/app/spartacus/features/custom-cms-components/custom-banner/custom-banner.component.ts:8:16
    8   templateUrl: './custom-banner.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component CustomBannerComponent.

Answer 1

I reproduced the issue and created a bug ticket. You can observe it, and update your project when it will be done and released.

For now, I can suggest only ugly workarounds like:

• locally use $any(...): [container]="$any(data.media)"
• or globally change the flag:

  "angularCompilerOptions": {
    "strictTemplates": false
  }