如何在Visual Studio 2015/2017中打开CLI创建的Angular项目并让其识别结构

没问题，我来一步步教你怎么在Visual Studio 2015/2017里打开CLI创建的Angular项目，还能让VS正确识别它的结构～

这是最简单的方法，不需要创建额外的VS项目文件，适合只想快速编辑代码的场景：

• 打开Visual Studio，点击顶部菜单栏的文件 → 打开 → 文件夹
• 找到你通过CLI创建的Angular项目的根目录（就是包含package.json、src文件夹的那个目录），选中后点击选择文件夹
• 加载完成后，VS会在解决方案资源管理器里展示整个项目的文件结构，你可以直接编辑所有Angular文件，而且VS的语法高亮、代码提示、错误检查这些功能都能正常工作，完全不影响开发。

如果你希望VS把这个Angular项目当成一个标准的Web项目来管理（比如要和ASP.NET后端结合，或者需要使用VS的项目级功能），可以这么做：

• 打开Visual Studio，新建一个空ASP.NET Web Application项目（选任意.NET版本都行，因为Angular本身不依赖.NET环境）
• 右键项目名称，选择添加 → 现有项
• 选中Angular项目根目录下的所有文件和文件夹（记得勾选隐藏文件，比如.angular-cli.json、.gitignore这些），点击添加
• 导入完成后，你可以在VS里正常管理这个项目，甚至右键package.json选择任务运行器资源管理器，直接在VS里运行ng serve、ng build这些CLI命令。

VS2017对Node.js和Angular的支持更好，你可以先做以下配置，让体验更流畅：

• 打开VS2017的工具 → 获取工具和功能，勾选Node.js开发工作负载，安装完成后重启VS
• 再次打开Angular项目文件夹时，VS会自动识别这是一个Node.js/Angular项目，提供更完善的TypeScript智能提示、npm脚本管理功能，甚至能直接在VS里调试Angular应用。

• VS2015需要安装Update 3及以上版本，才能较好地支持Node.js和TypeScript，否则可能出现语法高亮失效、提示不正常的问题
• 如果遇到TypeScript相关的问题，你可以在VS的工具 → 扩展和更新里搜索安装最新的TypeScript插件
• 运行Angular项目的话，还是推荐用命令行的ng serve，当然也可以在VS的任务运行器里配置这个命令，直接在VS里启动开发服务器。

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