【问题标题】:How to fix peer dependency warnings after upgrading Angular app from version 6 to 7如何在将 Angular 应用程序从版本 6 升级到 7 后修复对等依赖警告
【发布时间】:2019-01-23 17:53:15
【问题描述】:

我购买了一个管理模板(来自 wrappixel),它是一个 Angular 6 应用程序。我需要将它升级到 Angular 版本 7。我使用

ng 更新 --force --all

注意,我必须使用 --force 选项来确保更新通过,目的是在更新后修复对等依赖项

现在需要修复以下对等依赖项,因为现在构建已损坏:

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.

阅读了有关对等依赖关系的各种文章(包括Peer Dependencies,其中谈到了很多关于插件),我仍然不知道如何解释这些警告背后的含义或如何解决它们。

那么我们就拿第一个吧:

ng2-smart-table@1.3.5 需要 ng2-completer@^2.0.8 的 peer

这是什么意思?

我的 package.json 包含(在依赖项部分):

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

ng2-completer 不在我的 package.json 中,因为它不是直接依赖项。

所以这个错误是因为它目前没有被指定为直接依赖,它应该是;即我应该只安装所需的版本,使其成为直接依赖项吗? (npm install ng2-completer@^2.0.8 ??)

我在其他文章中看到有一个“peerDependencies”可以进入 package.json,这是我自己从未见过的。那么我应该创建这个部分并在其中添加“ng2-completer@^2.0.8”吗?

如果不修复这些对等依赖项,当我去构建应用程序时,我会收到以下错误:

λ ~/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.

多个 css 文件中存在 multi 错误,找不到模块错误和“类型上不存在属性'订阅'”错误。我不知道它们是否与对等依赖警告有关,但我猜它们是。

在我的 angular.json 中,我的“样式”部分包括:

    "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"
    ],

并且这些 css 文件与看到的“ERROR in multi”错误消息相匹配。我发现另一篇文章提到“src/styles.css”应该改为“styles.css”,我试过了,但没有任何区别。

还有:

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

看起来 ng2-smart-table@1.3.5 依赖于 Angular 6,但我刚刚将项目升级到 Angular 7。“ng2-smart-table@1.3.5”的问题和依赖关系也是如此需要更改为适用于 Angular 7 的更高版本?

我希望有人可以帮助我修复对等依赖警告,最终目的是修复所有这些构建错误。

谢谢。

【问题讨论】:

    标签: node.js angular peer-dependencies


    【解决方案1】:

    如果您尚未安装此模块,请安装此模块。

    npm i ng2-completer --save
    

    这个依赖并不是一直都需要的。我最近遇到了这个问题。在我的一个项目中,没有这个模块它可以正常工作,但在第二个项目中我安装了它。然后它工作正常。

    对于其他 css 错误,它看起来像 css 问题。确保您以正确的方式获得 css。其他明智的尝试在样式数组中使用./node-modules...

    最后一期。确保您必须在 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"
        ....
    }
    

    【讨论】:

      猜你喜欢
      • 2019-11-24
      • 2020-06-09
      • 2019-04-16
      • 2020-02-01
      • 1970-01-01
      • 2021-05-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多