使用ng add @angular/material安装Angular Material时失败报错

架构老林

2026-8-4

问题描述

尝试执行CLI命令 ng add @angular/material 安装Angular Material时，持续出现安装失败的错误，具体报错信息如下：

npm ERR! code 1
npm ERR! git 依赖预处理失败
npm ERR! 命令：/usr/local/bin/node /usr/local/lib/node_modules/npm/bin/npm-cli.js install --force --cache=/Users/aashir/.npm --prefer-offline=false --prefer-online=false --offline=false --no-progress --no-save --no-audit --include=dev --include=peer --include=optional --no-package-lock-only --no-dry-run
npm ERR! npm 警告：使用 --force 会禁用推荐的保护机制。
npm ERR! npm 警告：@types/vfile-message@2.0.0 已废弃：这是一个存根类型定义，vfile-message 已提供自身的类型定义，无需安装此包。
npm ERR! npm 警告：source-map-resolve@0.5.2 已废弃：请查看相关废弃说明
npm ERR! npm 警告：minimatch@2.0.10 已废弃：请升级到 minimatch 3.0.2 或更高版本，以避免正则表达式DoS漏洞
npm ERR! npm 警告：graceful-fs@1.2.3 已废弃：请升级到 graceful-fs 4 版本，以兼容当前及未来的Node.js版本
npm ERR! npm 警告：minimatch@0.2.14 已废弃：请升级到 minimatch 3.0.2 或更高版本，以避免正则表达式DoS漏洞
npm ERR! npm 警告：gulp-util@3.0.8 已废弃：gulp-util 已废弃，请按照指引替换它
npm ERR! npm 警告：source-map-url@0.4.0 已废弃：请查看相关废弃说明
npm ERR! npm ERR! 代码：ERR_SOCKET_TIMEOUT
npm ERR! npm ERR! 网络：套接字超时
npm ERR! npm ERR! 网络：这是一个网络连接相关的问题。
npm ERR! npm ERR! 网络：大多数情况下是因为你处于代理环境，或者网络设置有误。
npm ERR! npm ERR! 网络
npm ERR! npm ERR! 网络：如果你在代理环境下，请确保 'proxy' 配置正确。详见：'npm help config'
npm ERR!
npm ERR! npm ERR! 本次运行的完整日志可在以下路径查看：
npm ERR! npm ERR!     /Users/aashir/.npm/_logs/2023-01-22T10_03_47_382Z-debug-0.log
npm ERR! 本次运行的完整日志可在以下路径查看：
npm ERR!     /Users/aashir/.npm/_logs/2023-01-22T10_03_16_381Z-debug-0.log

✖ 包安装失败，请查看以上信息。

解决方案

从报错信息来看，核心问题是网络套接字超时，按以下步骤逐一解决：

检查网络稳定性：确认当前网络能正常访问npm相关服务，可尝试打开npm官方源地址测试连通性。
延长npm超时时间：执行以下命令增加网络请求的超时阈值，避免因下载缓慢导致中断：
```
npm config set fetch-retry-mintimeout 20000
npm config set fetch-retry-maxtimeout 120000
```
切换npm镜像源：若官方源访问速度慢，切换到国内镜像源提速：
```
npm config set registry https://registry.npmmirror.com/
```
后续需要恢复官方源时，执行：
```
npm config set registry https://registry.npmjs.org/
```
清理npm缓存：缓存损坏可能引发安装异常，清理缓存后重试安装：
```
npm cache clean --force
```
核对代理配置：如果处于代理网络环境，确认npm的代理配置正确。查看当前代理设置：
```
npm config get proxy
npm config get https-proxy
```
若无需代理，执行以下命令清空代理配置：
```
npm config delete proxy
npm config delete https-proxy
```
手动安装依赖：如果ng add命令仍无法成功，直接手动安装Angular Material核心依赖：
```
npm install @angular/material @angular/cdk @angular/animations
```
安装完成后，按照Angular Material的指引手动配置主题、动画等功能。

内容的提问来源于stack exchange，提问作者aashir