Type 'TestComponent' has no properties in common with type 'CmsComponent'

Question

I have a set of custom components which is created in CMS. The custom components extend the BannerComponent and have it's own property called "color".

I have created the model:

    import { BannerComponent } from '@spartacus/storefront';


    export class TestComponent extends BannerComponent{
        color?: string;
    }

And I am trying to get the data from the Angular component.

constructor(private componentData: CmsComponentData, private cmsService: CmsService) { }

While doing this I am getting the following error:

Type 'TestComponent' has no properties in common with type 'CmsComponent'.

How to resolve this and get data of custom component in the angular component.

Answer 1

The error you're getting is coming from the typescript compiler. During that check, there's no information available to understand that you're actually expecting a BannerComponent interface. Remember, typescript is doing static code validation.

To make the compiler aware of the expected interface, you need to tell it. By default, the CmsComponentData class uses the CmsComponent interface. You can however pass in a custom interface, by passing the interface to the CmsComponentData:

export interface TestComponent extends CmsBannerComponent{
  color?: string;
}

constructor(
  private componentData: CmsComponentData<TestComponent>, 
  private cmsService: CmsService
) { }

Answer 2

Model Class:

    import { BannerComponent } from '@spartacus/storefront';
    export interface TestComponent extends BannerComponent{
        color?: string;
    }

Component:

    import { Component, OnInit } from '@angular/core';
    import { CmsService } from '@spartacus/core';
    import {  CmsComponentData } from '@spartacus/storefront';
    import { TestComponent } from 'src/app/models/service-tile.model';

    @Component({
      selector: 'app-service-tile',
      templateUrl: './service-tile.component.html',
      styleUrls: ['./service-tile.component.scss']
    })
    export class ServiceTileComponent implements OnInit {

      constructor(private componentData: CmsComponentData<TestComponent>, 
        private cmsService: CmsService) { }
      ngOnInit(): void {
      }

    }

Response from hybris:

    {
     "slotId" : "Section1",
     "slotUuid" : "yyyy",
     "position" : "ServiceTileSection",
     "name" : "Service Tile Section",
     "slotShared" : false,
     "components" : {
        "component" : [ {
            "uid" : "TestComponent",
            "uuid" : "xxxx",
           "typeCode" : "ServiceTileBannerComponent",
           "modifiedtime" : "2020-10-07T21:18:28.4+05:30",
           "name" : "Component",
           "container" : "false",
           "external" : "false",
           "color" : "RED",
           "media" : {
              "code" : "Tile1.jpg",
              "mime" : "image/png",
              "altText" : "Car Trade In",
              "url" : "/medias/?context=3NGMyZjRkZTU4YTMz"
           },
           "headline" : "Test"
        },
        {
            component2
        },
        {
            component3
        }
    ]
    }
    }

This is the exact classes that I am using in my sample.