How to Upgrade Angular 7 to Angular 13

Question

I have a Angular material project that is very outdated and I need to updated to 13

After running npm outdated I see these results

According to the Angular update guide I need to upgrade only one mayor version at a time and it recommends these commands:

cmd /C "set "NG_DISABLE_VERSION_CHECK=1" && npx @angular/cli@8 update @angular/cli@8 @angular/core@8"

But after running that command I get these errors:

• Package "nativescript-angular" has an incompatible peer dependency to "typescript" (requires "~3.1.1", would install "3.5.3").
• Package "codelyzer" has an incompatible peer dependency to "@angular/compiler" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.2.14").
• Package "codelyzer" has an incompatible peer dependency to "@angular/core" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.2.14").
• Package "codelyzer" has an incompatible peer dependency to "@angular/common" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.2.14").
• Package "nativescript-angular" has an incompatible peer dependency to "zone.js" (requires "^0.8.4", would install "0.9.1").
• Package "codelyzer" has an incompatible peer dependency to "@angular/platform-browser" (requires ">=2.3.1 <7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.2.14").
• Package "codelyzer" has an incompatible peer dependency to "@angular/platform-browser-dynamic" (requires ">=2.3.1<7.0.0 || >6.0.0-beta <7.0.0" (extended), would install "8.2.14").
• Incompatible peer dependencies found. See above.

I have tried to update each one of those packages by hand but it becomes a nightmare of dependencies, that currently I'm unable to solve.

I want to be able to upgrade to Angular 13 (doing the needed code changes) and I want to know what is correct way to address this problem.

UPDATE

When using --force also fails with a different error

When running this command:

ng update --all --force

Answer 1

It turns out that migration from such and old version of Angular 7 to 13 was not as simple as any of the above answers.

What I ended up doing was to create a new Angular project ,using version 13, and then started copy pasting the following elements from the older version to the new one

• src/app (components, pipes, modules, etc)
• src/models
• src/services

Of course the list above is just for reference and it will change depending on your folder structure and angular version

Then I just run ng -s or let the typescript language service to tell me what where the sintax errors or missing parts (adding components to the modules, missing imports, etc)

Using WinMerge you can compare folders and files of both angular versions and compare package.json to determine which packages you have not installed yet.

I made sure that tsconfig files, app.modules.ts files where merged, and kept using the errors to guide me.

It was a demo application where I had to use any type in many places as a quick fix, but try to use strong types as much as possible

That can be boring, but is my code and I know better than trying to fix a non-ending nightmare of dependencies between old npm packages (some of them have even changed their names)

Answer 2

You can use ng update --all --force or npm install --save --legacy-peer-deps. It basically avoids/ignores all the dependency-checks and updates all the packages wherever applicable. Although it is not recommended generally, I had to do the update this way as other suggestions seemed to be not working for me.

Answer 3

You go step by step, as the documentation tells you.

You can add a --force to the upgrade command. Then it will ignore all these incompatible peer dependencies. You can then try to start your app, if it works, all is good.

If it doesn't, you upgrade the packages that make problems.

Repeat this step for each major version change of angular.

Second error tells you to try adding the following flag: retry this command with --force, or --legacy-peer-deps

Does this help you solve the issue?