Clarity: Upgraded from Angular cli 8.1.2 to 8.3.0 gave a Duplicate Identifier error

[corganfuzz]

Describe the bug

I had my brand new project on Angular CLI 8.1.2, did an ng update to latest 8.3.0 and I've got the following errors:

Failed to compile.

node_modules/@clr/angular/forms/common/providers/focus.service.d.ts:8:12 - error TS2300: Duplicate identifier 'ngInjectableDef'.

8     static ngInjectableDef: ɵngcc0.ɵɵInjectableDef<FocusService>;
             ~~~~~~~~~~~~~~~
node_modules/@clr/angular/forms/common/wrapped-control.d.ts:36:40 - error TS2314: Generic type 'WrappedFormControl<W>' requires 1 type argument(s).

36     static ngBaseDef: ɵngcc0.ɵɵBaseDef<WrappedFormControl>;

How to reproduce

Steps to reproduce the behavior:

1. Create a new project with angular cli 8.1.2
2. Do ng add @clr/angular (no errors at this point)
3. Install latest version of the angular CLI , with npm on your local machine
4. Perform an ng update in all packages including @clr/angular
5. ng serve

Expected behavior

Compiled Successfully message

Versions

App

• Angular: 8.3.0
• Node: 12.6.0
• Clarity: 2.1.2

Device:

• Type: PC
• OS: CentOS
• Browser chrome
• Version latest

Additional notes

Error goes away when I follow the node modules path, and delete these extra lines

static ngInjectableDef: ɵngcc0.ɵɵInjectableDef<FocusService>;

static ngBaseDef: ɵngcc0.ɵɵBaseDef<WrappedFormControl>;;

[gnomeontherun]

Angular 8.3.0 isn't available yet, can you confirm your versions ng version and npm ls @clr/angular?

[corganfuzz]

It got released 1 day ago. (08/22)

https://github.com/angular/angular-cli/releases

[corganfuzz]

versions

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.0
@angular-devkit/build-angular     0.803.0
@angular-devkit/build-optimizer   0.803.0
@angular-devkit/build-webpack     0.803.0
@angular-devkit/core              8.3.0
@angular-devkit/schematics        8.3.0
@angular/cli                      8.3.0
@ngtools/webpack                  8.3.0
@schematics/angular               8.3.0
@schematics/update                0.803.0
rxjs                              6.5.2
typescript                        3.5.3
webpack                           4.39.2

$ npm ls @clr/angular                                                             
*************************************************************************
└── @clr/[email protected] 

[hippee-lee]

In order to replicate this issue should I use angular cli v 8.3.0 or 8.1.2 to create the new project?

[corganfuzz]

@gnomeontherun forgot to mention.

If I create a brand new project with 8.3.0 and dong add @clr/angular everything compiles successfully. this error only happens when you upgrade from older versions to 8.3.0

[corganfuzz]

@hippee-lee , yo should use 8.1.2, which was released on Jul 17, according to this

[hippee-lee]

What version of Clarity were you upgrading from?

[corganfuzz]

from package.json that contains my cli 8.1.2

    "@clr/angular": "^2.1.1",
    "@clr/ui": "2.1.1",
    "@clr/icons": "2.1.1",
    "@webcomponents/custom-elements": "^1.0.0"

[corganfuzz]

Well... This is how it happened to me. (Altough, your way might also work)

1. Created a brand new app on July 17 with angular cli 8.1.2
2. Did a ng add @clr/angular which installed clarity 2.1.1
3. Almost a month went by without making any changes
4. Upgraded my local angular cli to 8.3.0
5. Did a ng update, performed all the update tasks, including clarity update which brought me to 2.1.2
6. Did a ng serve , error shows.

Please read above how I've got rid of this error. I figure this fix wouldnt work If I start deploying my app anywhere else

[hippee-lee]

Thanks, I am just having a hard time recreating your scenario. What was is the output of ng upgrade in the project before you upgraded the local angular cli?

[hippee-lee]

I have a project that I think is in the state as described (angular v8.1.3 and clarity c2.1.1)

Here is the output from ng update :

•100% ➜ ng update
Using package manager: 'npm'
Collecting installed dependencies...
Found 34 dependencies.
    We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cli                       8.1.3 -> 8.3.0           ng update @angular/cli
      @angular/core                      8.1.3 -> 8.2.3           ng update @angular/core
      @clr/angular                       2.1.1 -> 2.1.2           ng update @clr/angular
      rxjs                               6.4.0 -> 6.5.2           ng update rxjs

If thats correct can you describe to me the next steps to take?

[corganfuzz]

I have the code with 8.1.2 cli in one of my private repos. I will push it to a public one so we can avoid doubts.

[corganfuzz]

Here you go. Clone this, and do ng update, also update @clr/angular and you will see it

[hippee-lee]

It looks like this is related to recent changes in the angcular-cli: https://github.com/angular/angular-cli/issues/14980. It looks like ivy was installed under the hood and it doesn't like the FocusService.

When I create a project with v8.1.2 of the cli, add Clarity 2.1.1 and then upgrade angular and clarity packages with npm to their latest version The issue goes away for me.

So the fix here is to upgrade with npm for now and watch the angular cli issue for more info.

[corganfuzz]

how do you update angular with npm only?...I'm guessing you are not using ng-update

[gnomeontherun]

I used your project, ran ng update @angular/core @angular/cli @clr/angular and it worked ok. This error sounds like ivy is enabled or you are running a v9 early release.

[corganfuzz]

Interesting.
I was doing ng update separately , you did all of 3 packages at once. If I do the commands separately with --allow-dirty and -force. then the issue shows. so the key here is

ng update @angular/core @angular/cli @clr/angular

Thanks for the help

[hippee-lee]

ng update @angular/cli is installing several v9 packages under the hood and that triggers a Renderer to Renderer2 Migration that has an issue with the _FocusService_.

[hippee-lee]

Or maybe FocusService has an issue with Ivy ¯_(ツ)_/¯ ?

[Ketec]

Not sure why this is closed - I just got the same issue.

npm install @clr/icons @clr/angular @clr/ui @webcomponents/[email protected] --save
With Angular 8.2.3 already installed + ivy enabled.

Or does clarity not work with ivy? That would be a deal-breaker.

Downgrading angular CLI didn't help.

[corganfuzz]

Instead of doing npm separately I did ng update which brought me to do:

ng update @angular/core @angular/cli @clr/angular

(all in on line, instead typing them separated)

This was the best option for me if you have an old version of clarity 2.1.1 already installed.

If you dont have clarity installed I recommend using

ng add @clr/angular

After that, the error went away. They (angular team) are still working on this bug

Also, if you do an ng new adding clarity with ng add you wont see this error

[Ketec]

It runs even with 8.3.0 cli. As long as you have Ivy turned off in the tsconfig.

{
  "name": "name",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.3",
    "@angular/common": "~8.2.3",
    "@angular/compiler": "~8.2.3",
    "@angular/core": "~8.2.3",
    "@angular/forms": "~8.2.3",
    "@angular/platform-browser": "~8.2.3",
    "@angular/platform-browser-dynamic": "~8.2.3",
    "@angular/router": "~8.2.3",
    "@clr/angular": "^2.1.2",
    "@clr/icons": "^2.1.2",
    "@clr/ui": "^2.1.2",
    "@webcomponents/custom-elements": "^1.2.4",
    "rxjs": "~6.5.2",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.0",
    "@angular/cli": "~8.3.0",
    "@angular/compiler-cli": "~8.2.3",
    "@angular/language-service": "~8.2.3",
    "@types/node": "~12.7.2",
    "ts-node": "~8.3.0",
    "tslint": "~5.19.0",
    "typescript": "~3.5.3"
  }
}

For example - if I wipe node modules and do a clean npm install and add clarity to the app.module, it works.
If I enable ivy in tsconfig, it fails.

Seems to be because with ivy enabled, modules are installed differently.
Using ngcc.
https://github.com/angular/angular/blob/master/packages/compiler/design/architecture.md

[gnomeontherun]

Please see #3266 for ivy support, there are a lot of transient dependencies in play here and Ivy isn't completed so we don't currently support ivy until we address #3266.

[github-actions[bot]]

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.