TS2416: Property 'updated' in type 'CdsIcon' is not assignable to the same property in base type 'LitElement'.

[youeleven]

Describe the bug

Trying to create a clarity project by following below command

ng new hawkeye-ui cd hawkeye-ui/ ng add @clr/angular ng serve

`
$ ng --version

 _                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|

/ △ \ | '_ \ / | | | | |/ _ | '__| | | | | | |
/ ___ | | | | (| | || | | (| | | | || | | |
// __| ||_, |_,||_,|| _|||
|___/

Angular CLI: 13.2.0
Node: 16.13.2
Package Manager: npm 8.1.2
OS: darwin x64

Angular:
...

Package Version

@angular-devkit/architect 0.1302.0 (cli-only)
@angular-devkit/core 13.2.0 (cli-only)
@angular-devkit/schematics 13.2.0 (cli-only)
@schematics/angular 13.2.0 (cli-only)

$ ng new demo-ui
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE demo-ui/README.md (1055 bytes)
CREATE demo-ui/.editorconfig (274 bytes)
CREATE demo-ui/.gitignore (548 bytes)
CREATE demo-ui/angular.json (3231 bytes)
CREATE demo-ui/package.json (1073 bytes)
CREATE demo-ui/tsconfig.json (863 bytes)
CREATE demo-ui/.browserslistrc (600 bytes)
CREATE demo-ui/karma.conf.js (1427 bytes)
CREATE demo-ui/tsconfig.app.json (287 bytes)
CREATE demo-ui/tsconfig.spec.json (333 bytes)
CREATE demo-ui/.vscode/extensions.json (130 bytes)
CREATE demo-ui/.vscode/launch.json (474 bytes)
CREATE demo-ui/.vscode/tasks.json (938 bytes)
CREATE demo-ui/src/favicon.ico (948 bytes)
CREATE demo-ui/src/index.html (295 bytes)
CREATE demo-ui/src/main.ts (372 bytes)
CREATE demo-ui/src/polyfills.ts (2338 bytes)
CREATE demo-ui/src/styles.scss (80 bytes)
CREATE demo-ui/src/test.ts (745 bytes)
CREATE demo-ui/src/assets/.gitkeep (0 bytes)
CREATE demo-ui/src/environments/environment.prod.ts (51 bytes)
CREATE demo-ui/src/environments/environment.ts (658 bytes)
CREATE demo-ui/src/app/app-routing.module.ts (245 bytes)
CREATE demo-ui/src/app/app.module.ts (393 bytes)
CREATE demo-ui/src/app/app.component.scss (0 bytes)
CREATE demo-ui/src/app/app.component.html (23364 bytes)
CREATE demo-ui/src/app/app.component.spec.ts (1085 bytes)
CREATE demo-ui/src/app/app.component.ts (215 bytes)
✔ Packages installed successfully.
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint:
hint: git config --global init.defaultBranch
hint:
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint:
hint: git branch -m
Successfully initialized git.
unegi-a01:demo unegi$ cd demo-ui/
unegi-a01:demo-ui unegi$ ng add @clr/angular
ℹ Using package manager: npm
✔ Found compatible package version: @clr/angular@13.0.1.
✔ Package information loaded.

The package @clr/angular@13.0.1 will be installed and executed.
Would you like to proceed? Yes
✔ Package successfully installed.
UPDATE package.json (1154 bytes)
UPDATE angular.json (3283 bytes)
UPDATE src/app/app.module.ts (567 bytes)
✔ Packages installed successfully.
unegi-a01:demo-ui unegi$ ng serve
✔ Browser application bundle generation complete.

Initial Chunk Files | Names | Raw Size
vendor.js | vendor | 4.39 MB |
styles.css, styles.js | styles | 736.47 kB |
polyfills.js | polyfills | 299.91 kB |
main.js | main | 53.81 kB |
runtime.js | runtime | 6.52 kB |

                  | Initial Total |   5.46 MB

Build at: 2022-02-08T10:18:54.550Z - Hash: 0a2bb2d52a0fca55 - Time: 19649ms

Error: node_modules/@cds/core/icon/icon.element.d.ts:91:5 - error TS2416: Property 'updated' in type 'CdsIcon' is not assignable to the same property in base type 'LitElement'.
Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues) => void'.
Types of parameters 'props' and '_changedProperties' are incompatible.
Type 'PropertyValues' is not assignable to type 'Map<string, any>'.

91 updated(props: Map<string, any>): void;
~~~~~~~

Error: node_modules/@cds/core/icon/icon.element.d.ts:92:5 - error TS2416: Property 'firstUpdated' in type 'CdsIcon' is not assignable to the same property in base type 'LitElement'.
Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues) => void'.
Types of parameters 'props' and '_changedProperties' are incompatible.
Type 'PropertyValues' is not assignable to type 'Map<string, any>'.

92 firstUpdated(props: Map<string, any>): void;
~~~~~~~~~~~~

Error: node_modules/@cds/core/internal/base/button.base.d.ts:19:15 - error TS2416: Property 'updated' in type 'CdsBaseButton' is not assignable to the same property in base type 'LitElement'.
Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues) => void'.
Types of parameters 'props' and '_changedProperties' are incompatible.
Type 'PropertyValues' is not assignable to type 'Map<string, any>'.
Types of property 'forEach' are incompatible.
Type '(callbackfn: <K extends string | number | symbol>(value: any, key: K, map: Map<K, any>) => void, thisArg?: unknown) => void' is not assignable to type '(callbackfn: (value: any, key: string, map: Map<string, any>) => void, thisArg?: any) => void'.
Types of parameters 'callbackfn' and 'callbackfn' are incompatible.
Types of parameters 'key' and 'key' are incompatible.
Type 'K' is not assignable to type 'string'.
Type 'string | number | symbol' is not assignable to type 'string'.
Type 'number' is not assignable to type 'string'.

19 protected updated(props: Map<string, any>): void;
~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

✖ Failed to compile.
`

[arjunckm]

Same Issue we are also facing from today when we updated with npm install

Error: node_modules/@cds/core/icon/icon.element.d.ts:91:5 - error TS2416: Property 'updated' in type 'CdsIcon' is not assignable to the same property in base type 'LitElement'.
Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues) => void'.
Types of parameters 'props' and '_changedProperties' are incompatible.
Type 'PropertyValues' is not assignable to type 'Map<string, any>'.

91 updated(props: Map<string, any>): void;
~~~~~~~

Error: node_modules/@cds/core/icon/icon.element.d.ts:92:5 - error TS2416: Property 'firstUpdated' in type 'CdsIcon' is not assignable to the same property in base type 'LitElement'.
Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues) => void'.
Types of parameters 'props' and '_changedProperties' are incompatible.
Type 'PropertyValues' is not assignable to type 'Map<string, any>'.

92 firstUpdated(props: Map<string, any>): void;
~~~~~~~~~~~~

Error: node_modules/@cds/core/internal/base/button.base.d.ts:19:15 - error TS2416: Property 'updated' in type 'CdsBaseButton' is not assignable to the same property in base type 'LitElement'.
Type '(props: Map<string, any>) => void' is not assignable to type '(_changedProperties: PropertyValues) => void'.
Types of parameters 'props' and '_changedProperties' are incompatible.
Type 'PropertyValues' is not assignable to type 'Map<string, any>'.
Types of property 'forEach' are incompatible.
Type '(callbackfn: <K extends string | number | symbol>(value: any, key: K, map: Map<K, any>) => void, thisArg?: unknown) => void' is not assignable to type '(callbackfn: (value: any, key: string, map: Map<string, any>) => void, thisArg?: any) => void'.
Types of parameters 'callbackfn' and 'callbackfn' are incompatible.
Types of parameters 'key' and 'key' are incompatible.
Type 'K' is not assignable to type 'string'.
Type 'string | number | symbol' is not assignable to type 'string'.
Type 'number' is not assignable to type 'string'.

19 protected updated(props: Map<string, any>): void;

[thojo]

It's caused by a breaking change in version 1.2.2 of @lit/reactive-element from lit/lit#2482.

As a workaround you can temporary downgrade @lit/reactive-element to version 1.2.1:
npm install @lit/reactive-element@<1.2.2

[coryrylan]

The patch for this issue will go out in the next release. Until then the workaround @thojo posted should be used

[AlexKuturkin]

how to reduce the dependency of a @lit/reactive-element if he is not in the package.json ?
cds/core is in

[rameshkrishnan]

in the package.json, we can add new section

"resolutions": {
    "@lit/reactive-element": "1.2.1"
}

and continue with npm install or yarn install.

[AlexKuturkin]

@peterblazejewicz , tnanks a lot!

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.