2

I have bought an admin template (from wrappixel) that is an Angular 6 application. I need to upgrade it to Angular version 7. I did this using

ng update --force --all

Note, I had to use the --force option, to ensure that the update went through, with the intention of fixing peer dependencies after the update

The following peer dependencies now need to be fixed because now the build is broken:

npm WARN ng2-smart-table@1.3.5 requires a peer of ng2-completer@^2.0.8 but none is installed. You must install peer dependencies yourself.
npm WARN ng2-smart-table@1.3.5 requires a peer of @angular/common@^6.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ng2-smart-table@1.3.5 requires a peer of @angular/core@^6.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ng2-smart-table@1.3.5 requires a peer of @angular/forms@^6.0.1 but none is installed. You must install peer dependencies yourself.
npm WARN ngx-quill@4.5.0 requires a peer of quill@^1.3.6 but none is installed. You must install peer dependencies yourself.

Having read various articles about peer dependencies (including Peer Dependencies, which talks a lot about plugins), I still do not know how to interpret the meaning behind these warnings or what to do to fix them.

So let's take the first one:

ng2-smart-table@1.3.5 requires a peer of ng2-completer@^2.0.8

What does this mean?

My package.json contains (in dependencies section):

"ng2-smart-table": "^1.3.5",

ng2-completer is not in my package.json, because it isn't a direct dependency.

So is this error coming from the fact that it currently not specified as a direct dependency and it should be; ie should I just install the version that is required so that it is a direct dependency? (npm install ng2-completer@^2.0.8 ??)

I have seen in other articles that there is a "peerDependencies" that can go into package.json, which I have never seen for myself. So Should I create this section and this add "ng2-completer@^2.0.8" to it?.

Without fixing these peer dependencies, when I go to build the app, I get the following errors:

λ ~/dev/github/js/wrappixel/admin-pro-angular-ng6-v2/admin-angular/ upgrade-framework* npm run start

> admin-angular@0.0.0 start /Users/Plastikfan/dev/github/js/wrappixel/admin-pro-angular-ng6-v2/admin-angular
> ng serve

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2019-01-22T13:20:28.970Z
Hash: c0785093f684bce10104
Time: 8859ms
chunk {main} main.js, main.js.map (main) 1.95 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 92.4 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 97.2 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 2.09 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 327 kB [initial] [rendered]

ERROR in multi ./src/styles.css ./node_modules/ngx-toastr/toastr.css ./node_modules/angular-calendar/css/angular-calendar.css ./node_modules/chartist/dist/chartist.css ./node_modules/quill/dist/quill.snow.css ./node_modules/dragula/dist/dragula.css ./src/assets/scss/style.scss
Module not found: Error: Can't resolve '/Users/Plastikfan/dev/github/js/wrappixel/admin-pro-angular-ng6-v2/admin-angular/node_modules/quill/dist/quill.snow.css' in '/Users/Plastikfan/dev/github/js/wrappixel/admin-pro-angular-ng6-v2/admin-angular'
ERROR in src/app/apps/apps.module.ts(7,31): error TS2307: Cannot find module 'ng2-dragula/ng2-dragula'.
src/app/apps/apps.module.ts(17,66): error TS2554: Expected 1-2 arguments, but got 0.
src/app/apps/fullcalendar/fullcalendar.component.ts(5,102): error TS2307: Cannot find module 'date-fns'.
src/app/charts/chartist-js/chartistjs.component.ts(3,39): error TS2307: Cannot find module 'ng-chartist/dist/chartist.component'.
src/app/charts/chartist-js/dynamic.component.ts(2,27): error TS2307: Cannot find module 'ng-chartist/dist/chartist.component'.
src/app/extra-component/drag-n-drop/drag.component.ts(11,25): error TS2339: Property 'subscribe' does not exist on type '(groupName?: string) => Observable<{ name: string; el: Element; source: Element; }>'.
src/app/extra-component/drag-n-drop/drag.component.ts(15,25): error TS2339: Property 'subscribe' does not exist on type '(groupName?: string) => Observable<{ name: string; el: Element; target: Element; source: Element; sibling: Element; }>'.
src/app/extra-component/drag-n-drop/drag.component.ts(19,25): error TS2339: Property 'subscribe' does not exist on type '(groupName?: string) => Observable<{ name: string; el: Element; container: Element; source: Element; }>'.
src/app/extra-component/drag-n-drop/drag.component.ts(23,24): error TS2339: Property 'subscribe' does not exist on type '(groupName?: string) => Observable<{ name: string; el: Element; container: Element; source: Element; }>'.
src/app/extra-component/drag-n-drop/drag.component.ts(27,30): error TS2339: Property 'subscribe' does not exist on type '<T = any>(groupName?: string) => Observable<{ name: string; el: Element; target: Element; source: Element; sibling: Element; item: T; sourceModel: T[]; targetModel: T[]; sourceIndex: number; targetIndex: number; }>'.
src/app/extra-component/drag-n-drop/drag.component.ts(30,32): error TS2339: Property 'subscribe' does not exist on type '<T = any>(groupName?: string) => Observable<{ name: string; el: Element; container: Element; source: Element; item: T; sourceModel: T[]; sourceIndex: number; }>'.

ℹ ｢wdm｣: Failed to compile.

There is a multi error in multiple css files, can not find modules errors and "Property 'subscribe' does not exist on type" errors. I don't know if they are related to the peer dependencies warnings, but I guess they are.

In my angular.json, my "styles" section includes:

    "styles": [
      "src/styles.css",
      "node_modules/ngx-toastr/toastr.css",
      "node_modules/angular-calendar/css/angular-calendar.css", 
      "node_modules/chartist/dist/chartist.css",
      "node_modules/quill/dist/quill.snow.css",
      "node_modules/dragula/dist/dragula.css",
      "src/assets/scss/style.scss"
    ],

and these css files match up to the "ERROR in multi" error message seen. I found another article that mentions that "src/styles.css" should be changed to "styles.css", I tried that, but this made no difference.

Also:

ng2-smart-table@1.3.5 requires a peer of @angular/common@^6.0.1
ng2-smart-table@1.3.5 requires a peer of @angular/core@^6.0.1
ng2-smart-table@1.3.5 requires a peer of @angular/forms@^6.0.1

Looks like ng2-smart-table@1.3.5 is dependent upon Angular 6, but I've just upgraded the project to Angular 7. So is "ng2-smart-table@1.3.5" the problem and the dependency needs to change to a later version that works with Angular 7?

I'm hoping that somebody can help me fix the peer dependency warnings with the ultimate aim of fixing all those build errors.

Thanks.

Plastikfan
  • 3,674
  • 7
  • 39
  • 54

1 Answers1

0

If you haven't install this module then install this. 

npm i ng2-completer --save

well this dependency is not needed all time. I have recently faced this issue. In my one of the project it works fine with out this module but in second project I installed it. And then it works fine.

For other css error, it looks like css issue. Make sure you got css in a right way. Other wise try with ./node-modules... in style array.

For last issue. Make sure you have to this dependencies in your package.josn.

"dependencies": {
    "@agm/core": "^1.0.0-beta.3",
    "@angular/animations": "^6.0.2",
    "@angular/common": "^6.0.2",
    "@angular/compiler": "^6.0.2",
    "@angular/core": "^6.0.2",
    "@angular/forms": "^6.0.2"
    ....
}
Sachin Shah
  • 4,503
  • 3
  • 23
  • 50