Angular 13 fails to compile because of TS type errors

[acstll]

Error: node_modules/@telekom/scale-components/dist/types/components.d.ts:7356:15 - error TS2320: Interface 'HTMLScaleCheckboxElement' cannot simultaneously extend types 'ScaleCheckbox' and 'HTMLStencilElement'.
  Named property 'ariaLabel' of types 'ScaleCheckbox' and 'HTMLStencilElement' are not identical.

7356     interface HTMLScaleCheckboxElement extends Components.ScaleCheckbox, HTMLStencilElement {
                   ~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@telekom/scale-components/dist/types/components.d.ts:7362:15 - error TS2320: Interface 'HTMLScaleCheckboxGroupElement' cannot simultaneously extend types 'ScaleCheckboxGroup' and 'HTMLStencilElement'.
  Named property 'ariaLabel' of types 'ScaleCheckboxGroup' and 'HTMLStencilElement' are not identical.

7362     interface HTMLScaleCheckboxGroupElement extends Components.ScaleCheckboxGroup, HTMLStencilElement {
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/@telekom/scale-components/dist/types/components.d.ts:8760:15 - error TS2320: Interface 'HTMLScaleSidebarNavElement' cannot simultaneously extend types 'ScaleSidebarNav' and 'HTMLStencilElement'.
  Named property 'ariaLabel' of types 'ScaleSidebarNav' and 'HTMLStencilElement' are not identical.

8760     interface HTMLScaleSidebarNavElement extends Components.ScaleSidebarNav, HTMLStencilElement {
                   ~~~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/typescript/lib/lib.dom.d.ts:4632:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
  Type 'HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | ... 330 more ... | HTMLMarqueeElement' is not assignable to type 'Element'.
    Type 'HTMLScaleCheckboxElement' is not assignable to type 'Element'.
      Types of property 'ariaLabel' are incompatible.
        Type 'string | undefined' is not assignable to type 'string'.
          Type 'undefined' is not assignable to type 'string'.

4632     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;
                                                                                                         ~~~~~~~~~~~~~~~~~~~~~~~~


Error: node_modules/typescript/lib/lib.dom.d.ts:4953:101 - error TS2344: Type 'HTMLElementTagNameMap[K]' does not satisfy the constraint 'Element'.
  Type 'HTMLElement | HTMLMetaElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | ... 330 more ... | HTMLMarqueeElement' is not assignable to type 'Element'.

4953     getElementsByTagName<K extends keyof HTMLElementTagNameMap>(qualifiedName: K): HTMLCollectionOf<HTMLElementTagNameMap[K]>;

[ReneP8]

I get the same error when trying to compile tha Angular app.
Do you have any solution yet?
Is it working with angular-cli 12?

[christopherGdynia]

Hello there,

I will take a look at this :)

[mato-a]

Is it working with angular-cli 12?

Yes, with Angular 12 it works fine.

[W1ckh3ad]

Hello @acstll,

the real problem

Finally, I took a look at this.

The Problem ```ariaLabel ``` attributes aren't the same in ```ScaleComponent.X``` and ```StencilComponent```. Both are of type ```string``` but one is ```optional``` and the other one is ```requiered```. The definition of optional comes from Scale and the definition of requiered comes from typescript.

@telekom/scale-components/dist/types
components.d.ts -> ScaleSidabarNav

  interface ScaleSidebarNav {
      // ...
      // it's optional here
        "ariaLabel"?: string;
      // ... 
    }

@telekom/scale-components/dist/types
stencil-public-runtime.d.ts -> HTMLStencilELement extends HTMLElement

typescript/lib/
lib.dom.d.ts -> HTMLElement extends Element, ...

lib.dom.d.ts -> Element extends ..., ARIAMixin, ...
lib.dom.d.ts -> ARIAMixin

interface ARIAMixin {
  // ...
  // it's requiered here
  ariaLabel: string

  // ...
}

I have opened a PR #788 and issue #786 that we should make props like ariaLabel optional, after typescript yelled at me, when I was using the webcomponents in TSX (typescript jsx with typescript React, without @telekom/scale-components-react).

Info using Scale in JSX in Issue #615

We could fix this easily by requiering all aria attributes

work arounds

I created an Angular app with ng new my-app
My repos: scale-and-angular
Note: The solutions are in two different branches

@telekom/scale-components npm package

Complete info here

• npm i @telekom/scale-components
• in tsconfig.json I added the compilerOption: skipLibCheck: true
• added a scale-button to app.component.html
• added CUSTOM_ELEMENTS_SCHEMA to app.module.ts
• added the applyPolyfills and defineCustomElementsto main.ts
• added the css file from Scale to assets in angular.json
• added the css file to html head

@telekom/scale-components via unpkg

Complete info here

• added CUSTOM_ELEMENTS_SCHEMA to app.module.ts
• • added a scale-button to app.component.html
• added the following two lines to the html head

  <script
      type="module"
      src="https://unpkg.com/@telekom/scale-components/dist/scale-components/scale-components.esm.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@telekom/scale-components/dist/scale-components/scale-components.css"
    />

I hope this will help you :)