如何在Visual Studio 2017中无构建错误使用Angular-CLI并屏蔽TS错误

我之前也踩过这个坑！在包含多个项目的VS解决方案里，那个目标为ES5的Angular-CLI项目总是被VS自带的TypeScript编译机制搞砸——微软自家的工具总想抢着干活，却完全不兼容Angular-CLI的编译逻辑，结果一堆莫名其妙的TS错误弹出来，真正的有效问题都被淹没了。下面几个亲测有效的办法，能让VS彻底忽略这些无关错误：

方法1：修改项目文件（.csproj）彻底禁用VS的TypeScript编译 #

直接编辑你的Angular-CLI项目对应的.csproj文件，添加或修改以下配置，从根源上阻止VS插手TS编译：

<PropertyGroup>
  <!-- 完全阻止VS编译TypeScript文件 -->
  <TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
  <!-- 确保工具版本和Angular-CLI使用的TS版本匹配，避免版本差异引发错误 -->
  <TypeScriptToolsVersion>你的TypeScript版本号</TypeScriptToolsVersion>
</PropertyGroup>

<ItemGroup>
  <!-- 移除VS默认的TS编译包含规则，避免它扫描所有TS文件 -->
  <Compile Remove="**\*.ts" />
  <!-- 将TS文件标记为普通内容，而非编译目标 -->
  <Content Include="**\*.ts" />
</ItemGroup>

这个配置直接告诉VS：“TS文件的编译不归你管”，从根本上切断VS的自动编译逻辑。

方法2：调整Visual Studio全局TypeScript编译设置 #

除了项目级配置，还可以调整VS的全局设置，确保它严格遵循项目配置：

1. 打开VS的工具 > 选项 > 文本编辑器 > TypeScript > 项目 > 常规
2. 取消勾选“自动编译TypeScript文件”
3. 勾选“使用MSBuild的TypeScript编译设置（来自项目文件）”

这样VS会完全听从你在.csproj里的安排，不会自作主张触发TS编译。

方法3：让VS调用Angular-CLI的构建命令代替自身编译 #

如果你的解决方案是通过VS触发构建，可以把VS的构建动作指向Angular-CLI的命令，让专业的工具干专业的事：

1. 右键点击Angular-CLI项目，选择属性 > 生成事件
2. 在预生成事件命令行中添加Angular-CLI的构建命令：

ng build # 生产环境可以用 ng build --prod

3. 确保VS的构建动作不会重复编译，比如在项目属性的“生成”选项卡中，取消不必要的编译目标。

这样整个构建流程就交给Angular-CLI处理，VS只负责调用命令，不会再瞎报TS错误。

方法4：排除VS不需要扫描的目录 #

有时候VS会扫描node_modules或编译输出目录（比如dist）里的TS文件，导致无意义的错误提示。可以这样处理：

1. 在VS的解决方案资源管理器中，右键点击node_modules和dist目录
2. 选择属性
3. 把“生成操作”改为“无”，并勾选“从生成中排除”

这样VS就不会去扫描这些目录里的文件，减少不必要的错误干扰。

总结 #

最有效的组合是方法1+方法2，双管齐下彻底切断VS的TS编译逻辑，让Angular-CLI全权负责项目的TypeScript编译。之后你就能看到真正有效的错误提示，不用再被假错误烦扰了。

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