0

I'm on a project that is is utilizing Angular 5.x and I'm tasked to upgrade it to 6.x. After nearly 2 weeks now trying to figure out how all this works with NPM and unsuccessfully getting the upgrade to build due to what I believe are package errors, I'm at a complete loss.

I have wiped out the node_modules multiple times and reran this project but the ng build fails from what looks like package issues.

How can I find which packages are dependent on Angular versions higher than 6.x?

I've tried doing one package at a time but I'm missing something as it won't build. Errors vary from Observable not being found within some package or it is looking for the Angular 6 hack package.

jonrsharpe
  • 115,751
  • 26
  • 228
  • 437
edjm
  • 4,830
  • 7
  • 36
  • 65
  • You run `npm i` and see the errors/warning, and treat them one by one. Also, [this might help you](https://update.angular.io/). –  Sep 30 '19 at 12:29
  • 1
    You could also create a NG6 project and copy/paste your source in it ... Might work if you think of everything, and is a bit easier to do –  Sep 30 '19 at 12:30
  • @Maryannah Thanks for the ideas. I have already stepped through the Angular upgrade guide. Obtained what I think are the correct packages for Angular 6.x and have gotten the project to the state where ***npm install*** runs fine. The issue is always with the ***ng build***. – edjm Sep 30 '19 at 12:33
  • 1
    Angular 6 also means RxJS 6, which brought major API changes: https://github.com/ReactiveX/rxjs/blob/master/docs_app/content/guide/v6/migration.md – jonrsharpe Sep 30 '19 at 12:34
  • @jonrsharpe does it matter which version of RxJS 6? I have in the package ***rxjs: ^6.0.0***? – edjm Sep 30 '19 at 12:35
  • That seems fine per the 6.0.x Angular branch: https://github.com/angular/angular/blob/6.0.x/packages/core/package.json#L19 – jonrsharpe Sep 30 '19 at 12:38
  • Please update the question with the dependencies from the `package.json` file (don't paste the entire file, we only need the `devDependencies` and `dependencies` sections). Also add each error you get, but only the short description (don't paste the entire call stack). Make sure your samples are formatted properly so people can easily read them. – Reactgular Sep 30 '19 at 12:52
  • @Reactgular I'd love to paste stuff. However it is on another system that I have to move over to in order to see the stuff. So I'm back and forth between machines to come to this machine. – edjm Sep 30 '19 at 14:05

1 Answers1

0

The best solution that I was able to come up with is as follows

  • Follow the update guide from Angular
  • For each package that is defined in the package.json
  • Execute the following commands
    • See outdated packages: npm outdated
    • Update the package.json file to match versions

Note: I would not just update the packages to the latest and greatest as their may be some dependency issue with doing a big version change. Instead follow the below approach.

  • For all packages, executed the following commands
    • View the available version: npm view packageName versions --json
    • View the version dependencies: npm view packageName dependencies --json
    • View the version peerDependencies: npm view packageName peerDependencies --json
    • Update the package.json file to match highest version that goes with Angular 6.1.10

Maybe this was all unnecessary but not really knowing the ins and out of npm as well as Angular it is the best that I could come up with.

Everything is now updated from 5.x to 6.1.10 and npm install fully functions when I remove the node_modules folder, ng build compiles without errors, and the application is fully operational.

edjm
  • 4,830
  • 7
  • 36
  • 65
  • recommendation - if you add a package local and forget to save it to package.json, you'll have exposure to not knowing what you used later. Get a build process up on source control as soon as you can to catch this. – Mark Nov 16 '22 at 00:18