Angular-cli: Suboptimal experience upgrading from 7 to 8

[andrewseguin]

🐞 Bug report

Command

ng update

Is this a regression?

Not sure

Description

I'm on Angular 7 and want all the goodness of Angular 8. I know that the CLI helps me do this, so I run ng update assuming this will help guide me to the latest version.

Here's what I experienced in the terminal:

^_^ ng update
Your global Angular CLI version (8.0.1) is greater than your local
version (7.3.8). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
    We analyzed your package.json, there are some packages to update:

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cdk                       7.3.7 -> 8.1.2           ng update @angular/cdk
      @angular/cli                       7.3.8 -> 8.2.1           ng update @angular/cli
      @angular/core                      7.2.12 -> 8.2.0          ng update @angular/core
      @angular/core                      7.2.12 -> 7.2.15         ng update @angular/core
      @angular/material                  7.3.7 -> 8.1.2           ng update @angular/material
      @ngrx/store                        7.4.0 -> 8.2.0           ng update @ngrx/store
      rxjs                               6.3.3 -> 6.5.2           ng update rxjs


    There might be additional packages that are outdated.
    Run "ng update --all" to try to update all at the same time.

^_^ ng update --all
Your global Angular CLI version (8.0.1) is greater than your local
version (7.3.8). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
                  Package "tsickle" has an incompatible peer dependency to "typescript" (requires "~3.4.1", would install "3.5.3")
                  Package "@angular/http" has an incompatible peer dependency to "@angular/core" (requires "7.2.15", would install "8.2.0")
                  Package "@angular/core" has an incompatible peer dependency to "zone.js" (requires "~0.9.1", would install "0.10.1")
                  Package "@angular/core" has an incompatible peer dependency to "zone.js" (requires "~0.9.1", would install "0.10.1").
                  Package "tsickle" has an incompatible peer dependency to "typescript" (requires "~3.4.1", would install "3.5.3").
Incompatible peer dependencies found. See above.

I talked with Vikram and now understand I need to run ng update @angular/cli @angular/core, which is also repeated on the site: https://angular.io/cli/update

However, I assume the CLI would have helped me figure this out in the terminal instead of giving me odd messages like @angular/http has an incompatible peer dependency to core.

It would have been nice for the CLI to understand my intentions and either perform the right commands for me, or guide me to the docs site or upgrade site to help me correct my commands.

🔬 Minimal Reproduction

You can check out my app and run it from there: https://github.com/crafted/crafted

🌍 Your Environment

Angular CLI: 7.3.8
Node: 10.15.3
OS: linux x64
Angular: 7.2.12
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.13.8
@angular-devkit/build-angular      0.13.8
@angular-devkit/build-ng-packagr   0.13.8
@angular-devkit/build-optimizer    0.13.8
@angular-devkit/build-webpack      0.13.8
@angular-devkit/core               7.3.8
@angular-devkit/schematics         7.3.8
@angular/cdk                       7.3.7
@angular/cli                       7.3.8
@angular/fire                      5.1.2
@angular/material                  7.3.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   7.3.8
@schematics/angular                7.3.8
@schematics/update                 0.13.8
ng-packagr                         4.7.1
rxjs                               6.3.3
typescript                         3.2.4
webpack                            4.29.0

[andrewseguin]

Running ng update @angular/cli @angular/core gives me this:

^_^ ng update @angular/cli @angular/core
Your global Angular CLI version (8.0.1) is greater than your local
version (7.3.8). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".
                  Package "@angular/fire" has an incompatible peer dependency to "zone.js" (requires "^0.8.0", would install "0.9.1").
                  Package "tsickle" has an incompatible peer dependency to "typescript" (requires "~3.3.1", would install "3.5.3").
Incompatible peer dependencies found. See above.

I think it's trying to telling me to upgrade zone.js and typescript before running the update command, but it would be helpful if that message was communicated in this output

[kvloover]

having a similar issue updating from 7 to 8, this works fine:
ng update @angular/cli @angular/core

Resulted in following angular packages:

    "@angular/animations": "^8.2.1",
    "@angular/cdk": "^7.3.7",
    "@angular/common": "^8.2.1",
    "@angular/compiler": "^8.2.1",
    "@angular/core": "^8.2.1",
    "@angular/forms": "^8.2.1",
    "@angular/material": "^7.3.7",
    "@angular/material-moment-adapter": "^7.2.1",
    "@angular/platform-browser": "^8.2.1",
    "@angular/platform-browser-dynamic": "^8.2.1",
    "@angular/router": "^8.2.1",

ng update gives

      Name                               Version                  Command to update
     --------------------------------------------------------------------------------
      @angular/cdk                       7.3.7 -> 8.1.2           ng update @angular/cdk
      @angular/material                  7.3.5 -> 8.1.2           ng update @angular/material

Running ng update --all gives the following errors:

Package "@angular/core" has an incompatible peer dependency to "zone.js" (requires "~0.9.1", would install "0.10.1").

On an extra note running ng update @angular/cdk @angular/material gives even worse results, even trying to install 'next' versions (although not told to)

...
Package "@angular/flex-layout" has an incompatible peer dependency to "@angular/core" (requires ">=7.0.0-rc.0", would install "9.0.0-next.1").

[LastDragon-ru]

Seems related to #13095, #14980 etc, workaround

npm uninstall @angular/http                                (deprecated a long time ago and removed in 8)
ng update --all --force                                    (will update all)
npm install "zone.js"@"~0.9.1"                             (rollback to proper version)
npm install typescript@"~3.4.5"                            (rollback to proper version)
ng update @angular/cli --from 7 --to 8 --migrate-only      (run migrations)
ng update @angular/core --from 7 --to 8 --migrate-only     (run migrations)
ng update @angular/material --from 7 --to 8 --migrate-only (run migrations)

[wy193777]

The broken ng update --all and ng update <package-name> has been there for million years, but nothing changed until now. Is development team has a say about when will they fix this problem or simply ng update?

[Prinsn]

I just attempted to follow the update guide and I have a number of updates that reported that they updated to angular 8 but on inspection they are at 9.0.0-next.1

[edster23]

Does anyone here have answers on the incompatible peer dependency issues that come up with the upgrade? I use the guide [https://update.angular.io/#7.0:8.0] with no mention of this. As I try to chase down the dependency issues I get stuck on typescript.

so I may try rpm run update:check @angular/cli @angular/core and get incompatible on tsickle, so I add that, then the next and eventually I come full circle back to the tsickle incompatible issue.

@angular/cli @angular/core @ngrx/router-store tsickle @angular/animations @angular/forms @angular/flex-layout @angular/material @angular/common @angular/http @angular/router @angular/compiler-cli typescript

Are we ignoring these errors or is this bad and we should stop?

[wy193777]

@edster23 run ng update --all -f, then install old version of typescript, zone.js tsickle by run something like npm install [email protected]. This is the easiest way to update dependencies I can see. But you might see problems after those steps even your app compiled.

[edster23]

I ended up finding a way through after I reminded myself that the upgrade instructions say not to upgrade material. I had to append several other items besides @angular/core and @angular/cli , but did not capture the exact ones here. When I went to do material, I still got into a circular problem with tsickle and typescript, creeping in a 9 beta dependency. I eventually did a force and got through. Now I am stuck on typescript thinking setInterval returns a Timeout instead of a number, but when I view source, it returns a number. Still looking into this one...

Type 'Timeout' is not assignable to type 'number'.
const scrollInterval: number = setInterval(() => {

I tried to roll back to 3.4 and still had this issue. I plan to go out and see what the changes are online, just weird that viewing source on the interface still says number...

[peter-snr]

I have tried to update a 7.3 Angular application to 8 running into so many issues. The update guide did not work. I have ended up here...

$ ng update --all
Using package manager: 'npm'
Collecting installed dependencies...
Found 88 dependencies.
Package "codelyzer" has an incompatible peer dependency to "tslint" (requires "^5.0.0", would install "6.0.0")
Package "ng-packagr" has an incompatible peer dependency to "typescript" (requires ">=2.7 <3.6", would install "3.7.5")
Package "codelyzer" has an incompatible peer dependency to "tslint" (requires "^5.0.0", would install "6.0.0").
Package "@angular/http" has an incompatible peer dependency to "@angular/core" (requires "7.2.16", would install "8.2.14")
Package "@angular/compiler-cli" has an incompatible peer dependency to "typescript" (requires ">=3.4 <3.6", would install "3.7.5")
Package "@angular/core" has an incompatible peer dependency to "zone.js" (requires "~0.9.1", would install "0.10.2")
Package "ng2-img-max" has an incompatible peer dependency to "@angular/core" (requires "^6.0.4" (extended), would install "8.2.14").
Package "ng-packagr" has an incompatible peer dependency to "typescript" (requires ">=2.7 <3.6", would install "3.7.5").
Package "@ngrx/core" has an incompatible peer dependency to "rxjs" (requires "^5.0.0-beta.12", would install "6.5.4").
Package "@angular/core" has an incompatible peer dependency to "zone.js" (requires "~0.9.1", would install "0.10.2").
Incompatible peer dependencies found.
Peer dependency warnings when installing dependencies means that those dependencies might not work correctly together.
You can use the '--force' option to ignore incompatible peer dependencies and instead address these warnings later.

And...

$ ng version

Angular CLI: 8.3.23
Node: 10.16.0
OS: linux x64
Angular: 7.2.15
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.8.9
@angular-devkit/build-angular      0.803.23
@angular-devkit/build-ng-packagr   0.8.9
@angular-devkit/build-optimizer    0.803.23
@angular-devkit/build-webpack      0.803.23
@angular-devkit/core               7.3.9
@angular-devkit/schematics         8.3.23
@angular/cdk                       7.3.7
@angular/cli                       8.3.23
@angular/material                  7.3.7
@angular/material-moment-adapter   7.3.7
@ngtools/json-schema               1.1.0
@ngtools/webpack                   8.3.23
@schematics/angular                8.3.23
@schematics/update                 0.803.23
ng-packagr                         4.7.1
rxjs                               6.5.3
typescript                         3.2.4
webpack                            4.39.2

Really stuck now and not sure what to do?

I am that desperate I am thinking of creating a new Angular project and moving file by file from the old project to the new. About a weeks work at least.

How do I get a 7.3 Angular project to at least v8? I am happy to migrate code, but the output above is not helping.

Some help perhaps?

[wy193777]

@peter-snr
I usually use ng update --force, then I launch the app to see which dependency is too new to angular, I remove them and install required version.

[peter-snr]

@wy193777
Thank you for the suggestion.

I have reverted to 7.3 but will consider that option when we eventually decide to go to 8.

The app is quite complex www.prism360.co.uk so I do not expect it to be easy.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}