How do I update my package.json to fix peer dependencies and its conflicts?

Question

I am working on a relatively old Ionic project written by some other guy that worked in my company before me and I can't get it to build properly. The reason is that when I run npm install, I get too many warnings about peer dependencies.

I've tried to install the peer dependencies manually without success. I've figured that it is probably due to some conflicts between dependency versions. But I am totally lost, because I'm new to Ionic and npm. I've tried to update my package.json file by adding the peer dependencies to the peerDependencies portion. Here's how it is right now:

    "dependencies": {
        "@angular/common": "^6.0.0",
        "@angular/compiler": "4.1.3",
        "@angular/compiler-cli": "4.1.3",
        "@angular/core": "^7.0.0",
        "@angular/forms": "4.1.3",
        "@angular/http": "4.1.3",
        "@angular/platform-browser": "^6.0.0",
        "@angular/platform-browser-dynamic": "^6.0.0",
        "@ionic-native/camera": "^4.17.0",
        "@ionic-native/core": "^4.11.0",
        "@ionic-native/device": "^4.17.0",
        "@ionic-native/email-composer": "^4.17.0",
        "@ionic-native/firebase": "^4.15.0",
        "@ionic-native/keyboard": "^4.12.0",
        "@ionic-native/photo-viewer": "^4.17.0",
        "@ionic-native/social-sharing": "^4.16.0",
        "@ionic-native/splash-screen": "3.12.1",
        "@ionic-native/status-bar": "3.12.1",
        "@ionic/storage": "2.0.1",
        "@ngx-translate/core": "^11.0.0",
        "ajv": "^6.10.2",
        "angularfire2": "^5.0.2",
        "com-sarriaroman-photoviewer": "1.1.18",
        "cordova": "^9.0.0",
        "cordova-android": "^8.0.0",
        "cordova-ios": "^5.0.1",
        "cordova-plugin-androidx": "^1.0.2",
        "cordova-plugin-androidx-adapter": "^1.1.0",
        "cordova-plugin-camera": "4.0.3",
        "cordova-plugin-device": "^1.1.4",
        "cordova-plugin-email-composer": "0.8.15",
        "cordova-plugin-firebase": "^2.0.5",
        "cordova-plugin-firebasex": "^6.0.6",
        "cordova-plugin-ionic-keyboard": "^2.1.3",
        "cordova-plugin-ionic-webview": "^4.1.0",
        "cordova-plugin-splashscreen": "^4.0.3",
        "cordova-plugin-statusbar": "^2.2.2",
        "cordova-plugin-uniquedeviceid": "^1.3.2",
        "cordova-plugin-whitelist": "^1.3.1",
        "cordova-plugin-x-socialsharing": "5.4.1",
        "es6-promise-plugin": "4.2.2",
        "firebase": "^5.5.3",
        "ionic-angular": "3.5.0",
        "ionicons": "3.0.0",
        "node-sass": "^4.9.3",
        "rxjs": "^6.3.0",
        "sw-toolbox": "3.6.0",
        "zone.js": "0.8.12"
    },
    "devDependencies": {
        "@ionic/app-scripts": "^3.2.4",
        "@ionic/cli-plugin-cordova": "1.4.1",
        "@ionic/cli-plugin-ionic-angular": "1.3.2",
        "install-peers": "^1.0.3",
        "typescript": "2.3.4"
    },
    "peerDependencies": {
        "@angular/common": "4.1.3",
        "@angular/compiler": "6.1.10",
        "@angular/core": "4.1.3",
        "@angular/platform-browser": "4.1.3",
        "@angular/platform-browser-dynamic": "4.1.3",
        "@firebase/app-types": "0.x",
        "@firebase/util": "0.x",
        "rxjs": "5.4.0",
        "zone.js": "~0.8.26"
    }

As you can see, there are some dependencies that have different versions on the dependencies and peerDependencies portions. And I don't know what I can do about it.

I installed an npm package named install-peers and when I do npm install I get this:

> install-peers@1.0.3 postinstall /Users/matheushr/workspace/Plis/plis-frontend/node_modules/install-peers
> node install.js

Installed peerDependencies as devDependencies via npm.
+ @angular/platform-browser-dynamic@4.1.3
+ @angular/platform-browser@4.1.3
+ rxjs@5.4.0
+ @angular/common@4.1.3
+ zone.js@0.8.29
+ @firebase/util@0.2.25
+ @angular/core@4.1.3
+ @angular/compiler@6.1.10
+ @firebase/app-types@0.4.3
added 7 packages from 2 contributors, updated 9 packages, moved 1 package and audited 9936 packages in 72.829s
found 0 vulnerabilities
npm WARN Plis@0.0.1 requires a peer of @angular/common@4.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN Plis@0.0.1 requires a peer of @angular/compiler@6.1.10 but none is installed. You must install peer dependencies yourself.
npm WARN Plis@0.0.1 requires a peer of @angular/core@4.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN Plis@0.0.1 requires a peer of @angular/platform-browser@4.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN Plis@0.0.1 requires a peer of @angular/platform-browser-dynamic@4.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN Plis@0.0.1 requires a peer of rxjs@5.4.0 but none is installed. You must install peer dependencies yourself.
npm WARN Plis@0.0.1 requires a peer of zone.js@~0.8.26 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/common@6.1.10 requires a peer of @angular/core@6.1.10 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/compiler@4.1.3 requires a peer of @angular/core@4.1.3 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/core@7.2.15 requires a peer of zone.js@~0.8.26 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/platform-browser@6.1.10 requires a peer of @angular/core@6.1.10 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/platform-browser-dynamic@6.1.10 requires a peer of @angular/core@6.1.10 but none is installed. You must install peer dependencies yourself.
npm WARN @angular/platform-browser-dynamic@6.1.10 requires a peer of @angular/compiler@6.1.10 but none is installed. You must install peer dependencies yourself.
npm WARN @ionic-native/core@4.20.0 requires a peer of rxjs@^5.5.11 but none is installed. You must install peer dependencies yourself.

Trying to build the project, I get these errors:

[17:15:01]  typescript: node_modules/@angular/compiler/src/output/output_ast.d.ts, line: 600 
            In 'const' enum declarations member initializer must be constant expression. 

     L599:      text?: string;
     L600:  } | {      
     L601:      tagName?: undefined;

[17:15:01]  typescript: node_modules/@angular/compiler/src/output/output_ast.d.ts, line: 601 
            In 'const' enum declarations member initializer must be constant expression. 

     L600:  } | {
     L601:      tagName?: undefined;
     L602:      text: string;

[17:15:01]  typescript: node_modules/@angular/compiler/src/output/output_ast.d.ts, line: 602 
            In 'const' enum declarations member initializer must be constant expression. 

     L601:      tagName?: undefined;
     L602:      text: string;      
     L603:  };

[17:15:01]  typescript: src/app/app.component.ts, line: 22 
            Cannot find module 'rxjs/operators'. 

      L21:  import { EditUser } from './../pages/edit/edit';
      L22:  import { tap } from 'rxjs/operators';
      L23:  import { PrivacidadePage } from '../pages/privacidade/privacidade';

[17:15:01]  typescript: src/app/app.component.ts, line: 86 
            Property 'disableScroll' does not exist on type 'Keyboard'. 

      L85:      this.rootPage = this.initComp();
      L86:      this.keyboard.disableScroll(true);
      L87:  });

[17:15:01]  typescript: src/components/authentication/authentication.ts, line: 26 
            Property 'disableScroll' does not exist on type 'Keyboard'. 

      L26:      this.keyboard.disableScroll(true);

[17:15:01]  typescript: src/pages/user-forgotpassword/user-forgotpassword.ts, line: 21 
            Property 'disableScroll' does not exist on type 'Keyboard'. 

      L21:    this.keyboard.disableScroll(false);

[17:15:01]  typescript: src/pages/user-signup/user-signup.ts, line: 32 
            Property 'disableScroll' does not exist on type 'Keyboard'. 

      L32:    this.keyboard.disableScroll(true);

I really don't know how to make it work.

Answer 1

I feel your pain. I don't use Ionic, but do work with npm regularly. Anytime you see "You must install peer dependencies yourself.", that is usually a good indicator you will need to do exactly that.

You already know how to install a package with npm. Remember to use the --save flag or the --save-dev flag with that command so that your package.json file is continually updated through this process.

A tool that I have used consistently with pretty good results is one called npm-check-updates and has helped me immensely quickly resolve old installments into more updated, working installs.

Honestly, I wouldn't try build again until you are no longer receiving hard errors in the npm install process. Hope this helps!

[EDIT]: I realize that you may be asking about exactly peerDependencies, which is a little different, and something I have not run into much. I did find an article that seems to explain it quite well: npm Peer Dependencies and I hope that helps clarify even more and set you on your way!