Angular项目中angular.json与package.json的区别是什么

这俩都是 Angular 项目根目录下的核心配置文件，但管辖范围完全不重叠，搞混了很容易踩无效配置的坑，具体差异可以从三个维度区分：

1. 功能定位差异 #

• package.json 是 npm 生态的通用配置文件，不是 Angular 独有——所有基于 Node.js 包管理的前端、后端项目都会有这个文件，服务对象是 npm/yarn/pnpm 这类包管理器，负责管理项目通用的依赖、脚本、元信息。
• angular.json 是 Angular CLI 专属的工作区配置文件，只有用 Angular CLI 生成的项目才会存在，服务对象是 Angular 自带的构建、开发、测试工具链，负责管理 Angular 特有的编译、打包、运行规则。
  简单说：package.json 管「项目要用到哪些外部包、能跑哪些自定义命令」，angular.json 管「Angular CLI 拿到源码和依赖之后，按什么规则处理成最终可运行的产物」。

2. 核心配置内容差异 #

package.json 主要存这些内容 #

• 项目基础元信息：项目名称、版本号、开源协议、作者、模块类型（ESM/CommonJS）等通用描述信息
• 依赖版本声明：分为两类，dependencies 存生产环境运行必须的包（比如 @angular/core、RxJS、第三方UI组件库），devDependencies 存仅开发/构建阶段用的工具包（比如 Angular CLI、TypeScript、代码检查工具、单测框架），包管理器安装依赖时完全以这里的版本规则为准
• 可执行脚本：scripts 字段下定义的命令别名，比如常用的 npm start、npm run build，本质都是把长命令映射成短别名方便执行
• 其他 Node 生态通用配置：比如兼容的 Node 版本范围、npm 包发布规则、私有源地址配置等

angular.json 主要存这些内容 #

• 工作区结构声明：记录当前 Angular 工作区下包含多少个项目（可运行应用、可复用类库都算），每个项目的根目录、源码路径、默认启动项目是哪个
• 构建/开发服务规则：每个项目对应的 build、serve 配置项里，会定义打包入口文件、静态资源路径、全局引入的样式/脚本路径、构建产物输出目录、开发服务端口号、自动打开浏览器开关、接口代理规则等 Angular 构建专属参数
• 测试相关配置：记录单元测试、端到端测试的运行参数，比如测试文件匹配规则、启动的浏览器环境、测试覆盖率统计规则
• 环境差异化配置：比如开发/生产环境的文件替换规则、构建优化开关（代码压缩、摇树优化、懒加载拆包规则）、全局样式预处理器（SCSS/Less）的预设参数等

3. 适用场景差异 #

• 当你需要安装/卸载第三方npm包、调整依赖版本、新增自定义执行脚本、配置npm包发布规则的时候，修改的是 package.json，改完通常需要重新执行包安装命令，同步更新lock文件。
• 当你需要调整Angular构建规则、修改开发服务端口/代理、新增全局样式/脚本、配置多环境文件替换、修改打包输出路径的时候，修改的是 angular.json，改完不需要重新安装依赖，只要重启开发服务或者重新执行构建命令就会生效。

最常见的新手踩坑：想引入全局样式文件的时候，错把路径加到package.json里，结果配置完全不生效——全局静态资源的读取规则是Angular CLI在构建阶段解析的，必须配在angular.json对应项目build选项的styles字段里才会生效。

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