如何在Angular-CLI项目中引入Angular完整源码以支持VSCode IntelliSense跳转？

当然可以实现！我之前在探索Angular源码的时候也遇到过同样的困扰——默认跳转到.d.ts文件根本看不到完整的实现逻辑，后来折腾出几个实用的方法，分享给你：

方法一：修改项目TS配置（快速生效，适合仅查看源码） #

Angular官方发布的npm包其实已经包含了完整的源码（在node_modules/@angular/*/src目录下），只是VSCode的TypeScript服务默认优先读取类型定义文件。我们可以通过调整tsconfig.json来改变这个优先级：

1. 打开项目根目录的tsconfig.json，在compilerOptions中添加以下配置：

   "baseUrl": "./",
   "paths": {
     "@angular/*": ["node_modules/@angular/*/src"]
   }
   

   这个配置会告诉TypeScript，当导入@angular/core、@angular/common等模块时，优先去对应的src目录查找源码文件。

2. 调整exclude规则，允许TypeScript处理Angular源码（默认会排除整个node_modules）：

   "exclude": [
     "node_modules/*",
     "!node_modules/@angular/*/src"
   ]
   

   这里的!表示反向排除，也就是不排除Angular的源码目录。

3. 重启VSCode或者执行Ctrl+Shift+P → Reload Window，让配置生效。

现在试试用IntelliSense跳转（比如Ctrl+点击组件中的Component装饰器），就能直接打开对应的.ts源码文件啦！

方法二：本地链接Angular源码仓库（适合深度探索或修改） #

如果你需要更灵活地查看甚至调试Angular源码，可以把Angular官方仓库克隆到本地，然后作为项目的本地依赖：

1. 在项目根目录外克隆Angular仓库，记得切换到和你项目一致的版本（比如你的项目用Angular 16.2.0，就checkout对应的tag）：

   git clone https://github.com/angular/angular.git
   cd angular
   git checkout 16.2.0
   npm install # 安装构建依赖
   npm run build core common -- --local # 构建你需要的模块
   

2. 回到你的Angular-CLI项目，在package.json中修改Angular依赖的指向，替换成本地构建的包：

   "dependencies": {
     "@angular/core": "file:../angular/dist/packages/core",
     "@angular/common": "file:../angular/dist/packages/common",
     // 其他Angular模块同理
   }
   

3. 执行npm install，让npm链接本地包。

这种方法的好处是你可以直接在本地源码里添加注释、调试断点，不过步骤相对繁琐，适合有深度探索需求的场景。

额外提示 #

• 第三方库（比如RxJS）也可以用类似方法配置，比如在paths里添加："rxjs/*": ["node_modules/rxjs/src/*"]
• 如果遇到类型检查错误，可以暂时调整tsconfig.json中的strict相关选项（比如设为false），不影响源码查看
• 确保VSCode使用的是项目本地的TypeScript版本：打开Ctrl+Shift+P → TypeScript: Select TypeScript Version，选择node_modules/typescript

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