npm Clarity无法使用“ng add @clr/angular”CLI命令安装

fhity93d  于 2023-01-09  发布在  Angular
关注(0)|答案(3)|浏览(207)

我在看第三章建立一个问题跟踪系统使用React形式'从 * Angular 项目:* 建立现代网络应用程序,通过探索Angular 12与10个不同的项目和尖端技术,第二版由Aristeidis Bampakos。
本章中的项目需要安装Clarity。根据本书(和Clarity文档:https://clarity.design/get-started/developing/angular/),则实现此目的的命令为

ng new foo-project
cd foo-project
ng add @clr/angular

在运行这些命令时,我得到以下输出

ℹ Using package manager: npm
⚠ Unable to find compatible package.  Using 'latest' tag.
⚠ Package has unmet peer dependencies. Adding the package may not succeed.

The package @clr/angular@12.0.8 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: foo-project@0.0.0
npm ERR! Found: @angular/common@13.1.1
npm ERR! node_modules/@angular/common
npm ERR!   @angular/common@"~13.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^12.0.0" from @clr/angular@12.0.8
npm ERR! node_modules/@clr/angular
npm ERR!   @clr/angular@"12.0.8" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /Users/foo/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/foo/.npm/_logs/2021-12-29T05_20_34_198Z-debug.log
✖ Package install failed, see above.

这是调试日志

# npm resolution error report

2021-12-28T21:01:27.904Z

While resolving: foo-project@0.0.0
Found: @angular/common@13.1.1
node_modules/@angular/common
  @angular/common@"~13.1.0" from the root project

Could not resolve dependency:
peer @angular/common@"^12.0.0" from @clr/angular@12.0.8
node_modules/@clr/angular
  @clr/angular@"*" from the root project

Fix the upstream dependency conflict, or retry
this command with --force, or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

Raw JSON explanation object:

{
  "code": "ERESOLVE",
  "current": {
    "name": "@angular/common",
    "version": "13.1.1",
    "whileInstalling": {
      "name": "foo-project",
      "version": "0.0.0",
      "path": "/Users/foo/Projects/Angular/angular-projects-book/foo-project/foo-project"
    },
    "location": "node_modules/@angular/common",
    "isWorkspace": false,
    "dependents": [
      {
        "type": "prod",
        "name": "@angular/common",
        "spec": "~13.1.0",
        "from": {
          "location": "/Users/foo/Projects/Angular/angular-projects-book/foo-project/foo-project"
        }
      }
    ]
  },
  "currentEdge": {
    "type": "prod",
    "name": "@angular/common",
    "spec": "~13.1.0",
    "from": {
      "location": "/Users/foo/Projects/Angular/angular-projects-book/foo-project/foo-project"
    }
  },
  "edge": {
    "type": "peer",
    "name": "@angular/common",
    "spec": "^12.0.0",
    "error": "INVALID",
    "from": {
      "name": "@clr/angular",
      "version": "12.0.8",
      "whileInstalling": {
        "name": "foo-project",
        "version": "0.0.0",
        "path": "/Users/foo/Projects/Angular/angular-projects-book/foo-project/foo-project"
      },
      "location": "node_modules/@clr/angular",
      "isWorkspace": false,
      "dependents": [
        {
          "type": "prod",
          "name": "@clr/angular",
          "spec": "*",
          "from": {
            "location": "/Users/foo/Projects/Angular/angular-projects-book/foo-project/foo-project"
          }
        }
      ]
    }
  },
  "strictPeerDeps": false,
  "force": false
}

这是我的Angular 副本的版本信息

Angular CLI: 13.1.2
Node: 16.13.1
Package Manager: npm 8.1.2
OS: darwin arm64

Angular: 13.1.1
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.5.4

我认为我的Angular版本与npm获取的Clarity版本不兼容。如果是这样,最好的方法是什么?

thigvfpy

thigvfpy1#

我也有同样的问题。正如书中所说,它适用于Angular 12,我使用的是Angular 12的最后一个版本(Angular 12. 2. 17)。
然后我用不同版本的Clarity进行测试,Clarity 12.0.7对我很有效。

ng add @clr/angular@12.0.7

然后我不知道为什么,但编译器没有从Clarity识别UI标签,我只是运行:

npm install @clr/ui --save

然后一切都运行正常!
顺便说一下,我从官方Clarity文档中获得的las命令:https://clarity.design/documentation/get-started

f45qwnt8

f45qwnt82#

我在用

npm install @cds/core @clr/angular @clr/ui --save

然后添加到angular.json

"styles": [
      "node_modules/@clr/ui/clr-ui.min.css",
]

然后将这两个模块添加到app. module. ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ClarityModule } from '@clr/angular';

我使用了Angular 版本13和版本15,它不支持清晰度

6qfn3psc

6qfn3psc3#

您可以使用npm强制安装所需的软件包:

npm install @clr/icons @clr/angular @clr/ui @cds/core @webcomponents/webcomponentsjs  --force

此方法不检查依赖项。在生产环境中没有用,但可用于特定包尚未更新且没有最新依赖项的情况
遵循以下网址的其他说明:https://clarity.design/get-started/developing/angular/
另一个选项是降级到Angular 版本12。这允许在没有警告的情况下安装清晰度包。

相关问题