Can't upgrade to Angular4

Question

Yes, I know that there are already thousands of similar questions - And no, none of the answers have worked for me. I already had a problem with upgrading my Angular quite some while ago, and just decided to ignore the new updates.

At first, I used the "standard" upgrade command: npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save That, however, resulted in the following error (+ Lots of warnings at the end):

+-- @angular/animations@4.1.3
+-- @angular/common@4.1.3
+-- UNMET PEER DEPENDENCY @angular/compiler@4.1.3
+-- @angular/compiler-cli@4.1.3  invalid
| +-- @angular/tsc-wrapped@4.1.3
| | `-- tsickle@0.21.6
| `-- reflect-metadata@0.1.10
+-- UNMET PEER DEPENDENCY @angular/core@4.1.3
+-- @angular/forms@4.1.3
+-- @angular/http@4.1.3
+-- @angular/platform-browser@4.1.3
+-- @angular/platform-browser-dynamic@4.1.3
+-- @angular/platform-server@4.1.3
| +-- parse5@3.0.2
| `-- xhr2@0.1.4
+-- @angular/router@4.1.3
+-- angular-cli@1.0.0-beta.24
| +-- @angular-cli/ast-tools@1.0.11
| | `-- typescript@2.0.10
| +-- UNMET PEER DEPENDENCY @angular/compiler@2.4.10
| +-- UNMET PEER DEPENDENCY @angular/compiler-cli@2.4.10
| | `-- @angular/tsc-wrapped@0.5.2
| +-- UNMET PEER DEPENDENCY @angular/core@2.4.10
| `-- typescript@2.0.10
+-- typescript@2.3.2  invalid
`-- UNMET PEER DEPENDENCY zone.js@0.7.4

Okay, no big deal, a quick google search told me (once again) to simply install each unmet peer dependency on its own. The problem: Regardless which of the peer dependencies that aren't met I try to install, I get unmet peer dependencies errors. Example: The first command told me that zone.js dependency isn't met. So I quickly run npm install zone.js@0.7.4 , and get the error message with a few unmet dependencies, INCLUDING packages such as @angular/core for example, which, when I try to install them, tell me that amongst the unmet dependencies is zone.js.

Basically: The dependencies seem to depend on each other, and I'm not able to install any of them. My package.json got updated correctly, with all package versions shown as they should be, but I can not run my project, because the packages aren't installed.

The only solution that I haven't tried yet is re-installing Angular completely - Which I'd like to avoid, if possible.

So, considering that anything regarding package.json doesn't work (Deleting, removing the versions, ...) and I can not install the dependencies that are shown as unmet, what exactly should I do to upgrade Angular properly?

Answer 1

I've run into similar problems with what seems like circular package dependencies, so I feel your pain. I'd recommend giving yarn a try https://yarnpkg.com/en/ , it has helped me out a lot.

1. Install yarn https://yarnpkg.com/en/docs/install
2. Delete the node_modules folder in your project
3. In the same folder with your package.json run 'yarn'. This will install all the old versions of your packages, including Angular 2.
4. Then run 'yarn upgrade'. This should install the newest version of all of the packages, including Angular 4, with the correct dependencies.