Angular极速入门

修改上述的图片中的start可修改访问端口和IP

java 复制代码
"start": "ng serve --port 3000"
java 复制代码
"start": "ng serve --port 3000 --host 0.0.0.0"

导入组件,使用npm install ng-zorro-antd报错

原因是npm 的依赖解析冲突问题,主要原因是项目中不同包对 Angular 核心库 (@angular/core) 的版本要求不一致

错误分析

  1. 当前安装的版本@angular/core@20.1.6

  2. 冲突来源

    • ng-zorro-antd@20.1.2 需要 @angular/core@20.1.7 (通过 @angular/animations@20.1.7 间接依赖)

    • 但你的项目和其他 Angular 包 (如 @angular/common, @angular/forms 等) 使用的是 @angular/core@20.1.6

解决方案

第一步:清理现有冲突

删除node_modules和锁文件

rm -rf node_modules package-lock.json

第二步:强制统一版本

  1. **统一 Angular 版本(**统一升级 Angular 到 20.1.7)
java 复制代码
# 使用覆盖安装方式
npm install --force @angular/core@20.1.7 @angular/common@20.1.7 @angular/forms@20.1.7 @angular/platform-browser@20.1.7 @angular/animations@20.1.7

# 然后同步其他Angular配套包
npm install --force @angular/router@20.1.7 @angular/platform-server@20.1.7 @angular/service-worker@20.1.7
第三步:更新开发依赖(使用 ng update 自动升级)
java 复制代码
npx ng update @angular/cli @angular/core

然后安装 ng-zorro-antd:

java 复制代码
npm install ng-zorro-antd@20.1.1

最后显示成功,效果如下: