能否在Angular 2+（v5）中用Chrome本地覆盖/工作区编辑.ts文件？

嘿，刚好我之前也折腾过这个问题！先直接给结论：直接用Chrome的“本地覆盖”功能改.ts文件是行不通的，但用Chrome的「工作区（Workspaces）」配合Angular CLI的热重载，完全可以实现浏览器里改.ts文件实时生效的效果，具体步骤如下：

为什么直接改.ts本地覆盖没用？ #

Angular CLI是把.ts文件编译成.js（还有对应的sourcemap）后才让浏览器加载的。你用本地覆盖改了.ts，浏览器不会自动触发Angular的重新编译，自然看不到变化——这和.scss不一样，因为.scss在开发环境是被实时编译成.css，Chrome能直接关联到编译后的样式文件，所以本地覆盖改scss能生效。

可行的操作步骤 #

1. 把Angular项目目录添加到Chrome工作区 #

• 打开Chrome DevTools，切换到「Sources」面板
• 左侧找到「Filesystem」标签，点击「Add folder to workspace」，选中你的Angular项目根目录
• 弹出权限请求时，点击「允许」让Chrome访问这个文件夹

2. 映射源.ts文件到本地项目文件 #

• 在「Sources」面板的「Page」标签下，展开webpack:// → . → src，找到你要编辑的.ts文件（比如app/components/xxx.component.ts）
• 右键这个文件，选择「Map to filesystem resource」，然后在弹出的文件选择框里，找到本地项目中对应的.ts文件并选中

3. 确保Angular CLI的热重载正常运行 #

• 你得用ng serve启动项目（这是开发环境默认的启动命令），它自带热重载功能
• 现在回到DevTools里编辑刚才映射好的.ts文件，保存后：Chrome会把修改同步到本地的.ts文件 → Angular CLI检测到文件变化自动重新编译 → 浏览器自动刷新，你就能立刻看到修改效果了

注意事项 #

• 确认开发环境的sourcemap是开启的：打开angular.json，找到projects → 你的项目名 → architect → build → configurations → development，确保sourceMap的值是true（Angular CLI默认是开的）
• 如果找不到webpack://下的源文件，去DevTools的「Settings」（右上角齿轮图标）里，勾选「Enable JavaScript source maps」和「Enable CSS source maps」

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