npm安装angular11+devui报依赖错误

npm折腾吐了...

背景

最近想升级下,从angularjs1.8到angular12,但是这次也顺便想用一下UI框架,折腾选择了devui, 但是devui目前支持angular最大版本是11.0.0, 所以我把angular降级到11并尝试使用

问题

执行步骤

1
2
3
npm uninstall -g  @angular/cli
npm install -g @angular/cli@11.0.0.0
ng new test1

结果失败, 错误大概如下,我想了下按道理angular不会自己没处理好依赖关系

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
liuliancao@liuliancao-dev:~$ ng new test1
? Do you want to enforce stricter type checking and stricter bundle budgets in the workspace?
  This setting helps improve maintainability and catch bugs ahead of time.
  For more information, see https://angular.io/strict Yes
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE test1/README.md (1014 bytes)
CREATE test1/.editorconfig (274 bytes)
CREATE test1/.gitignore (631 bytes)
CREATE test1/angular.json (3615 bytes)
CREATE test1/package.json (1204 bytes)
CREATE test1/tsconfig.json (783 bytes)
CREATE test1/tslint.json (3185 bytes)
CREATE test1/.browserslistrc (703 bytes)
CREATE test1/karma.conf.js (1422 bytes)
CREATE test1/tsconfig.app.json (287 bytes)
CREATE test1/tsconfig.spec.json (333 bytes)
CREATE test1/src/favicon.ico (948 bytes)
CREATE test1/src/index.html (291 bytes)
CREATE test1/src/main.ts (372 bytes)
CREATE test1/src/polyfills.ts (2830 bytes)
CREATE test1/src/styles.css (80 bytes)
CREATE test1/src/test.ts (753 bytes)
CREATE test1/src/assets/.gitkeep (0 bytes)
CREATE test1/src/environments/environment.prod.ts (51 bytes)
CREATE test1/src/environments/environment.ts (662 bytes)
CREATE test1/src/app/app-routing.module.ts (245 bytes)
CREATE test1/src/app/app.module.ts (393 bytes)
CREATE test1/src/app/app.component.css (0 bytes)
CREATE test1/src/app/app.component.html (24955 bytes)
CREATE test1/src/app/app.component.spec.ts (1054 bytes)
CREATE test1/src/app/app.component.ts (209 bytes)
CREATE test1/e2e/protractor.conf.js (904 bytes)
CREATE test1/e2e/tsconfig.json (274 bytes)
CREATE test1/e2e/src/app.e2e-spec.ts (656 bytes)
CREATE test1/e2e/src/app.po.ts (274 bytes)
 Installing packages (npm)...npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: test1@0.0.0
npm ERR! Found: jasmine-core@3.6.0
npm ERR! node_modules/jasmine-core
npm ERR!   dev jasmine-core@"~3.6.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer jasmine-core@">=3.7.1" from karma-jasmine-html-reporter@1.6.0
npm ERR! node_modules/karma-jasmine-html-reporter
npm ERR!   dev karma-jasmine-html-reporter@"^1.5.0" 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 /home/liuliancao/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/liuliancao/.npm/_logs/2021-05-31T00_23_26_743Z-debug.log
 Package install failed, see above.
The Schematic workflow failed. See above.

看了github issue https://github.com/angular/angular-cli/issues/20941,官方在一次更新中升级了jasmine-core的版本,导致有问题,吐了,官方建议更新到11.2.13, npm install -g @angular/cli@11.2.13就可以啦 然后ng i ng-devui就可以使用devui了,完美. 也有人降级了npm到6,不过我没试,折腾了一个晚上一个早上,终于解决了.

npm常用命令

由于使用npm深感无奈,所以学习下npm相关命令

版本和帮助

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
liuliancao@liuliancao-dev:~$ npm version
{
  npm: '7.15.0',
  node: '14.17.0',
  v8: '8.4.371.23-node.63',
  uv: '1.41.0',
  zlib: '1.2.11',
  brotli: '1.0.9',
  ares: '1.17.1',
  modules: '83',
  nghttp2: '1.42.0',
  napi: '8',
  llhttp: '2.1.3',
  openssl: '1.1.1k',
  cldr: '38.1',
  icu: '68.2',
  tz: '2020d',
  unicode: '13.0'
}
liuliancao@liuliancao-dev:~$ npm help
npm <command>

Usage:

npm install        install all the dependencies in your project
npm install <foo>  add the <foo> dependency to your project
npm test           run this project's tests
npm run <foo>      run the script named <foo>
npm <command> -h   quick help on <command>
npm -l             display usage info for all commands
npm help <term>    search for help on <term>
npm help npm       more involved overview

All commands:

    access, adduser, audit, bin, bugs, cache, ci, completion,
    config, dedupe, deprecate, diff, dist-tag, docs, doctor,
    edit, exec, explain, explore, find-dupes, fund, get, help,
    hook, init, install, install-ci-test, install-test, link,
    ll, login, logout, ls, org, outdated, owner, pack, ping,
    prefix, profile, prune, publish, rebuild, repo, restart,
    root, run-script, search, set, set-script, shrinkwrap, star,
    stars, start, stop, team, test, token, uninstall, unpublish,
    unstar, update, version, view, whoami

Specify configs in the ini-formatted file:
    /home/liuliancao/.npmrc
or on the command line via: npm <command> --key=value

More configuration info: npm help config
Configuration fields: npm help 7 config

npm@7.15.0 /usr/local/lib/node_modules/npm

查询包

npm search,如果使用淘宝源记得加上–registry

1
2
3
liuliancao@liuliancao-dev:~$ npm search --registry=https://registry.npmjs.org @angular/cli
NAME                      | DESCRIPTION          | AUTHOR          | DATE       | VERSION  | KEYWORDS
@angular/cli              | CLI tool for Angular | =angular       | 2021-05-26 | 12.0.2   | angular Angular CLI devkit sdk Angular DevKit angular-cli

列出已经安装的模块

1
2
3
4
5
liuliancao@liuliancao-dev:~$ npm list -g --depth=0
/usr/local/lib
 @angular/cli@11.2.13
 jasmine-core@3.7.1
 npm@7.15.0

安装包

和yum很类似,结尾需要指定版本加@xxx.xxx.xxx

1
liuliancao@liuliancao-dev:~$ npm install @angular/cli@11.2.13

注意几个参数

  • –save或者-S 这个是部署到生产环境时候的依赖Dependencies
  • –save-dev或者-D 这个是部署到开发环境的依赖Depencies

所以dev时候和save的时候包是不一样的,通常dev时候还有一些调试工具等等哈

更新包

npm update [name]

卸载包

1
liuliancao@liuliancao-dev:~$ npm uninstall @angular/cli@11.2.13

总结

优先用高版本的软件

npm仍然需要熟悉和使用