Recommended quickstart for Angular fails to compile

[dstovall]

I can't get the most basic quickstart to compile. Figuring it was some environmental or user issue, I've reproduced the same behavior in a brand new, fresh Ubuntu Desktop 21.10 install.

Any advice?
Is this a bug or user error?

Thanks,
Drew

I ran the following commands to install nodejs/npm/ng:

sudo apt update
sudo apt install curl
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
sudo npm install -g npm@8.4.1
sudo npm install -g @angular/cli

and then these commands based on Clarity's getting started page:

cd ~/Desktop
ng new my-awesome-app --routing --style scss
cd my-awesome-app
ng add @clr/angular
ng build

The final command (ng build) after adding Clarity fails with the following error message:

dstovall@ubuntu:~/Desktop/my-awesome-app$ ng build
✔ Browser application bundle generation complete.

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<any>) => void'.
    Types of parameters 'props' and '_changedProperties' are incompatible.
      Type 'PropertyValues<any>' 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<any>) => void'.
    Types of parameters 'props' and '_changedProperties' are incompatible.
      Type 'PropertyValues<any>' 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<any>) => void'.
    Types of parameters 'props' and '_changedProperties' are incompatible.
      Type 'PropertyValues<any>' 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;
                 ~~~~~~~

for reference, here are the versions:

dstovall@ubuntu:~/Desktop/my-awesome-app$ node -v
v16.14.0
dstovall@ubuntu:~/Desktop/my-awesome-app$ npm -v
8.4.1
dstovall@ubuntu:~/Desktop/my-awesome-app$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 13.2.3
Node: 16.14.0
Package Manager: npm 8.4.1
OS: linux x64

Angular: 13.2.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1302.3
@angular-devkit/build-angular   13.2.3
@angular-devkit/core            13.2.3
@angular-devkit/schematics      13.2.3
@angular/cli                    13.2.3
@schematics/angular             13.2.3
rxjs                            7.5.4
typescript                      4.5.5

dstovall@ubuntu:~/Desktop/my-awesome-app$ grep clr package.json 
    "@clr/angular": "13.0.1",
    "@clr/ui": "13.0.1",

[hippee-lee]

Hi @dstovall - you are not doing anything wrong. There was an issue from one of the dependencies that will cause this issue.
It was fixed today in #6667 nd should be available in the next release.

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

Here is the issue with that workaround: #6654

[dstovall]

Thank you @hippee-lee . Workaround confirmed.
Thanks for the PR, the issue, and including the workaround - complete, concise, accurate answers are awesome! :)