search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 762 forks source link

Upgraded from Angular cli 8.1.2 to 8.3.0 gave a Duplicate Identifier error #3739

Closed corganfuzz closed 5 years ago

corganfuzz commented 5 years ago

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

Device:

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 commented 5 years ago

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

corganfuzz commented 5 years ago

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

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

corganfuzz commented 5 years ago

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/angular@2.1.2
hippee-lee commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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

hippee-lee commented 5 years ago

What version of Clarity were you upgrading from?

corganfuzz commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

hippee-lee commented 5 years ago

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 commented 5 years ago

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

gnomeontherun commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

Ketec commented 5 years ago

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

npm install @clr/icons @clr/angular @clr/ui @webcomponents/custom-elements@1.0.0 --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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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] commented 4 years ago

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.