使用VSCode可以管理和编辑Angular项目，当按F5来进行调试时，将执行Angular CLI下的ng serve命令。

编译和启动

执行过程如下：

1、启动Angular CLI内置的一个基于Express实现的服务端应用程序

2、对应用程序进行”不执行预编译“的构建

3、构建结果保存在服务端应用程序的内存中

4、根据type启动对应浏览器，并根据url设置打开对应网址开始调试

构建结果和ng build的结果一致，但请注意，由于此时基于Express的应用程序，其路径和文件名是大小写敏感的，务必注意，特别是静态资源文件，文件名和扩展名需要和代码中的保持一致。

调试

用VSCode来调试基于TypeScript的项目，需要如下条件：

1、VSCode安装了JavaScript Debugger，目前最新的VSCode已内置

2、tsconfig.json，即TypeScript编译配置文件中，sourceMap需设置为true

设置断点有如下两种方式：

1、在TypeScript源代码文件中，需要设置断点的位置，增加”debugger;“语句。

请注意，由于ng serve执行的是ng build，并不会生成map文件，所以直接在TypeScript源代码文件上打断点是无法被VSCode捕获到的。

代码中使用debugger，在执行ng serve时，构建后的js文件中也包含了debugger，VSCode可以捕获到并停止在这里，等待调试。

2、先完成ng serve启动，浏览器已打开的情况下，按如下步骤执行

a、打开”开发者工具“
b、打开Sources面板
c、在webpack路径下，找到需要打断点的TypeScript源代码，并打开
d、在源代码中需打断点位置，设置断点
f、刷新浏览器网址，重新加载，VSCode可以捕获断点并停止，等待调试