search

carbon-design-system / carbon-for-ibm-dotcom

Carbon for IBM.com is based on the Carbon Design System for IBM
https://www.ibm.com/standards/carbon/
Apache License 2.0
266 stars 157 forks source link

Angular & Typescript Updates #9744

Closed kellscode closed 1 year ago

kellscode commented 2 years ago

Description

My project was working fine in Angular 10 Typescript 3.9.10, but upgrading to Angular 11 Typescript 4.0.2 results in the following message

Error: node_modules/carbon-web-components/es/components/input/input.d.ts:638:9 - error TS2611: 'value' is defined as a property in class '{ _getValidityMessage(state: string): any; _testValidity(): string; invalid: boolean; required: boolean; requiredValidityMessage: string; validityMessage: string; value: string; checkValidity(): boolean; ... 242 more ...; focus(options?: FocusOptions): void; } & { ...; } & LitElement', but is overridden here in 'BXInput' as an accessor.

638     get value(): string;

I found that typescript 4.0. Beta's breaking change refers to this exact error (Properties Overridding Accessors and vice versa is an Error)

But the error coming from carbon-web-components isn't resolvable. I am unable to run my application due to this error.

Component(s) impacted

I can't run the application due to the above error. Following is my package versions:

Angular CLI: 11.2.19 Node: 14.19.3 OS: darwin x64

Angular: 11.2.14 ... animations, common, compiler, compiler-cli, core, forms ... language-service, localize, platform-browser ... platform-browser-dynamic, router Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1303.8 @angular-devkit/build-angular 0.1102.19 @angular-devkit/core 11.2.19 @angular-devkit/schematics 11.2.19 @angular/cdk 10.2.4 @angular/cli 11.2.19 @schematics/angular 11.2.19 @schematics/update 0.1102.19 rxjs 6.5.3 typescript 4.0.2

Browser

Chrome

Carbon Web Components version

v.1.21.0

Severity

Severity 1 = The design is broken in a critical way that blocks users from completing tasks or damages the brand. Affects major functionality, no workaround.

Application/website

angular

CodeSandbox example

https://codesandbox.io/s/angular-jest-footer-angular11-1xmfc2?file=/package.json

Steps to reproduce the issue (if applicable)

Instead of the error message shown in my project, I get a 502 bad gateway error on codesandbox.

Release date (if applicable)

No response

Code of Conduct

abdonrd commented 2 years ago

Maybe related? https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9044

maahtiin commented 6 months ago

Running into this exact problem using the CdsTextInput component. I also noticed a FIXME: line at packages/carbon-web-components/src/components/text-input/text-input.ts on line 273, indicating this issue is recognized, but no solution has been found yet. As i'm stuck using strict-mode, i'm sadly blocked from using this crucial component.

It seems related to this, which describes a possible fix to be suggested for @carbon/web-components: https://stackoverflow.com/a/64402398

i'm looking into it for a bit, but please let me know if there's anything i can add.

jeffchew commented 6 months ago

Running into this exact problem using the CdsTextInput component. I also noticed a FIXME: line at packages/carbon-web-components/src/components/text-input/text-input.ts on line 273, indicating this issue is recognized, but no solution has been found yet. As i'm stuck using strict-mode, i'm sadly blocked from using this crucial component.

It seems related to this, which describes a possible fix to be suggested for @carbon/web-components: https://stackoverflow.com/a/64402398

i'm looking into it for a bit, but please let me know if there's anything i can add.

Hi @maahtiin , since this is a closed issue, can you create a new issue with these details? Also, if you are an IBMer, you can reach out at #carbon-web-components in Slack!